fix: support the Angular 10 comments in the tsconfig file (fixes #249) (

#260)

.gitignore

@@ -42,3 +42,6 @@ parcel/
 
 dist
 dist-server
+
+# Jetbrains ide
+.idea

integration/portal/package.json

@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "scripts": {
     "start": "webpack-dev-server",
-    "prebuild:prod": "rm -rf dist",
+    "prebuild:prod": "rimraf dist",
     "build:prod": "webpack -p"
   },
   "dependencies": {
@@ -15,6 +15,7 @@
     "typescript": "file:../../node_modules/typescript",
     "webpack": "^4.42.1",
     "webpack-cli": "^3.3.11",
-    "webpack-dev-server": "^3.10.3"
+    "webpack-dev-server": "^3.10.3",
+    "rimraf": "^2.6.2"
   }
 }

integration/portal/yarn.lock

@@ -3259,7 +3259,7 @@ retry@^0.12.0:
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.12.0.tgz#1b42a6266a21f07421d1b0b54b7dc167b01c013b"
   integrity sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs=
 
-rimraf@^2.5.4, rimraf@^2.6.3:
+rimraf@^2.5.4, rimraf@^2.6.2, rimraf@^2.6.3:
   version "2.7.1"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-2.7.1.tgz#35797f13a7fdadc566142c29d4f07ccad483e3ec"
   integrity sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==

schematics/ng-add/index.ts

@@ -29,6 +29,12 @@ 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: {
@@ -158,12 +164,29 @@ function updateProjectNewAngular(
 
 function updateTSConfig(host: Tree, clientProject: WorkspaceProject): void {
   const tsConfigFileName = clientProject.architect!.build!.options.tsConfig;
-  const tsConfig = host.read(tsConfigFileName)!.toString('utf-8');
-  const json = JSON.parse(tsConfig);
-  json.files = ['src/main.single-spa.ts'];
+  const buffer = host.read(tsConfigFileName);
+  if (!buffer) {
+    return;
+  }
+
+  const tsCfgAst = parseJsonAst(buffer.toString(), JsonParseMode.Loose);
+  if (tsCfgAst.kind !== 'object') {
+    return;
+  }
+
+  const files = findPropertyInAstObject(tsCfgAst, 'files');
+  if (files && files.kind !== 'array') {
+    return;
+  }
+
   // The "files" property will only contain path to `main.single-spa.ts` file,
   // because we remove `polyfills` from Webpack `entry` property.
-  host.overwrite(tsConfigFileName, JSON.stringify(json, null, 2));
+  const recorder = host.beginUpdate(tsConfigFileName);
+  if (files) {
+    removePropertyInAstObject(recorder, tsCfgAst, 'files');
+  }
+  insertPropertyInAstObjectInOrder(recorder, tsCfgAst, 'files', ['src/main.single-spa.ts'], 2);
+  host.commitUpdate(recorder);
 }
 
 export function addNPMScripts(options: NgAddOptions): Rule {

schematics/ng-add/tests/index.spec.ts

@@ -3,6 +3,9 @@ import { getFileContent } from '@schematics/angular/utility/test';
 import { join, normalize } from 'path';
 
 import { Schema as NgAddOptions } from '../schema';
+import { JsonParseMode, parseJsonAst } from '@angular-devkit/core';
+import { findPropertyInAstObject } from '@schematics/angular/utility/json-utils';
+import { JsonAstObject } from '@angular-devkit/core/src/json/interface';
 
 const collectionPath = join(__dirname, '../../schematics.json');
 
@@ -22,6 +25,16 @@ const defaultApplicationOptions = {
   style: 'scss',
 };
 
+const angular10Comment = '/* Unexpected comment from Angular */';
+
+// Simulate what angular 10 is doing adding a comment to the tsconfig file
+// https://github.com/single-spa/single-spa-angular/issues/249
+function appendCommentToTsConfig(tree: UnitTestTree) {
+  let content = getFileContent(tree, '/projects/ss-angular-cli-app/tsconfig.app.json');
+  content = angular10Comment + '\n' + content;
+  tree.overwrite('/projects/ss-angular-cli-app/tsconfig.app.json', content);
+}
+
 describe('ng-add', () => {
   let defaultAppTree: UnitTestTree;
   const testRunner = new SchematicTestRunner('single-spa-angular', collectionPath);
@@ -39,6 +52,8 @@ describe('ng-add', () => {
         workspaceTree,
       )
       .toPromise();
+
+    appendCommentToTsConfig(defaultAppTree);
   });
 
   test('should run ng-add', async () => {
@@ -151,10 +166,33 @@ describe('ng-add', () => {
       .runSchematicAsync<NgAddOptions>('ng-add', { routing: true }, defaultAppTree)
       .toPromise();
 
-    const tsConfigAppJSON = JSON.parse(
-      getFileContent(tree, '/projects/ss-angular-cli-app/tsconfig.app.json'),
-    );
-
-    expect(tsConfigAppJSON.files).toEqual(['src/main.single-spa.ts']);
+    const expectedTsConfigPath = normalize('projects/ss-angular-cli-app/tsconfig.app.json');
+    const buffer = defaultAppTree.read(expectedTsConfigPath);
+    if (!buffer) {
+      throw new Error('Failed to read the tsconfig');
+    }
+
+    const tsCfgAst = parseJsonAst(buffer.toString(), JsonParseMode.Loose);
+    if (tsCfgAst.kind != 'object') {
+      throw new Error(`Root content of '${expectedTsConfigPath}' is not an object.`);
+    }
+
+    // We verify that we didn't erased the comment
+    if (tsCfgAst.comments === undefined) {
+      throw new Error(`No comment has been found in the '${expectedTsConfigPath}' file.`);
+    }
+    expect(tsCfgAst.comments).toHaveLength(1);
+    expect(tsCfgAst.comments[0].text).toBe(angular10Comment);
+
+    // We verify the files property
+    const files = findPropertyInAstObject(tsCfgAst, 'files');
+    if (!files) {
+      throw new Error("'files' field of tsconfig should exist.");
+    }
+    if (files.kind !== 'array') {
+      throw new Error("'files' field of tsconfig should be an array.");
+    }
+
+    expect(files.value).toStrictEqual(['src/main.single-spa.ts']);
   });
 });