feat: support Angular 11 (#301)

apps/chat/src/app/app-routing.module.ts

@@ -11,4 +11,4 @@ const routes: Routes = [
   },
 ];
 
-export const AppRoutingModule = RouterModule.forRoot(routes);
+export const AppRoutingModule = RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' });

apps/chat/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "references": [
     {
       "path": "./tsconfig.app.json"

apps/chat/webpack.config.ts

@@ -1,3 +1,3 @@
 import singleSpaAngularWebpack from '../../libs/single-spa-angular/webpack';
 
-export default (config, options) => singleSpaAngularWebpack(config, options);
+export default (config: any, options: any) => singleSpaAngularWebpack(config, options);

apps/elements/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "references": [
     {
       "path": "./tsconfig.app.json"

apps/elements/webpack.config.ts

@@ -1,3 +1,3 @@
 import singleSpaAngularWebpack from '../../libs/single-spa-angular/webpack';
 
-export default (config, options) => singleSpaAngularWebpack(config, options);
+export default (config: any, options: any) => singleSpaAngularWebpack(config, options);

apps/navbar/src/app/app-routing.module.ts

@@ -7,7 +7,7 @@ import { EmptyRouteComponent } from './components/empty-route/empty-route.compon
 const routes: Routes = [{ path: '**', component: EmptyRouteComponent }];
 
 @NgModule({
-  imports: [RouterModule.forRoot(routes)],
+  imports: [RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' })],
   exports: [RouterModule],
   providers: [{ provide: APP_BASE_HREF, useValue: '/' }],
 })

apps/navbar/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "references": [
     {
       "path": "./tsconfig.app.json"

apps/navbar/webpack.config.ts

@@ -1,3 +1,3 @@
 import singleSpaAngularWebpack from '../../libs/single-spa-angular/webpack';
 
-export default (config, options) => singleSpaAngularWebpack(config, options);
+export default (config: any, options: any) => singleSpaAngularWebpack(config, options);

apps/noop-zone/src/app/app-routing.module.ts

@@ -11,4 +11,4 @@ const routes: Routes = [
   },
 ];
 
-export const AppRoutingModule = RouterModule.forRoot(routes);
+export const AppRoutingModule = RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' });

apps/noop-zone/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "references": [
     {
       "path": "./tsconfig.app.json"

apps/noop-zone/webpack.config.ts

@@ -1,3 +1,3 @@
 import singleSpaAngularWebpack from '../../libs/single-spa-angular/webpack';
 
-export default (config, options) => singleSpaAngularWebpack(config, options);
+export default (config: any, options: any) => singleSpaAngularWebpack(config, options);

apps/parcel/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "references": [
     {
       "path": "./tsconfig.app.json"

apps/parcel/webpack.config.ts

@@ -1,6 +1,6 @@
 import singleSpaAngularWebpack from '../../libs/single-spa-angular/webpack';
 
-export default (config, options) => {
+export default (config: any, options: any) => {
   config = singleSpaAngularWebpack(config, options);
   config.externals = [/^single-spa$/];
   return config;

apps/shop/src/app/app-routing.module.ts

@@ -15,4 +15,4 @@ const routes: Routes = [
   },
 ];
 
-export const AppRoutingModule = RouterModule.forRoot(routes);
+export const AppRoutingModule = RouterModule.forRoot(routes, { relativeLinkResolution: 'legacy' });

apps/shop/tsconfig.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "files": [],
   "include": [],
   "references": [

apps/shop/webpack.config.ts

@@ -1,3 +1,3 @@
 import singleSpaAngularWebpack from '../../libs/single-spa-angular/webpack';
 
-export default (config, options) => singleSpaAngularWebpack(config, options);
+export default (config: any, options: any) => singleSpaAngularWebpack(config, options);

libs/single-spa-angular/package.json

@@ -25,7 +25,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@angular/core": ">=9",
-    "single-spa": ">=4.0.0"
+    "single-spa": ">=4.0.0",
+    "json5": "*"
   },
   "ngPackage": {
     "lib": {

libs/single-spa-angular/src/single-spa-angular.ts

@@ -19,6 +19,7 @@ const defaultOptions = {
   domElementGetter: undefined, // only optional if you provide a domElementGetter as a custom prop
   AnimationEngine: undefined,
   updateFunction: () => Promise.resolve(),
+  bootstrappedModule: null,
 };
 
 export function singleSpaAngular<T>(userOptions: SingleSpaAngularOptions<T>): LifeCycles<T> {
@@ -154,7 +155,7 @@ async function mount(options: SingleSpaAngularOptions, props: any): Promise<NgMo
 async function unmount(options: BootstrappedSingleSpaAngularOptions, props: any): Promise<void> {
   if (options.Router) {
     // Workaround for https://github.com/angular/angular/issues/19079
-    const router = options.bootstrappedModule.injector.get(options.Router);
+    const router = options.bootstrappedModule!.injector.get(options.Router);
     router.dispose();
   }
 
@@ -187,15 +188,14 @@ async function unmount(options: BootstrappedSingleSpaAngularOptions, props: any)
     that cannot be imported and is not provided to the dependency injector. So, instead, we get its wrapper class, AnimationEngine, and then
     access its private variable reference to the TransitionAnimationEngine so that we can call flush.
     */
-    const animationEngine = options.bootstrappedModule.injector.get(options.AnimationEngine);
+    const animationEngine = options.bootstrappedModule!.injector.get(options.AnimationEngine);
     animationEngine._transitionEngine.flush();
   }
 
-  options.bootstrappedModule.destroy();
-  delete options.bootstrappedModule;
+  options.bootstrappedModule!.destroy();
+  options.bootstrappedModule = null;
 
-  // This is an issue. Issue has been created and Angular team is working on the fix:
-  // https://github.com/angular/angular/issues/36449
+  // TODO: this is not an issue anymore and should be removed in the future.
   removeApplicationFromDOMIfIvyEnabled(options, props);
 }
 

libs/single-spa-angular/src/types.ts

@@ -15,7 +15,7 @@ export interface SingleSpaAngularOptions<T = {}> extends BaseSingleSpaAngularOpt
 }
 
 export interface BootstrappedSingleSpaAngularOptions extends SingleSpaAngularOptions {
-  bootstrappedModule: NgModuleRef<any>;
+  bootstrappedModule: NgModuleRef<any> | null;
   // All below properties can be optional in case of
   // `SingleSpaAngularOpts.NgZone` is a `noop` string and not an `NgZone` class.
   bootstrappedNgZone?: NgZone;

libs/single-spa-angular/tsconfig.lib.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../tsconfig.base.json",
+  "extends": "../tsconfig.json",
   "compilerOptions": {
     "target": "es2015",
     "module": "es2015",

nx.json

@@ -9,7 +9,7 @@
       "dependencies": "*",
       "devDependencies": "*"
     },
-    "tsconfig.base.json": "*",
+    "tsconfig.json": "*",
     "tslint.json": "*",
     ".eslintrc.json": "*",
     "nx.json": "*"

package.json

@@ -73,26 +73,26 @@
     "cy:run:chrome": "yarn cy:run --browser chrome",
     "cy:run:chromium": "yarn cy:run --browser chromium",
     "// - CI": "CI testing #requires yarn start:all",
-    "test:ci": "jest --runInBand",
+    "test:ci": "jest --runInBand --silent",
     "test:ci:integration": "yarn start-test start:all 8080 cy:run"
   },
   "devDependencies": {
     "@angular-builders/custom-webpack": "^10.0.0",
-    "@angular-devkit/build-angular": "^0.1002.0",
-    "@angular-devkit/core": "^10.2.0",
-    "@angular-devkit/schematics": "^10.2.0",
-    "@angular/animations": "^10.2.1",
-    "@angular/cli": "^10.2.0",
-    "@angular/common": "^10.2.1",
-    "@angular/compiler": "^10.2.1",
-    "@angular/compiler-cli": "^10.2.1",
-    "@angular/core": "^10.2.1",
-    "@angular/elements": "^10.2.1",
-    "@angular/forms": "^10.2.1",
-    "@angular/language-service": "^10.2.1",
-    "@angular/platform-browser": "^10.2.1",
-    "@angular/platform-browser-dynamic": "^10.2.1",
-    "@angular/router": "^10.2.1",
+    "@angular-devkit/build-angular": "^0.1100.1",
+    "@angular-devkit/core": "^11.0.1",
+    "@angular-devkit/schematics": "^11.0.1",
+    "@angular/animations": "^11.0.0",
+    "@angular/cli": "^11.0.1",
+    "@angular/common": "^11.0.0",
+    "@angular/compiler": "^11.0.0",
+    "@angular/compiler-cli": "^11.0.0",
+    "@angular/core": "^11.0.0",
+    "@angular/elements": "^11.0.0",
+    "@angular/forms": "^11.0.0",
+    "@angular/language-service": "^11.0.0",
+    "@angular/platform-browser": "^11.0.0",
+    "@angular/platform-browser-dynamic": "^11.0.0",
+    "@angular/router": "^11.0.0",
     "@commitlint/cli": "^8.3.5",
     "@commitlint/config-conventional": "^8.3.4",
     "@nrwl/angular": "10.3.1",
@@ -116,8 +116,9 @@
     "eslint-plugin-prefer-arrow": "^1.2.0",
     "husky": "^4.2.5",
     "jest": "^26.4.1",
+    "json5": "^2.1.3",
     "lint-staged": "^10.1.3",
-    "ng-packagr": "^10.0.4",
+    "ng-packagr": "^11.0.2",
     "prettier": "^2.0.4",
     "react": "^17.0.1",
     "react-dom": "^17.0.1",
@@ -128,8 +129,8 @@
     "start-server-and-test": "^1.11.0",
     "ts-jest": "^26.2.0",
     "tsickle": "^0.39.1",
-    "tslib": "^2.0.1",
-    "typescript": "3.9.7",
+    "tslib": "^2.0.0",
+    "typescript": "4.0.5",
     "zone.js": "~0.10.3"
   },
   "dependencies": {
@@ -151,6 +152,8 @@
     }
   },
   "lint-staged": {
-    "*.{ts,html,scss,md,yml}": ["prettier --write"]
+    "*.{ts,html,scss,md,yml}": [
+      "prettier --write"
+    ]
   }
 }

schematics/ng-add/index.ts

@@ -21,6 +21,9 @@ import {
 } from '@schematics/angular/utility/workspace-models';
 
 import { normalize, join } from 'path';
+// The JSON5 format supports comments and all Angular projects,
+// starting from version 10, contain comments in `tsconfig` files.
+import * as JSON5 from 'json5';
 
 import { addScripts } from './add-scripts';
 import { Schema as NgAddOptions } from './schema';
@@ -29,12 +32,6 @@ import {
   getSingleSpaAngularDependency,
   getAngularBuildersCustomWebpackDependency,
 } from './dependencies';
-import {
-  findPropertyInAstObject,
-  insertPropertyInAstObjectInOrder,
-  removePropertyInAstObject,
-} from '@schematics/angular/utility/json-utils';
-import { JsonParseMode, parseJsonAst } from '@angular-devkit/core';
 
 interface CustomWebpackBuilderOptions extends BrowserBuilderOptions {
   customWebpackConfig: {
@@ -163,30 +160,23 @@ function updateProjectNewAngular(
 }
 
 function updateTSConfig(host: Tree, clientProject: WorkspaceProject): void {
-  const tsConfigFileName = clientProject.architect!.build!.options.tsConfig;
-  const buffer = host.read(tsConfigFileName);
-  if (!buffer) {
-    return;
-  }
+  const tsConfigPath = clientProject.architect!.build!.options.tsConfig;
+  const buffer: Buffer | null = host.read(tsConfigPath);
 
-  const tsCfgAst = parseJsonAst(buffer.toString(), JsonParseMode.Loose);
-  if (tsCfgAst.kind !== 'object') {
+  if (buffer === null) {
     return;
   }
 
-  const files = findPropertyInAstObject(tsCfgAst, 'files');
-  if (files && files.kind !== 'array') {
+  const tsConfig = JSON5.parse(buffer.toString());
+
+  if (!Array.isArray(tsConfig.files)) {
     return;
   }
 
   // The "files" property will only contain path to `main.single-spa.ts` file,
   // because we remove `polyfills` from Webpack `entry` property.
-  const recorder = host.beginUpdate(tsConfigFileName);
-  if (files) {
-    removePropertyInAstObject(recorder, tsCfgAst, 'files');
-  }
-  insertPropertyInAstObjectInOrder(recorder, tsCfgAst, 'files', ['src/main.single-spa.ts'], 2);
-  host.commitUpdate(recorder);
+  tsConfig.files = ['src/main.single-spa.ts'];
+  host.overwrite(tsConfigPath, JSON5.stringify(tsConfig, null, 2));
 }
 
 export function addNPMScripts(options: NgAddOptions): Rule {

schematics/ng-add/tests/issue-168.spec.ts

@@ -54,8 +54,8 @@ describe('https://github.com/single-spa/single-spa-angular/issues/168', () => {
     // Arrange
     expect(Object.keys(configurations).length).toBe(3);
 
-    for (const configuration of configurations) {
-      expect(configuration.outputHashing).toBe('none');
+    for (let i = 0; i < configurations.length; i++) {
+      expect(configurations[i].outputHashing).toBe('none');
     }
   });
 
@@ -84,8 +84,8 @@ describe('https://github.com/single-spa/single-spa-angular/issues/168', () => {
     // Arrange
     expect(Object.keys(configurations).length).toBe(3);
 
-    for (const configuration of configurations) {
-      expect(configuration.outputHashing).toBe('none');
+    for (let i = 0; i < configurations.length; i++) {
+      expect(configurations[i].outputHashing).toBe('none');
     }
   });
 });

schematics/ng-add/tests/issue-249.spec.ts

@@ -1,7 +1,7 @@
-import { JsonParseMode, parseJsonAst, normalize } from '@angular-devkit/core';
+import { normalize } from '@angular-devkit/core';
 import { UnitTestTree } from '@angular-devkit/schematics/testing';
 import { getFileContent } from '@schematics/angular/utility/test';
-import { findPropertyInAstObject } from '@schematics/angular/utility/json-utils';
+import * as JSON5 from 'json5';
 
 import { Schema as NgAddOptions } from '../schema';
 import { createWorkspace, createTestRunner } from './utils';
@@ -47,32 +47,21 @@ describe('https://github.com/single-spa/single-spa-angular/issues/249', () => {
       .toPromise();
 
     const expectedTsConfigPath = normalize('projects/ss-angular-cli-app/tsconfig.app.json');
-    const buffer = appTree.read(expectedTsConfigPath);
-    if (!buffer) {
+    const buffer: Buffer | null = appTree.read(expectedTsConfigPath);
+    if (buffer === null) {
       throw new Error('Failed to read the tsconfig');
     }
 
-    const tsConfigAst = parseJsonAst(buffer.toString(), JsonParseMode.Loose);
-    if (tsConfigAst.kind != 'object') {
-      throw new Error(`Root content of '${expectedTsConfigPath}' is not an object.`);
-    }
-
-    // We verify that we didn't erased the comment
-    if (tsConfigAst.comments === undefined) {
-      throw new Error(`No comment has been found in the '${expectedTsConfigPath}' file.`);
-    }
-    expect(tsConfigAst.comments).toHaveLength(2);
-    expect(tsConfigAst.comments[0].text).toBe(angular10Comment);
+    const tsConfig = JSON5.parse(buffer.toString());
 
-    // We verify the files property
-    const files = findPropertyInAstObject(tsConfigAst, 'files');
-    if (!files) {
+    if (!tsConfig.files) {
       throw new Error("'files' field of tsconfig should exist.");
     }
-    if (files.kind !== 'array') {
+
+    if (!Array.isArray(tsConfig.files)) {
       throw new Error("'files' field of tsconfig should be an array.");
     }
 
-    expect(files.value).toStrictEqual(['src/main.single-spa.ts']);
+    expect(tsConfig.files).toStrictEqual(['src/main.single-spa.ts']);
   });
 });

tsconfig.schematics.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./tsconfig.base.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./lib/schematics/ng-add",
     "target": "ES2015",

tsconfig.webpack.json

@@ -1,5 +1,5 @@
 {
-  "extends": "./tsconfig.base.json",
+  "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./lib/lib/webpack",
     "target": "ES2015",