Skip to content

Feat(Angular-universal-ssr) upgrade to ang15 #2775

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Feb 27, 2023
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions angular-universal-ssr/README.md
Original file line number Diff line number Diff line change
@@ -9,12 +9,12 @@ Run `yarn start`. This will build and serve both `client-app`, `host-app`, on
ports `4000`, `5000`, respectively.

- [localhost:4000](http://localhost:4000/) (CLIENT_APP)
- [localhost:5000](http://localhost:5000/) (HOST_APP)
- [localhost:3000](http://localhost:3000/) (HOST_APP)

# Running Cypress E2E Tests

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)

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.

["Best Practices, Rules amd more interesting information here](../../cypress/README.md)
["Best Practices, Rules amd more interesting information here](../../cypress/README.md)
1 change: 1 addition & 0 deletions angular-universal-ssr/client-app/.gitignore
Original file line number Diff line number Diff line change
@@ -32,6 +32,7 @@ speed-measure-plugin*.json
.history/*

# misc
/.angular/cache
/.sass-cache
/connect.lock
/coverage
29 changes: 19 additions & 10 deletions angular-universal-ssr/client-app/angular.json
Original file line number Diff line number Diff line change
@@ -2,7 +2,8 @@
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"packageManager": "yarn"
"packageManager": "yarn",
"analytics": "e9693d44-eea8-4fdb-918a-9139355769eb"
},
"newProjectRoot": "projects",
"projects": {
@@ -28,7 +29,6 @@
"skipTests": true
},
"@schematics/angular:module": {
"skipTests": true
},
"@schematics/angular:pipe": {
"skipTests": true
@@ -49,10 +49,20 @@
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"],
"scripts": []
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
@@ -65,7 +75,6 @@
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
@@ -83,7 +92,8 @@
}
]
}
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
@@ -104,6 +114,5 @@
}
}
}
},
"defaultProject": "client-app"
}
}
49 changes: 25 additions & 24 deletions angular-universal-ssr/client-app/package.json
Original file line number Diff line number Diff line change
@@ -2,45 +2,46 @@
"name": "angular-universal-ssr_client-app",
"version": "0.0.0",
"scripts": {
"postinstall": "ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e",
"serve:federation": "serve dist -l 5000 -s",
"serve:federation": "serve dist -l 3000 -s",
"build:federation": "webpack",
"clean": "rm -rf dist"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.2.0",
"@angular/common": "~10.2.0",
"@angular/compiler": "~10.2.0",
"@angular/core": "~10.2.0",
"@angular/forms": "~10.2.0",
"@angular/platform-browser": "~10.2.0",
"@angular/platform-browser-dynamic": "~10.2.0",
"@angular/router": "~10.2.0",
"rxjs": "~6.6.0",
"serve": "^13.0.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.0"
"@angular/animations": "^15.1.2",
"@angular/common": "^15.1.2",
"@angular/compiler": "^15.1.2",
"@angular/core": "^15.1.2",
"@angular/forms": "^15.1.2",
"@angular/platform-browser": "^15.1.2",
"@angular/platform-browser-dynamic": "^15.1.2",
"@angular/router": "^15.1.2",
"rxjs": "^7.8.0",
"serve": "^14.2.0",
"tslib": "^2.5.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"@ngtools/webpack": "file:../patched_packages/_ngtools_webpack.tgz",
"@angular-devkit/build-angular": "0.1102.19",
"@angular/cli": "10.2.4",
"@angular/compiler-cli": "10.2.5",
"@types/node": "12.20.55",
"@ngtools/webpack": "15.1.4",
"@angular-devkit/build-angular": "15.1.4",
"@angular/cli": "15.1.4",
"@angular/compiler-cli": "15.1.2",
"@types/node": "18.11.9",
"clean-webpack-plugin": "4.0.0",
"html-webpack-plugin": "5.5.0",
"raw-loader": "4.0.2",
"sass-loader": "12.6.0",
"ts-node": "9.1.1",
"tslint": "6.1.3",
"typescript": "4.0.8",
"webpack": "5.72.1",
"webpack-cli": "4.10.0"
"sass-loader": "13.2.0",
"ts-node": "10.9.1",
"tslint": "^6.1.3",
"typescript": "4.9.5",
"webpack": "5.75.0",
"webpack-cli": "5.0.1"
}
}
Original file line number Diff line number Diff line change
@@ -11,7 +11,7 @@ const routes: Routes = [
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
imports: [RouterModule.forRoot(routes, {})],
exports: [RouterModule],
})
export class AppRoutingModule {}
Original file line number Diff line number Diff line change
@@ -36,8 +36,9 @@ export class ClientCitiesHomeComponent implements OnInit {
);
const componentInstance = this.viewContainer.createComponent(
factory,
null,
0,
this.injector,
null,
).instance;
(componentInstance as any).city = city;
});
Original file line number Diff line number Diff line change
@@ -5,9 +5,8 @@ import { ClientCitiesRoutingModule } from './client-cities-routing.module';
import { ClientCityComponent } from './client-city/client-city.component';

@NgModule({
declarations: [ClientCitiesHomeComponent, ClientCityComponent],
imports: [CommonModule, ClientCitiesRoutingModule],
exports: [ClientCitiesHomeComponent],
entryComponents: [ClientCityComponent],
declarations: [ClientCitiesHomeComponent, ClientCityComponent],
imports: [CommonModule, ClientCitiesRoutingModule],
exports: [ClientCitiesHomeComponent]
})
export class ClientCitiesModule {}
Original file line number Diff line number Diff line change
@@ -13,4 +13,4 @@ export const environment = {
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
12 changes: 1 addition & 11 deletions angular-universal-ssr/client-app/src/polyfills.ts
Original file line number Diff line number Diff line change
@@ -18,16 +18,6 @@
* BROWSER POLYFILLS
*/

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.

/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.

/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -55,7 +45,7 @@
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
import 'zone.js'; // Included with Angular CLI.

/***************************************************************************************************
* APPLICATION IMPORTS
2 changes: 1 addition & 1 deletion angular-universal-ssr/client-app/src/test.ts
Original file line number Diff line number Diff line change
@@ -5,7 +5,7 @@ import {
BrowserDynamicTestingModule,
platformBrowserDynamicTesting,
} from '@angular/platform-browser-dynamic/testing';
import 'zone.js/dist/zone-testing';
import 'zone.js/testing';

declare const require: {
context(
10 changes: 8 additions & 2 deletions angular-universal-ssr/client-app/tsconfig.app.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": ["src/main.ts", "src/polyfills.ts"],
"include": ["src/**/*.d.ts"]
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
12 changes: 6 additions & 6 deletions angular-universal-ssr/client-app/tsconfig.base.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
@@ -7,14 +8,13 @@
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "es2020",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": ["es2018", "dom"]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
"module": "es2020",
"lib": [
"es2018",
"dom"
]
}
}
39 changes: 27 additions & 12 deletions angular-universal-ssr/client-app/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,14 +1,29 @@
/*
This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
It is not intended to be used to perform a compilation.

To learn more about this file see: https://angular.io/config/solution-tsconfig.
*/
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
}
]
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": false,
"strictPropertyInitialization": false,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"strictInjectionParameters": true,
"strictTemplates": true
}
}
13 changes: 9 additions & 4 deletions angular-universal-ssr/client-app/webpack/client-app.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const { resolve } = require('path');
const { AngularCompilerPlugin } = require('@ngtools/webpack');
const { AngularWebpackPlugin } = require('@ngtools/webpack');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
@@ -10,8 +10,12 @@ module.exports = (env = {}) => {
return {
entry: ['./src/polyfills.ts', './src/main.ts'],
mode: 'production',
resolve: {
mainFields: ['browser', 'module', 'main'],
extensions: ['.ts', '.js'],
},
output: {
publicPath: 'http://localhost:5000/',
publicPath: 'http://localhost:3000/',
path: resolve(__dirname, buildFolder),
},
plugins: [
@@ -34,9 +38,10 @@ module.exports = (env = {}) => {
],
}),

new AngularCompilerPlugin({
new AngularWebpackPlugin({
tsConfigPath: './tsconfig.app.json',
entryModule: './src/app/app.module#AppModule',
jitMode: true,
skipCodeGeneration: true,
directTemplateLoading: false,
}),
@@ -45,7 +50,7 @@ module.exports = (env = {}) => {
static: {
directory: buildFolder,
},
port: 5000,
port: 3000,
},
module: {
rules: [...require('./_loaders')],
7 changes: 5 additions & 2 deletions angular-universal-ssr/client-app/webpack/client-ssr.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
const { AngularCompilerPlugin, PLATFORM } = require('@ngtools/webpack');
const { AngularWebpackPlugin } = require('@ngtools/webpack');
const { resolve } = require('path');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
@@ -11,6 +11,7 @@ module.exports = (env = {}) => {
mode: 'production',
resolve: {
mainFields: ['browser', 'module', 'main'],
extensions: ['.ts', '.js'],
},
output: {
filename: '[name].js',
@@ -35,9 +36,11 @@ module.exports = (env = {}) => {
{ '@angular/router': { singleton: true, eager: true } },
],
}),
new AngularCompilerPlugin({
new AngularWebpackPlugin({
entryModule: resolve(__dirname, '../src/app/app.module#AppModule'),
tsConfigPath: './tsconfig.app.json',
platform: 1,
jitMode: true,
skipCodeGeneration: true,
directTemplateLoading: false,
}),
6,424 changes: 6,424 additions & 0 deletions angular-universal-ssr/client-app/yarn.lock

Large diffs are not rendered by default.

19 changes: 19 additions & 0 deletions angular-universal-ssr/e2e.ci.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
const concurrently = require('concurrently');
const commands = {
startHost: 'yarn start',
startE2e: 'wait-on http://localhost:4000 && yarn e2e:test'
};

const {result} = concurrently([
commands.startHost,
commands.startE2e
], {
killOthers: ['failure', 'success'],
});

function handleClose(exitInfo) {
const testResult = exitInfo.find(info => info.command.command === commands.startE2e);
process.exit(testResult.exitCode);
}

result.then(handleClose, handleClose);
14 changes: 7 additions & 7 deletions angular-universal-ssr/e2e/tests/clientChecks.cy.ts
Original file line number Diff line number Diff line change
@@ -9,15 +9,15 @@ const methodsPage: AngularUniversalSsrMethods = new AngularUniversalSsrMethods()
describe('Angular Universal SSR', () => {
context('It checks client app', () => {
beforeEach(() => {
basePage.openLocalhost(5000)
basePage.openLocalhost(3000)
})

it('Checks cities block visibility', () => {
basePage.checkElementVisibility({
selector: selectors.angularUniversalSsrApp.citiesBlock
})
})

it('Checks cities block header visibility', () => {
basePage.checkElementWithTextPresence({
parentSelector: selectors.angularUniversalSsrApp.citiesBlock,
@@ -26,11 +26,11 @@ describe('Angular Universal SSR', () => {
visibilityState: 'be.visible'
})
})

it('Checks base cities names visibility', () => {
methodsPage.checkTextedElementsVisibility(Constants.elementsText.angularUniversalSsrApp.addedCities, updatedSelectors.angularUniversalSsrApp.addedCity)
})

it('Checks that both cities links can be clicked', () => {
basePage.checkElementState({
selector: updatedSelectors.angularUniversalSsrApp.addedCity,
@@ -39,7 +39,7 @@ describe('Angular Universal SSR', () => {
jqueryValue: false
})
})

it('Clicks on city by name and checks description with text appear', () => {
Constants.elementsText.angularUniversalSsrApp.addedCities.forEach((city: string, counter: number) => {
basePage.clickElementWithText({
@@ -53,7 +53,7 @@ describe('Angular Universal SSR', () => {
})
})
})

it('Checks that selection of city info can be reverted after reload', () => {
methodsPage.checkCitiesBlockFunctionality()
})
46 changes: 23 additions & 23 deletions angular-universal-ssr/e2e/tests/hostChecks.cy.ts
Original file line number Diff line number Diff line change
@@ -15,41 +15,41 @@ describe('Angular Universal SSR', () => {
beforeEach(() => {
basePage.openLocalhost(4000)
})

it('Checks app root component visibility', () => {
basePage.checkElementVisibility({
selector: baseSelectors.tags.appRoot
})
})

it('Checks app root component header text', () => {
basePage.checkElementWithTextPresence({
selector: baseSelectors.tags.appRoot,
text: Constants.commonPhrases.angularUniversalSsrApp.components.rootComponent
})
})

it('Checks value input visibility', () => {
basePage.checkElementVisibility({
selector: baseSelectors.tags.inputs.input
})
})

it('Checks value input is not disabled', () => {
basePage.checkElementState({
parentSelector: baseSelectors.tags.coreElements.div,
selector: baseSelectors.tags.inputs.input,
state: 'not.be.disabled'
})
})

it('Checks value input button visibility', () => {
basePage.checkElementVisibility({
parentSelector: baseSelectors.tags.coreElements.div,
selector: baseSelectors.tags.coreElements.button,
})
})

it('Checks value input button text', () => {
basePage.checkElementWithTextPresence({
parentSelector: baseSelectors.tags.coreElements.div,
@@ -58,7 +58,7 @@ describe('Angular Universal SSR', () => {
visibilityState: 'be.visible'
})
})

it('Checks value input button color', () => {
basePage.checkElementHaveProperty({
selector: baseSelectors.tags.coreElements.button,
@@ -67,15 +67,15 @@ describe('Angular Universal SSR', () => {
value: Constants.color.lightGrey
})
})

it('Checks value input button is not disabled', () => {
basePage.checkElementState({
parentSelector: baseSelectors.tags.coreElements.div,
selector: baseSelectors.tags.coreElements.button,
state: 'not.be.disabled'
})
})

it('Checks value input has no validation', () => {
CommonTestData.multipleSizeStringsArray.forEach((string: string) => {
basePage.fillField({
@@ -85,18 +85,18 @@ describe('Angular Universal SSR', () => {
basePage.checkInputValue(string)
})
})

it( `Checks that by default added values quantity equal to ${baseElementsQuantity}`, () => {
basePage.checkElementQuantity({
selector: baseSelectors.tags.coreElements.list,
quantity: baseElementsQuantity
})
})

it('Checks basically added values names', () => {
methodsPage.checkTextedElementsVisibility(Constants.elementsText.angularUniversalSsrApp.angularUniversalSsrAddedValuesNames, baseSelectors.tags.coreElements.list)
})

it('Checks add new value functionality', () => {
methodsPage.addNewListValue()
basePage.checkElementWithTextPresence({
@@ -105,7 +105,7 @@ describe('Angular Universal SSR', () => {
visibilityState: 'be.visible'
})
})

it('Checks that after applying value status in input it can be added more then once', () => {
methodsPage.addNewListValue()
basePage.checkInputValue(Constants.commonConstantsData.standardPhrase)
@@ -124,7 +124,7 @@ describe('Angular Universal SSR', () => {
jqueryValue: true
})
})

it('Checks that empty input would not add new value to the list', () => {
basePage.checkElementQuantity({
selector: baseSelectors.tags.coreElements.list,
@@ -140,7 +140,7 @@ describe('Angular Universal SSR', () => {
quantity: baseElementsQuantity
})
})

it('Checks that newly added value disappears after reload', () => {
basePage.checkElementQuantity({
selector: baseSelectors.tags.coreElements.list,
@@ -175,25 +175,25 @@ describe('Angular Universal SSR', () => {
isVisible: false
})
})

it('Checks app home component element text', () => {
basePage.checkElementWithTextPresence({
selector: baseSelectors.tags.appRoot,
text: Constants.commonPhrases.angularUniversalSsrApp.components.homeComponent
})
})

it(`Checks that tabs quantity equal to ${baseElementsQuantity}`, () => {
basePage.checkElementQuantity({
selector: updatedSelectors.angularUniversalSsrApp.tab,
quantity: baseElementsQuantity
})
})

it('Checks tab names visibility', () => {
methodsPage.checkTextedElementsVisibility(Constants.elementsText.angularUniversalSsrApp.tabsNames, updatedSelectors.angularUniversalSsrApp.tab)
})

it('Checks cities block appears after click on federation tab', () => {
basePage.checkElementVisibility({
selector: selectors.angularUniversalSsrApp.citiesBlock,
@@ -207,7 +207,7 @@ describe('Angular Universal SSR', () => {
selector: selectors.angularUniversalSsrApp.citiesBlock
})
})

it('Checks that cities block which appears after click on federation tab is equal to one in client app', () => {
basePage.checkElementVisibility({
selector: selectors.angularUniversalSsrApp.citiesBlock,
@@ -220,11 +220,11 @@ describe('Angular Universal SSR', () => {
basePage.checkElementVisibility({
selector: selectors.angularUniversalSsrApp.citiesBlock
})
basePage.compareInfoBetweenHosts(selectors.angularUniversalSsrApp.citiesBlock, 5000)
basePage.compareInfoBetweenHosts(selectors.angularUniversalSsrApp.citiesBlock, 3000)
})

it('Checks added cities block functionality are the same for root and client hosts', () => {
methodsPage.checkAddedCitiesBlockFunctionalityForMultipleHosts(5000,
methodsPage.checkAddedCitiesBlockFunctionalityForMultipleHosts(3000,
Constants.elementsText.angularUniversalSsrApp.addedCities, updatedSelectors.angularUniversalSsrApp.addedCity,
Constants.commonPhrases.angularUniversalSsrApp.selectedCityInfo, selectors.angularUniversalSsrApp.selectedCityInfo)
})
1 change: 1 addition & 0 deletions angular-universal-ssr/host-app/.gitignore
Original file line number Diff line number Diff line change
@@ -32,6 +32,7 @@ speed-measure-plugin*.json
.history/*

# misc
/.angular/cache
/.sass-cache
/connect.lock
/coverage
40 changes: 27 additions & 13 deletions angular-universal-ssr/host-app/angular.json
Original file line number Diff line number Diff line change
@@ -2,7 +2,8 @@
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"cli": {
"packageManager": "yarn"
"packageManager": "yarn",
"analytics": "00254bfe-36c5-4063-afd7-8def92406660"
},
"newProjectRoot": "projects",
"projects": {
@@ -28,7 +29,6 @@
"skipTests": true
},
"@schematics/angular:module": {
"skipTests": true
},
"@schematics/angular:pipe": {
"skipTests": true
@@ -49,10 +49,20 @@
"main": "src/main.ts",
"polyfills": "src/polyfills.ts",
"tsConfig": "tsconfig.app.json",
"aot": true,
"assets": ["src/favicon.ico", "src/assets"],
"styles": ["src/styles.scss"],
"scripts": []
"assets": [
"src/favicon.ico",
"src/assets"
],
"styles": [
"src/styles.scss"
],
"scripts": [],
"vendorChunk": true,
"extractLicenses": false,
"buildOptimizer": false,
"sourceMap": true,
"optimization": false,
"namedChunks": true
},
"configurations": {
"production": {
@@ -65,7 +75,6 @@
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
@@ -83,7 +92,8 @@
}
]
}
}
},
"defaultConfiguration": ""
},
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
@@ -107,7 +117,9 @@
"options": {
"outputPath": "dist/host-app/server",
"main": "server.ts",
"tsConfig": "tsconfig.server.json"
"tsConfig": "tsconfig.server.json",
"sourceMap": true,
"optimization": false
},
"configurations": {
"production": {
@@ -121,7 +133,8 @@
"sourceMap": false,
"optimization": true
}
}
},
"defaultConfiguration": ""
},
"serve-ssr": {
"builder": "@nguniversal/builders:ssr-dev-server",
@@ -141,14 +154,15 @@
"options": {
"browserTarget": "host-app:build:production",
"serverTarget": "host-app:server:production",
"routes": ["/"]
"routes": [
"/"
]
},
"configurations": {
"production": {}
}
}
}
}
},
"defaultProject": "host-app"
}
}
53 changes: 27 additions & 26 deletions angular-universal-ssr/host-app/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
{
"name": "angular-universal-ssr_host-app",
"version": "0.0.0",
"type": "commonjs",
"scripts": {
"ng": "ng",
"start": "ng serve",
@@ -9,42 +10,42 @@
"lint": "ng lint",
"dev:ssr": "ng run host-app:serve-ssr",
"serve:ssr": "node dist/host-app/server/main.js",
"build:ssr": "ng build --prod && ng run host-app:server:production",
"build:ssr": "ng build --configuration production && ng run host-app:server:production",
"build:federation": "webpack",
"serve:federation": "node dist/server/main.js",
"clean": "rm -rf dist"
},
"private": true,
"dependencies": {
"@angular/animations": "~10.2.0",
"@angular/common": "~10.2.0",
"@angular/compiler": "~10.2.0",
"@angular/core": "~10.2.0",
"@angular/forms": "~10.2.0",
"@angular/platform-browser": "~10.2.0",
"@angular/platform-browser-dynamic": "~10.2.0",
"@angular/platform-server": "~10.2.0",
"@angular/router": "~10.2.0",
"@nguniversal/express-engine": "^10.0.1",
"express": "^4.15.2",
"rxjs": "~6.6.0",
"tslib": "^2.0.0",
"zone.js": "~0.11.0"
"@angular/animations": "^15.1.2",
"@angular/common": "^15.1.2",
"@angular/compiler": "^15.1.2",
"@angular/core": "^15.1.2",
"@angular/forms": "^15.1.2",
"@angular/platform-browser": "^15.1.2",
"@angular/platform-browser-dynamic": "^15.1.2",
"@angular/platform-server": "^15.1.2",
"@angular/router": "^15.1.2",
"@nguniversal/express-engine": "^15.1.0",
"express": "^4.17.3",
"rxjs": "^7.8.0",
"tslib": "^2.5.0",
"zone.js": "~0.12.0"
},
"devDependencies": {
"@angular-devkit/build-angular": "0.1102.19",
"@angular/cli": "10.2.4",
"@angular/compiler-cli": "10.2.5",
"@ngtools/webpack": "file:../patched_packages/_ngtools_webpack.tgz",
"@nguniversal/builders": "9.1.1",
"@angular-devkit/build-angular": "15.1.4",
"@angular/cli": "15.1.4",
"@angular/compiler-cli": "15.1.2",
"@ngtools/webpack": "15.1.4",
"@nguniversal/builders": "15.1.0",
"clean-webpack-plugin": "4.0.0",
"html-webpack-plugin": "5.5.0",
"raw-loader": "4.0.2",
"sass-loader": "12.6.0",
"ts-node": "9.1.1",
"tslint": "6.1.3",
"typescript": "4.0.8",
"webpack": "5.72.1",
"webpack-cli": "4.10.0"
"sass-loader": "13.2.0",
"ts-node": "10.9.1",
"tslint": "^6.1.3",
"typescript": "4.9.5",
"webpack": "5.75.0",
"webpack-cli": "5.0.1"
}
}
4 changes: 3 additions & 1 deletion angular-universal-ssr/host-app/server-bootstrap.ts
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import 'zone.js/dist/zone-node';
import 'zone.js/node';
import "@angular/compiler";

import { ngExpressEngine } from '@nguniversal/express-engine';
import * as express from 'express';
import { join } from 'path';

import { AppServerModule } from './src/main.server';
import { APP_BASE_HREF } from '@angular/common';
import "@angular/compiler";
import { existsSync } from 'fs';

// The Express app is exported so that it can be used by serverless Functions.
4 changes: 2 additions & 2 deletions angular-universal-ssr/host-app/src/app/app-routing.module.ts
Original file line number Diff line number Diff line change
@@ -23,8 +23,8 @@ const routes: Routes = [
@NgModule({
imports: [
RouterModule.forRoot(routes, {
initialNavigation: 'enabled',
}),
initialNavigation: 'enabledNonBlocking'
})
],
exports: [RouterModule],
})
Original file line number Diff line number Diff line change
@@ -13,4 +13,4 @@ export const environment = {
* This import should be commented out in production mode because it will have a negative impact
* on performance if an error is thrown.
*/
// import 'zone.js/dist/zone-error'; // Included with Angular CLI.
// import 'zone.js/plugins/zone-error'; // Included with Angular CLI.
2 changes: 1 addition & 1 deletion angular-universal-ssr/host-app/src/index.html
Original file line number Diff line number Diff line change
@@ -9,6 +9,6 @@
</head>
<body>
<app-root></app-root>
<script src="http://localhost:5000/remoteEntry.js"></script>
<script src="http://localhost:3000/remoteEntry.js"></script>
</body>
</html>
2 changes: 1 addition & 1 deletion angular-universal-ssr/host-app/src/main.server.ts
Original file line number Diff line number Diff line change
@@ -7,4 +7,4 @@ if (environment.production) {
}

export { AppServerModule } from './app/app.server.module';
export { renderModule, renderModuleFactory } from '@angular/platform-server';
export { renderModuleFactory } from '@angular/platform-server';
12 changes: 1 addition & 11 deletions angular-universal-ssr/host-app/src/polyfills.ts
Original file line number Diff line number Diff line change
@@ -18,16 +18,6 @@
* BROWSER POLYFILLS
*/

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run `npm install --save classlist.js`.

/**
* Web Animations `@angular/platform-browser/animations`
* Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
* Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
*/
// import 'web-animations-js'; // Run `npm install --save web-animations-js`.

/**
* By default, zone.js will patch all possible macroTask and DomEvents
* user can disable parts of macroTask/DomEvents patch by setting following flags
@@ -55,7 +45,7 @@
/***************************************************************************************************
* Zone JS is required by default for Angular itself.
*/
import 'zone.js/dist/zone'; // Included with Angular CLI.
import 'zone.js'; // Included with Angular CLI.

/***************************************************************************************************
* APPLICATION IMPORTS
10 changes: 8 additions & 2 deletions angular-universal-ssr/host-app/tsconfig.app.json
Original file line number Diff line number Diff line change
@@ -1,9 +1,15 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"extends": "./tsconfig.base.json",
"compilerOptions": {
"outDir": "./out-tsc/app",
"types": []
},
"files": ["src/main.ts", "src/polyfills.ts"],
"include": ["src/**/*.d.ts"]
"files": [
"src/main.ts",
"src/polyfills.ts"
],
"include": [
"src/**/*.d.ts"
]
}
12 changes: 6 additions & 6 deletions angular-universal-ssr/host-app/tsconfig.base.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"compileOnSave": false,
"compilerOptions": {
@@ -7,14 +8,13 @@
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"module": "es2020",
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"lib": ["es2018", "dom"]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
"module": "es2020",
"lib": [
"es2018",
"dom"
]
}
}
42 changes: 27 additions & 15 deletions angular-universal-ssr/host-app/tsconfig.json
Original file line number Diff line number Diff line change
@@ -1,17 +1,29 @@
/*
This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s language server to improve development experience.
It is not intended to be used to perform a compilation.
To learn more about this file see: https://angular.io/config/solution-tsconfig.
*/
/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
"files": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.server.json"
}
]
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"outDir": "./dist/out-tsc",
"forceConsistentCasingInFileNames": true,
"strict": false,
"strictPropertyInitialization": false,
"noImplicitReturns": true,
"noFallthroughCasesInSwitch": true,
"sourceMap": true,
"declaration": false,
"downlevelIteration": true,
"experimentalDecorators": true,
"moduleResolution": "node",
"importHelpers": true,
"target": "es2015",
"module": "es2020",
"lib": [
"es2018",
"dom"
]
},
"angularCompilerOptions": {
"strictInjectionParameters": true,
"strictTemplates": true
}
}
5 changes: 3 additions & 2 deletions angular-universal-ssr/host-app/tsconfig.server.json
Original file line number Diff line number Diff line change
@@ -3,8 +3,9 @@
"compilerOptions": {
"outDir": "./out-tsc/app-server",
"allowJs": true,
"types": ["node"],
"target": "es2016"
"types": [
"node"
]
},
"files": ["src/main.server.ts", "server-bootstrap.ts"],
"angularCompilerOptions": {
8 changes: 6 additions & 2 deletions angular-universal-ssr/host-app/webpack/host-app.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const { resolve } = require('path');
const { AngularCompilerPlugin } = require('@ngtools/webpack');
const { AngularWebpackPlugin } = require('@ngtools/webpack');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
@@ -10,6 +10,9 @@ module.exports = (env = {}) => {
return {
entry: ['./src/polyfills.ts', './src/main.ts'],
mode: 'production',
resolve: {
extensions: ['.ts', '.js'],
},
output: {
path: resolve(__dirname, buildFolder),
},
@@ -37,9 +40,10 @@ module.exports = (env = {}) => {
],
}),

new AngularCompilerPlugin({
new AngularWebpackPlugin({
tsConfigPath: './tsconfig.app.json',
entryModule: './src/app/app.module#AppModule',
jitMode: true,
skipCodeGeneration: true,
directTemplateLoading: false,
}),
8 changes: 5 additions & 3 deletions angular-universal-ssr/host-app/webpack/host-ssr.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
const { resolve } = require('path');
const { AngularCompilerPlugin, PLATFORM } = require('@ngtools/webpack');
const { AngularWebpackPlugin } = require('@ngtools/webpack');
const { ContextReplacementPlugin } = require('webpack');
const ProgressPlugin = require('webpack/lib/ProgressPlugin');
const ModuleFederationPlugin = require('webpack').container.ModuleFederationPlugin;
@@ -12,6 +12,7 @@ module.exports = (env = {}) => {
mode: 'production',
resolve: {
mainFields: ['es2015', 'module', 'main'],
extensions: ['.ts', '.js'],
},
output: {
filename: '[name].js',
@@ -41,10 +42,11 @@ module.exports = (env = {}) => {

new ContextReplacementPlugin(/@?hapi(\\|\/)/),
new ContextReplacementPlugin(/express(\\|\/)/),
new AngularCompilerPlugin({
new AngularWebpackPlugin({
entryModule: resolve(__dirname, '../src/app/app.server.module#AppServerModule'),
tsConfigPath: './tsconfig.server.json',
platform: PLATFORM.Server,
platform: 1,
jitMode: true,
skipCodeGeneration: true,
directTemplateLoading: false,
}),
7,175 changes: 7,175 additions & 0 deletions angular-universal-ssr/host-app/yarn.lock

Large diffs are not rendered by default.

14 changes: 11 additions & 3 deletions angular-universal-ssr/package.json
Original file line number Diff line number Diff line change
@@ -6,14 +6,22 @@
"./host-app"
],
"version": "0.0.0",
"type": "commonjs",
"scripts": {
"start": "yarn build && yarn serve",
"start": "yarn build:shell && yarn build:client && yarn start:shell & yarn start:client",
"build:shell": "npm --prefix ./host-app run build:federation",
"start:shell": "npm --prefix ./host-app run serve:federation",
"build:client": "npm --prefix ./client-app run build:federation",
"start:client": "npm --prefix ./client-app run serve:federation",
"build": "lerna run --scope=angular-universal-ssr_* build:federation",
"serve": "lerna run --scope=angular-universal-ssr_* --parallel serve:federation",
"clean": "lerna run --scope=angular-universal-ssr_* --parallel clean",
"e2e:ci": "yarn build && yarn serve & wait-on http://localhost:4000 && npx cypress run --config-file ../cypress/config/cypress.config.ts --config '{\"supportFile\": \"../cypress/support/e2e.ts\"}' --spec \"./e2e/tests/runAll.cy.ts\" --browser=chrome"
"e2e:test": "npx cypress run --config-file ../cypress/config/cypress.config.ts --config '{\"supportFile\": \"../cypress/support/e2e.ts\"}' --spec \"./e2e/tests/runAll.cy.ts\" --browser=chrome",
"e2e:ci": "node e2e.ci.js"
},
"devDependencies": {
"lerna": "3.22.1"
"lerna": "6.4.1",
"wait-on": "^7.0.1",
"concurrently": "^7.6.0"
}
}
Binary file not shown.
10,026 changes: 10,026 additions & 0 deletions angular-universal-ssr/yarn.lock

Large diffs are not rendered by default.