Permalink
Browse files

feat: upgrade to angular 7 (#507)

  • Loading branch information...
Burak Tasci
Burak Tasci committed Oct 10, 2018
1 parent 111bef7 commit d829173bd914655770f66810994c80c5d56870dd
Showing with 2,214 additions and 5,008 deletions.
  1. +1 −4 .gitignore
  2. +0 −77 .server/spa-server.hmr.js
  3. +0 −52 .server/spa-server.js
  4. +1 −1 CONTRIBUTING.md
  5. +71 −82 README.md
  6. +117 −8 angular.json
  7. +0 −1 gulpfile.js
  8. +51 −96 package.json
  9. +0 −1 postcss.config.js
  10. +18 −14 {src/server → }/server.ts
  11. 0 src/{client → }/app/+about/about-apple-pear.component.e2e-spec.ts
  12. +1 −1 src/{client → }/app/+about/about-apple-pear.component.html
  13. 0 src/{client → }/app/+about/about-apple-pear.component.scss
  14. src/{client → }/app/+about/about-apple-pear.component.spec.ts
  15. 0 src/{client → }/app/+about/about-apple-pear.component.ts
  16. 0 src/{client → }/app/+about/about-banana.component.e2e-spec.ts
  17. +1 −1 src/{client → }/app/+about/about-banana.component.html
  18. 0 src/{client → }/app/+about/about-banana.component.scss
  19. src/{client → }/app/+about/about-banana.component.spec.ts
  20. 0 src/{client → }/app/+about/about-banana.component.ts
  21. 0 src/{client → }/app/+about/about-us.component.e2e-spec.ts
  22. +1 −1 src/{client → }/app/+about/about-us.component.html
  23. 0 src/{client → }/app/+about/about-us.component.scss
  24. src/{client → }/app/+about/about-us.component.spec.ts
  25. 0 src/{client → }/app/+about/about-us.component.ts
  26. 0 src/{client → }/app/+about/about.component.e2e-spec.ts
  27. +1 −1 src/{client → }/app/+about/about.component.html
  28. 0 src/{client → }/app/+about/about.component.scss
  29. src/{client → }/app/+about/about.component.spec.ts
  30. 0 src/{client → }/app/+about/about.component.ts
  31. 0 src/{client → }/app/+about/about.module.ts
  32. 0 src/{client → }/app/+about/about.routes.ts
  33. 0 src/{client → }/app/+home/home.component.e2e-spec.ts
  34. +1 −1 src/{client → }/app/+home/home.component.html
  35. 0 src/{client → }/app/+home/home.component.scss
  36. src/{client → }/app/+home/home.component.spec.ts
  37. 0 src/{client → }/app/+home/home.component.ts
  38. 0 src/{client → }/app/+home/home.module.ts
  39. 0 src/{client → }/app/+home/home.routes.ts
  40. 0 src/{client → }/app/+secure/secure.component.e2e-spec.ts
  41. +1 −1 src/{client → }/app/+secure/secure.component.html
  42. 0 src/{client → }/app/+secure/secure.component.scss
  43. src/{client → }/app/+secure/secure.component.spec.ts
  44. 0 src/{client → }/app/+secure/secure.component.ts
  45. 0 src/{client → }/app/+secure/secure.module.ts
  46. 0 src/{client → }/app/+secure/secure.routes.ts
  47. +9 −0 src/app/app.animations.ts
  48. +3 −3 src/{client → }/app/app.browser.module.ts
  49. 0 src/{client → }/app/app.component.html
  50. 0 src/{client → }/app/app.component.spec.ts
  51. +0 −4 src/{client → }/app/app.component.ts
  52. +5 −5 src/{client → }/app/app.module.ts
  53. 0 src/{client → }/app/app.routes.ts
  54. +8 −6 src/{server → }/app/app.server.module.ts
  55. 0 src/{client → }/app/framework/analytics/analytics.module.ts
  56. 0 src/{client → }/app/framework/analytics/src/analytics.service.spec.ts
  57. 0 src/{client → }/app/framework/analytics/src/analytics.service.ts
  58. +2 −3 src/{client → }/app/framework/auth/testing/auth-testing.module.ts
  59. +1 −1 src/{client → }/app/framework/auth/testing/mocks/backend-interceptor.mock.ts
  60. 0 src/{client → }/app/framework/auth/testing/mocks/jwt-interceptor.mock.ts
  61. +4 −0 src/app/framework/auth/testing/tokens.ts
  62. 0 src/{client → }/app/framework/core/core.module.ts
  63. 0 src/{client → }/app/framework/core/shared.module.ts
  64. 0 src/{client → }/app/framework/core/src/base.component.ts
  65. 0 src/{client → }/app/framework/core/src/console.service.ts
  66. 0 src/{client → }/app/framework/core/src/log.service.spec.ts
  67. 0 src/{client → }/app/framework/core/src/log.service.ts
  68. 0 src/{client → }/app/framework/core/src/models/console.ts
  69. 0 src/{client → }/app/framework/core/src/models/log-level.ts
  70. 0 src/{client → }/app/framework/core/src/models/window.ts
  71. 0 src/{client → }/app/framework/core/src/window.service.ts
  72. 0 src/{client → }/app/framework/core/testing/core-testing.module.ts
  73. 0 src/{client → }/app/framework/core/testing/mocks/cache-service.mock.ts
  74. 0 src/{client → }/app/framework/core/testing/mocks/config-service.mock.ts
  75. 0 src/{client → }/app/framework/core/testing/mocks/element-ref.mock.ts
  76. 0 src/{client → }/app/framework/core/testing/mocks/meta-service.mock.ts
  77. 0 src/{client → }/app/framework/core/testing/mocks/window.mock.ts
  78. 0 src/{client → }/app/framework/http/http-interceptor.module.ts
  79. +2 −5 src/{client → }/app/framework/http/src/universal.interceptor.ts
  80. 0 src/{client → }/app/framework/i18n/i18n.module.ts
  81. 0 src/{client → }/app/framework/i18n/src/change-language.component.spec.ts
  82. 0 src/{client → }/app/framework/i18n/src/change-language.component.ts
  83. src/{client → }/app/framework/i18n/src/i18n.service.spec.ts
  84. 0 src/{client → }/app/framework/i18n/src/i18n.service.ts
  85. 0 src/{client → }/app/framework/i18n/src/language.actions.ts
  86. src/{client → }/app/framework/i18n/src/language.effects.spec.ts
  87. 0 src/{client → }/app/framework/i18n/src/language.effects.ts
  88. src/{client → }/app/framework/i18n/src/language.reducer.spec.ts
  89. 0 src/{client → }/app/framework/i18n/src/language.reducer.ts
  90. 0 src/{client → }/app/framework/i18n/src/models/category.ts
  91. 0 src/{client → }/app/framework/i18n/src/models/i18n-state.ts
  92. 0 src/{client → }/app/framework/i18n/src/models/language.ts
  93. 0 src/{client → }/app/framework/i18n/src/reducers.ts
  94. 0 src/{client → }/app/framework/i18n/testing/i18n-testing.module.ts
  95. 0 src/{client → }/app/framework/i18n/testing/mocks/translate-service.mock.ts
  96. 0 src/{client → }/app/framework/material/material.module.ts
  97. 0 src/{client → }/app/framework/ngrx/testing/mocks/actions.mock.ts
  98. 0 src/{client → }/app/framework/ngrx/testing/ngrx-testing.module.ts
  99. 0 src/{client → }/app/framework/router/testing/mocks/activated-route.mock.ts
  100. 0 src/{client → }/app/framework/router/testing/mocks/router.mock.ts
  101. 0 src/{client → }/app/framework/router/testing/router-testing.module.ts
  102. 0 src/{client → }/app/framework/testing/e2e.ts
  103. 0 src/{client → }/app/framework/testing/index.ts
  104. 0 src/{client → }/app/framework/testing/mocks/component.mock.ts
  105. 0 src/{client → }/app/framework/testing/shorthand/ng-base.ts
  106. 0 src/{client → }/app/framework/testing/shorthand/ng-e2e.ts
  107. 0 src/{client → }/app/framework/testing/shorthand/ng-jest.ts
  108. 0 src/{client → }/app/framework/testing/testing.module.ts
  109. 0 src/{client → }/app/layout/header.component.html
  110. 0 src/{client → }/app/layout/header.component.scss
  111. src/{client → }/app/layout/header.component.spec.ts
  112. 0 src/{client → }/app/layout/header.component.ts
  113. 0 src/{client → }/app/layout/main.component.html
  114. 0 src/{client → }/app/layout/main.component.scss
  115. src/{client → }/app/layout/main.component.spec.ts
  116. 0 src/{client → }/app/layout/main.component.ts
  117. 0 src/{client → }/app/login/login.component.e2e-spec.ts
  118. 0 src/{client → }/app/login/login.component.html
  119. 0 src/{client → }/app/login/login.component.scss
  120. src/{client → }/app/login/login.component.spec.ts
  121. 0 src/{client → }/app/login/login.component.ts
  122. 0 src/{client → }/app/shared/common/util/func.util.ts
  123. 0 src/{client → }/app/shared/common/util/index.ts
  124. 0 src/{client → }/assets/config.local.json
  125. 0 src/{client → }/assets/i18n/en.json
  126. 0 src/{client → }/assets/i18n/tr.json
  127. 0 src/{client → }/assets/sass/layout.scss
  128. 0 src/{client → }/assets/sass/layout/reset.scss
  129. 0 src/{client → }/assets/sass/layout/root.scss
  130. 0 src/{client → }/assets/sass/layout/splash-screen.scss
  131. 0 src/{client → }/assets/sass/layout/typography.scss
  132. 0 src/{client → }/assets/sass/lib.scss
  133. 0 src/{client → }/assets/sass/mixins.scss
  134. 0 src/{client → }/assets/sass/shared.scss
  135. 0 src/{client → }/assets/sass/variables.scss
  136. +11 −0 src/browserslist
  137. +0 −39 src/client/app/app.animations.ts
  138. +0 −17 src/client/main-browser-aot.ts
  139. +0 −15 src/client/main-browser.ts
  140. +0 −17 src/client/main-spa-aot.ts
  141. +0 −19 src/client/main-spa.ts
  142. +0 −45 src/client/polyfills.ts
  143. 0 src/{client → }/custom-typings.d.ts
  144. +4 −0 src/environments/environment.hmr.ts
  145. +4 −0 src/environments/environment.prod.ts
  146. +17 −0 src/environments/environment.ts
  147. BIN src/{client/assets → }/favicon.ico
  148. +24 −0 src/hmr.ts
  149. +2 −6 src/{client → }/index.html
  150. +26 −0 src/main-browser.ts
  151. +2 −0 src/main-server.ts
  152. +85 −0 src/polyfills.ts
  153. +0 −81 tools/build/build-config.json
  154. +0 −197 tools/build/gulp-helpers.js
  155. +0 −279 tools/build/gulp-tasks.js
  156. +0 −35 tools/build/helpers.js
  157. +17 −92 tools/build/webpack.config.js
  158. +0 −88 tools/config/.sasslint.yml
  159. +0 −16 tools/config/html-elements.config.js
  160. +0 −7 tools/config/postcss.config.js
  161. +1 −1 tools/test/nightmare.config.ts
  162. +3 −10 tsconfig.json
  163. +19 −0 tsconfig.server-compile.json
  164. +9 −0 tsconfig.server.json
  165. +1,673 −3,657 yarn.lock
@@ -2,11 +2,8 @@

# compiled output
/.cache
/.server
!.server/spa-server*.js
/.temp
/dist
/docs
/public

# dependencies
node_modules/

This file was deleted.

Oops, something went wrong.

This file was deleted.

Oops, something went wrong.
@@ -199,4 +199,4 @@ message is then used for this.

[coc]: https://github.com/ng-seed/universal/blob/master/CODE_OF_CONDUCT.md
[github]: https://github.com/ng-seed/universal
[angular-tslint-rules]: https://github.com/fulls1z3/angular-tslint-rules
[angular-tslint-rules]: https://github.com/ng-seed/angular-tslint-rules
153 README.md
@@ -13,19 +13,16 @@
in file and application organization, providing the following features:

- [x] Providing a seed project using the [Angular] framework.
- [x] **NEW:** [CLI Scaffolding](#cli-scaffolding) improving development productivity.
- [x] **WoW:** Compiling bundles for both browser (*SPA*) and server ([Angular Universal]) platforms.
- [x] **NEW:** Rebased on [Angular CLI] to focus on features and development productivity, not on build tools.
- [x] **NEW:** Customizable webpack configuration via [@angular-builders].
- [x] Using the modern **UI components** of [Angular Material].
- [x] Dynamic **responsive** layouts via [flex-layout].
- [x] Ready-to-go build system using [gulp] and [Webpack] to work with [TypeScript].
- [x] Managing the type definitions using [@types].
- [x] **[angular-webpack-config]** as configuration preset for [Webpack].
- [x] The ~~[Dll Bundle] and~~ [Hard Source] plugins for **lightning-fast** development builds.
- [x] **Hot Module Replacement** with [Webpack] and [webpack-hot-middleware].
- [x] Adjustable **build configuration** via `json` file (*`./tools/build/build-config.json`*).
- [x] Built-in **Hot Module Replacement** to save valuable development time.
- [x] Development, staging and production modes.
- [x] Performing [AoT compilation] for rapid page loads on staging/production builds (*using [@ngtools/webpack]*).
- [x] Minifying the production builds using [UglifyJS Webpack Plugin].
- [x] Both **inline** and **external** **[SCSS]** compilation.
- [x] Performing [AoT compilation] for rapid page loads on staging/production builds.
- [x] Tree-shaking and minifying the production builds using [Angular Devkit].
- [x] Cross-browser **[SCSS]** with [autoprefixer] and [browserslist].
- [x] **[stylelint-config-standard]** as configuration preset for [stylelint] and **custom rules** to standardize stylesheets.
- [x] Transferring server responses on client bootstrap to prevent app flickering with native [TransferState]`.
- [x] Deferring initialization of modules via [Lazy loading].
@@ -43,7 +40,7 @@ in file and application organization, providing the following features:
- [x] Seamless integration with [CircleCI] continuous integration and delivery platform.
- [x] **[angular-tslint-rules]** as configuration preset for [TSLint] and [codelyzer].
> Built with `Angular v6.x.x`, bundled with `gulp v4` and `webpack v4`.
> Built with `Angular v7.x.x`, bundled with `Angular CLI`.
You can find the **project documentation** [here](https://ng-seed.github.io/universal-docs).
@@ -54,18 +51,16 @@ You can view the **live app** at [http://ng-seed.fulls1z3.com](http://ng-seed.fu
- [Getting started](#getting-started)
- [Installation](#installation)
- [Setting up upstream repository](#setting-up-upstream-repository)
- [Building](#building)
- [Development and builds](#development-and-builds)
- [CLI Scaffolding](#cli-scaffolding)
- [Directory structure](#directory-structure)
- [Configuring `ng-seed/universal`](#configuring)
- [External stylesheets](#external-scss)
- [Contributing](#contributing)
- [License](#license)
## <a name="prerequisites"></a> Prerequisites
Packages in this seed project depend on `@angular v6.x.x`. Older versions contain outdated dependencies, might produce errors.
Packages in this seed project depend on `@angular v7.x.x`. Older versions contain outdated dependencies, might produce errors.
Also, please ensure that you are using **`Typescript v2.7.x`** or higher.
Also, please ensure that you are using **`Typescript v3.1.x`** or higher.
## <a name="getting-started"> Getting started
### <a name="installation"> Installation
@@ -109,54 +104,58 @@ $ git merge upstream/master
```
then handle any conflicts, and go on with building your app.
### <a name="building"> Building
These are the scripts to lint, test and build this seed project:
### <a name="development-builds"> Development & Builds
Below are the scripts to dev, build, lint, and test this seed project:
##### Install dependencies
```
# use `yarn` to install the dependencies
$ yarn
```
# clean artifacts & DLL cache
$ npm run clean
##### Development servers
```
# dev server
$ ng serve

# run tslint
$ npm run lint
# dev server (HMR-enabled)
$ yarn run start:hmr

# run unit tests
$ npm test
# dev server (AoT compilation)
$ yarn run start:prod

# run e2e tests
$ npm run e2e
# dev server (SSR)
$ yarn run start:ssr-prod

# dev build (lean Angular / Angular Universal)
$ npm run build:spa-dev
# OR
$ npm run build:universal-dev
# dev server (SSR & AoT compilation)
$ yarn run start:ssr
```
# stage build (lean Angular / Angular Universal)
$ npm run build:spa-stage
# OR
$ npm run build:universal-stage
##### Build
```
# development build
$ ng build

# prod build (lean Angular / Angular Universal)
$ npm run build:spa-prod
# OR
$ npm run build:universal-prod
# production build
$ ng build --prod

# start the server (lean Angular)
$ npm run serve:spa
# development build (SSR)
$ yarn run build:ssr

# start the server (lean Angular w/HMR support)
$ npm run serve:spa-hmr
# production build (SSR)
$ yarn run build:ssr-prod
```
# start the server (Angular Universal)
$ npm run serve
The build artifacts will be stored in the `dist/` directory.
# watch mode (build, and then HMR and test watch)
$ npm run serve:watch
##### Running tests
```
# run unit tests
$ npm test

Navigate to `http://localhost:1337` for **lean Angular** (*client-side rendering*) and `http://localhost:8000` for **Angular
Universal** (*server-side rendering*) in your browser.
# run e2e tests
$ npm run e2e
```
### <a name="cli-scaffolding"> CLI Scaffolding
The project currently performs **CLI scaffolding** using the official `@schematics/angular` collection and `@ngrx/schematics`
@@ -215,53 +214,47 @@ universal/
├──.circleci/
| └──config.yml * CircleCI config
├──.github/ * issue & pr templates
├──.server/ * dev server, output directory to extract server bundles
├──coverage/ * test coverage reports
├──dist/ * output directory to extract bundles
| ├──browser/ * browser bundles
| └──server/ * server bundles
├──node_modules/ * dependencies
├──public/ * output directory to extract client bundles
|
├──src/
| ├──client/ * client code
| | ├──app/
| | | ├──+lazy-module/ * some LAZY module (attn to the `+` prefix for lazy-loaded modules)
| | | | ...
| | | ├──framework/ * client framework
| | | ├──layout/ * layout (app module)
| | | └──login/ * login (app module)
| | └──assets/ * static assets (scss, img, json, etc.)
| └──server/ * server code
| ├──app/ * application code
| | ├──+lazy-module/ * some LAZY module (attn to the `+` prefix for lazy-loaded modules)
| | | ...
| | ├──framework/ * client framework
| | ├──layout/ * layout (app module)
| | └──login/ * login (app module)
| └──assets/ * static assets (scss, img, json, etc.)
| └──environments/ * environment settings
|
├──tools/
| ├──build/ * build config and scripts (gulp, webpack, etc.)
| ├──config/ * config files for static-assets (stylelint, postcss, etc.)
| ├──build/ * build config and scripts (webpack, etc.)
| ├──config/ * config files for static-assets (stylelint, etc.)
| └──test/ * test config
|
├──.gitignore * GIT settings
├──.jshintrc * jshint config
├──angular.json * Angular CLI config
├──CHANGELOG.md * change log
├──CODE_OF_CONDUCT.md * code of conduct
├──CONTRIBUTING.md * contributing info
├──gulpfile.js * gulp entry point
├──LICENSE * software license
├──package.json * deps management
├──README.md * project information
├──server.ts * server code
├──stylelint.config.js * stylelint config locator
├──test-report.xml * JUNIT test results
├──tsconfig.json * typescript config
├──tsconfig.server.json * typescript config (for server build)
├──tsconfig.server-compile.json * typescript config (for server compilation)
├──tsconfig.spec.json * typescript config (for unit/e2e tests)
├──tslint.json * tslint config
└──yarn.lock * deps lockfile
```
## <a name="configuring"></a> Configuring `ng-seed/universal`
Most of the configuration is done via **`./tools/build/build-config.json`**, where you can customize **host name**, **port numbers**,
and **output directories** for your app.
## <a name="external-scss"></a> External stylesheets
Any stylesheets (*SCSS*) placed in the **`src/client/assets/scss`** directory and imported into your project will automatically
be compiled into an **external .css file** and embedded in your staging/production builds.
All other stylesheets (*SCSS*) located below **`src/client/app`** will be **extracted into** the generated bundle (*inline*).
## <a name="contributing"></a> Contributing
If you want to file a bug, contribute some code, or improve documentation, please read up on the following contribution guidelines:
- [Issue guidelines](CONTRIBUTING.md#submit)
@@ -278,20 +271,16 @@ The MIT License (MIT)
Copyright (c) 2018 [Burak Tasci]
[Angular]: https://angular.io
[Angular Universal]: https://angular.io/guide/universal
[Angular CLI]: https://cli.angular.io
[@angular-builders]: https://github.com/meltedspark/angular-builders
[Angular Material]: https://material.angular.io
[flex-layout]: https://github.com/angular/flex-layout
[gulp]: http://gulpjs.com
[Webpack]: http://webpack.github.io
[TypeScript]: http://www.typescriptlang.org
[angular-webpack-config]: https://github.com/ng-seed/angular-webpack-config
[@types]: https://www.npmjs.com/~types
[Dll Bundle]: https://github.com/shlomiassaf/webpack-dll-bundles-plugin
[Hard Source]: https://github.com/mzgoddard/hard-source-webpack-plugin
[webpack-hot-middleware]: https://github.com/glenjamin/webpack-hot-middleware
[AoT compilation]: https://angular.io/docs/ts/latest/cookbook/aot-compiler.html
[@ngtools/webpack]: https://www.npmjs.com/package/@ngtools/webpack
[UglifyJS Webpack Plugin]: https://github.com/webpack-contrib/uglifyjs-webpack-plugin
[Angular Devkit]: https://github.com/angular/angular-cli
[SCSS]: http://sass-lang.com
[autoprefixer]: https://github.com/postcss/autoprefixer
[browserslist]: https://github.com/browserslist/browserslist
[stylelint-config-standard]: https://github.com/stylelint/stylelint-config-standard
[stylelint]: https://stylelint.io/
[Lazy loading]: https://angular-2-training-book.rangle.io/handout/modules/lazy-loading-module.html
Oops, something went wrong.

0 comments on commit d829173

Please sign in to comment.