Skip to content

Commit 1ed9e5d

Browse files
belinefbelinef
authored
Feat(Angular-universal-ssr) upgrade to ang15 (#2775)
* update readme * Feat(Angular-universal-ssr): upgrade to 15 * fix client lazy components creation. * fix test run
1 parent c00ec5b commit 1ed9e5d

38 files changed

+23915
-200
lines changed

Diff for: ‎angular-universal-ssr/README.md

+2-2
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,12 @@ Run `yarn start`. This will build and serve both `client-app`, `host-app`, on
99
ports `4000`, `5000`, respectively.
1010

1111
- [localhost:4000](http://localhost:4000/) (CLIENT_APP)
12-
- [localhost:5000](http://localhost:5000/) (HOST_APP)
12+
- [localhost:3000](http://localhost:3000/) (HOST_APP)
1313

1414
# Running Cypress E2E Tests
1515

1616
To run tests in interactive mode, run `npm run cypress:debug` from the root directory of the project. It will open Cypress Test Runner and allow to run tests in interactive mode. [More info about "How to run tests"](../../cypress/README.md#how-to-run-tests)
1717

1818
To build app and run test in headless mode, run `yarn e2e:ci`. It will build app and run tests for this workspace in headless mode. If tets failed cypress will create `cypress` directory in sample root folder with screenshots and videos.
1919

20-
["Best Practices, Rules amd more interesting information here](../../cypress/README.md)
20+
["Best Practices, Rules amd more interesting information here](../../cypress/README.md)

Diff for: ‎angular-universal-ssr/client-app/.gitignore

+1
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ speed-measure-plugin*.json
3232
.history/*
3333

3434
# misc
35+
/.angular/cache
3536
/.sass-cache
3637
/connect.lock
3738
/coverage

Diff for: ‎angular-universal-ssr/client-app/angular.json

+19-10
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
33
"version": 1,
44
"cli": {
5-
"packageManager": "yarn"
5+
"packageManager": "yarn",
6+
"analytics": "e9693d44-eea8-4fdb-918a-9139355769eb"
67
},
78
"newProjectRoot": "projects",
89
"projects": {
@@ -28,7 +29,6 @@
2829
"skipTests": true
2930
},
3031
"@schematics/angular:module": {
31-
"skipTests": true
3232
},
3333
"@schematics/angular:pipe": {
3434
"skipTests": true
@@ -49,10 +49,20 @@
4949
"main": "src/main.ts",
5050
"polyfills": "src/polyfills.ts",
5151
"tsConfig": "tsconfig.app.json",
52-
"aot": true,
53-
"assets": ["src/favicon.ico", "src/assets"],
54-
"styles": ["src/styles.scss"],
55-
"scripts": []
52+
"assets": [
53+
"src/favicon.ico",
54+
"src/assets"
55+
],
56+
"styles": [
57+
"src/styles.scss"
58+
],
59+
"scripts": [],
60+
"vendorChunk": true,
61+
"extractLicenses": false,
62+
"buildOptimizer": false,
63+
"sourceMap": true,
64+
"optimization": false,
65+
"namedChunks": true
5666
},
5767
"configurations": {
5868
"production": {
@@ -65,7 +75,6 @@
6575
"optimization": true,
6676
"outputHashing": "all",
6777
"sourceMap": false,
68-
"extractCss": true,
6978
"namedChunks": false,
7079
"extractLicenses": true,
7180
"vendorChunk": false,
@@ -83,7 +92,8 @@
8392
}
8493
]
8594
}
86-
}
95+
},
96+
"defaultConfiguration": ""
8797
},
8898
"serve": {
8999
"builder": "@angular-devkit/build-angular:dev-server",
@@ -104,6 +114,5 @@
104114
}
105115
}
106116
}
107-
},
108-
"defaultProject": "client-app"
117+
}
109118
}

Diff for: ‎angular-universal-ssr/client-app/package.json

+25-24
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,46 @@
22
"name": "angular-universal-ssr_client-app",
33
"version": "0.0.0",
44
"scripts": {
5+
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
56
"ng": "ng",
67
"start": "ng serve",
78
"build": "ng build",
89
"test": "ng test",
910
"lint": "ng lint",
1011
"e2e": "ng e2e",
11-
"serve:federation": "serve dist -l 5000 -s",
12+
"serve:federation": "serve dist -l 3000 -s",
1213
"build:federation": "webpack",
1314
"clean": "rm -rf dist"
1415
},
1516
"private": true,
1617
"dependencies": {
17-
"@angular/animations": "~10.2.0",
18-
"@angular/common": "~10.2.0",
19-
"@angular/compiler": "~10.2.0",
20-
"@angular/core": "~10.2.0",
21-
"@angular/forms": "~10.2.0",
22-
"@angular/platform-browser": "~10.2.0",
23-
"@angular/platform-browser-dynamic": "~10.2.0",
24-
"@angular/router": "~10.2.0",
25-
"rxjs": "~6.6.0",
26-
"serve": "^13.0.0",
27-
"tslib": "^2.0.0",
28-
"zone.js": "~0.11.0"
18+
"@angular/animations": "^15.1.2",
19+
"@angular/common": "^15.1.2",
20+
"@angular/compiler": "^15.1.2",
21+
"@angular/core": "^15.1.2",
22+
"@angular/forms": "^15.1.2",
23+
"@angular/platform-browser": "^15.1.2",
24+
"@angular/platform-browser-dynamic": "^15.1.2",
25+
"@angular/router": "^15.1.2",
26+
"rxjs": "^7.8.0",
27+
"serve": "^14.2.0",
28+
"tslib": "^2.5.0",
29+
"zone.js": "~0.12.0"
2930
},
3031
"devDependencies": {
31-
"@ngtools/webpack": "file:../patched_packages/_ngtools_webpack.tgz",
32-
"@angular-devkit/build-angular": "0.1102.19",
33-
"@angular/cli": "10.2.4",
34-
"@angular/compiler-cli": "10.2.5",
35-
"@types/node": "12.20.55",
32+
"@ngtools/webpack": "15.1.4",
33+
"@angular-devkit/build-angular": "15.1.4",
34+
"@angular/cli": "15.1.4",
35+
"@angular/compiler-cli": "15.1.2",
36+
"@types/node": "18.11.9",
3637
"clean-webpack-plugin": "4.0.0",
3738
"html-webpack-plugin": "5.5.0",
3839
"raw-loader": "4.0.2",
39-
"sass-loader": "12.6.0",
40-
"ts-node": "9.1.1",
41-
"tslint": "6.1.3",
42-
"typescript": "4.0.8",
43-
"webpack": "5.72.1",
44-
"webpack-cli": "4.10.0"
40+
"sass-loader": "13.2.0",
41+
"ts-node": "10.9.1",
42+
"tslint": "^6.1.3",
43+
"typescript": "4.9.5",
44+
"webpack": "5.75.0",
45+
"webpack-cli": "5.0.1"
4546
}
4647
}

Diff for: ‎angular-universal-ssr/client-app/src/app/app-routing.module.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const routes: Routes = [
1111
];
1212

1313
@NgModule({
14-
imports: [RouterModule.forRoot(routes)],
14+
imports: [RouterModule.forRoot(routes, {})],
1515
exports: [RouterModule],
1616
})
1717
export class AppRoutingModule {}

Diff for: ‎angular-universal-ssr/client-app/src/app/client-cities/client-cities-home/client-cities-home.component.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,9 @@ export class ClientCitiesHomeComponent implements OnInit {
3636
);
3737
const componentInstance = this.viewContainer.createComponent(
3838
factory,
39-
null,
39+
0,
4040
this.injector,
41+
null,
4142
).instance;
4243
(componentInstance as any).city = city;
4344
});

Diff for: ‎angular-universal-ssr/client-app/src/app/client-cities/client-cities.module.ts

+3-4
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,8 @@ import { ClientCitiesRoutingModule } from './client-cities-routing.module';
55
import { ClientCityComponent } from './client-city/client-city.component';
66

77
@NgModule({
8-
declarations: [ClientCitiesHomeComponent, ClientCityComponent],
9-
imports: [CommonModule, ClientCitiesRoutingModule],
10-
exports: [ClientCitiesHomeComponent],
11-
entryComponents: [ClientCityComponent],
8+
declarations: [ClientCitiesHomeComponent, ClientCityComponent],
9+
imports: [CommonModule, ClientCitiesRoutingModule],
10+
exports: [ClientCitiesHomeComponent]
1211
})
1312
export class ClientCitiesModule {}

Diff for: ‎angular-universal-ssr/client-app/src/environments/environment.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -13,4 +13,4 @@ export const environment = {
1313
* This import should be commented out in production mode because it will have a negative impact
1414
* on performance if an error is thrown.
1515
*/
16-
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
16+
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.

Diff for: ‎angular-universal-ssr/client-app/src/polyfills.ts

+1-11
Original file line numberDiff line numberDiff line change
@@ -18,16 +18,6 @@
1818
* BROWSER POLYFILLS
1919
*/
2020

21-
/** IE10 and IE11 requires the following for NgClass support on SVG elements */
22-
// import 'classlist.js'; // Run `npm install --save classlist.js`.
23-
24-
/**
25-
* Web Animations `@angular/platform-browser/animations`
26-
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
27-
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
28-
*/
29-
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.
30-
3121
/**
3222
* By default, zone.js will patch all possible macroTask and DomEvents
3323
* user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -55,7 +45,7 @@
5545
/***************************************************************************************************
5646
* Zone JS is required by default for Angular itself.
5747
*/
58-
import 'zone.js/dist/zone'; // Included with Angular CLI.
48+
import 'zone.js'; // Included with Angular CLI.
5949

6050
/***************************************************************************************************
6151
* APPLICATION IMPORTS

Diff for: ‎angular-universal-ssr/client-app/src/test.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {
55
BrowserDynamicTestingModule,
66
platformBrowserDynamicTesting,
77
} from '@angular/platform-browser-dynamic/testing';
8-
import 'zone.js/dist/zone-testing';
8+
import 'zone.js/testing';
99

1010
declare const require: {
1111
context(

Diff for: ‎angular-universal-ssr/client-app/tsconfig.app.json

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
1+
/* To learn more about this file see: https://angular.io/config/tsconfig. */
12
{
23
"extends": "./tsconfig.base.json",
34
"compilerOptions": {
45
"outDir": "./out-tsc/app",
56
"types": []
67
},
7-
"files": ["src/main.ts", "src/polyfills.ts"],
8-
"include": ["src/**/*.d.ts"]
8+
"files": [
9+
"src/main.ts",
10+
"src/polyfills.ts"
11+
],
12+
"include": [
13+
"src/**/*.d.ts"
14+
]
915
}

Diff for: ‎angular-universal-ssr/client-app/tsconfig.base.json

+6-6
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
/* To learn more about this file see: https://angular.io/config/tsconfig. */
12
{
23
"compileOnSave": false,
34
"compilerOptions": {
@@ -7,14 +8,13 @@
78
"declaration": false,
89
"downlevelIteration": true,
910
"experimentalDecorators": true,
10-
"module": "es2020",
1111
"moduleResolution": "node",
1212
"importHelpers": true,
1313
"target": "es2015",
14-
"lib": ["es2018", "dom"]
15-
},
16-
"angularCompilerOptions": {
17-
"fullTemplateTypeCheck": true,
18-
"strictInjectionParameters": true
14+
"module": "es2020",
15+
"lib": [
16+
"es2018",
17+
"dom"
18+
]
1919
}
2020
}

Diff for: ‎angular-universal-ssr/client-app/tsconfig.json

+27-12
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,29 @@
1-
/*
2-
This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
3-
It is not intended to be used to perform a compilation.
4-
5-
To learn more about this file see: https://angular.io/config/solution-tsconfig.
6-
*/
1+
/* To learn more about this file see: https://angular.io/config/tsconfig. */
72
{
8-
"files": [],
9-
"references": [
10-
{
11-
"path": "./tsconfig.app.json"
12-
}
13-
]
3+
"compileOnSave": false,
4+
"compilerOptions": {
5+
"baseUrl": "./",
6+
"outDir": "./dist/out-tsc",
7+
"forceConsistentCasingInFileNames": true,
8+
"strict": false,
9+
"strictPropertyInitialization": false,
10+
"noImplicitReturns": true,
11+
"noFallthroughCasesInSwitch": true,
12+
"sourceMap": true,
13+
"declaration": false,
14+
"downlevelIteration": true,
15+
"experimentalDecorators": true,
16+
"moduleResolution": "node",
17+
"importHelpers": true,
18+
"target": "es2015",
19+
"module": "es2020",
20+
"lib": [
21+
"es2018",
22+
"dom"
23+
]
24+
},
25+
"angularCompilerOptions": {
26+
"strictInjectionParameters": true,
27+
"strictTemplates": true
28+
}
1429
}

Diff for: ‎angular-universal-ssr/client-app/webpack/client-app.js

+9-4
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
const { resolve } = require('path');
2-
const { AngularCompilerPlugin } = require('@ngtools/webpack');
2+
const { AngularWebpackPlugin } = require('@ngtools/webpack');
33
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
44
const HtmlWebpackPlugin = require('html-webpack-plugin');
55
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
@@ -10,8 +10,12 @@ module.exports = (env = {}) => {
1010
return {
1111
entry: ['./src/polyfills.ts', './src/main.ts'],
1212
mode: 'production',
13+
resolve: {
14+
mainFields: ['browser', 'module', 'main'],
15+
extensions: ['.ts', '.js'],
16+
},
1317
output: {
14-
publicPath: 'http://localhost:5000/',
18+
publicPath: 'http://localhost:3000/',
1519
path: resolve(__dirname, buildFolder),
1620
},
1721
plugins: [
@@ -34,9 +38,10 @@ module.exports = (env = {}) => {
3438
],
3539
}),
3640

37-
new AngularCompilerPlugin({
41+
new AngularWebpackPlugin({
3842
tsConfigPath: './tsconfig.app.json',
3943
entryModule: './src/app/app.module#AppModule',
44+
jitMode: true,
4045
skipCodeGeneration: true,
4146
directTemplateLoading: false,
4247
}),
@@ -45,7 +50,7 @@ module.exports = (env = {}) => {
4550
static: {
4651
directory: buildFolder,
4752
},
48-
port: 5000,
53+
port: 3000,
4954
},
5055
module: {
5156
rules: [...require('./_loaders')],

Diff for: ‎angular-universal-ssr/client-app/webpack/client-ssr.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
const { AngularCompilerPlugin, PLATFORM } = require('@ngtools/webpack');
1+
const { AngularWebpackPlugin } = require('@ngtools/webpack');
22
const { resolve } = require('path');
33
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
44
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
@@ -11,6 +11,7 @@ module.exports = (env = {}) => {
1111
mode: 'production',
1212
resolve: {
1313
mainFields: ['browser', 'module', 'main'],
14+
extensions: ['.ts', '.js'],
1415
},
1516
output: {
1617
filename: '[name].js',
@@ -35,9 +36,11 @@ module.exports = (env = {}) => {
3536
{ '@angular/router': { singleton: true, eager: true } },
3637
],
3738
}),
38-
new AngularCompilerPlugin({
39+
new AngularWebpackPlugin({
3940
entryModule: resolve(__dirname, '../src/app/app.module#AppModule'),
4041
tsConfigPath: './tsconfig.app.json',
42+
platform: 1,
43+
jitMode: true,
4144
skipCodeGeneration: true,
4245
directTemplateLoading: false,
4346
}),

0 commit comments

Comments
 (0)