fix(@schematics/angular): add links to generated tsconfig files

We now add a link to generated tsconfig.json to make is easier for users to find relevant information.

packages/schematics/angular/application/files/tsconfig.app.json.template

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "<%= relativePathToWorkspaceRoot %>/tsconfig.base.json",
   "compilerOptions": {

packages/schematics/angular/application/files/tsconfig.spec.json.template

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "<%= relativePathToWorkspaceRoot %>/tsconfig.base.json",
   "compilerOptions": {

packages/schematics/angular/application/index_spec.ts

@@ -13,6 +13,11 @@ import { getFileContent } from '../utility/test';
 import { Schema as WorkspaceOptions } from '../workspace/schema';
 import { Schema as ApplicationOptions, Style, ViewEncapsulation } from './schema';
 
+// tslint:disable-next-line: no-any
+function readJsonFile(tree: UnitTestTree, path: string): any {
+  return parseJson(tree.readContent(path).toString(), JsonParseMode.Loose);
+}
+
 describe('Application Schematic', () => {
   const schematicRunner = new SchematicTestRunner(
     '@schematics/angular',
@@ -79,8 +84,7 @@ describe('Application Schematic', () => {
     const tree = await schematicRunner.runSchematicAsync('application', defaultOptions, workspaceTree)
       .toPromise();
 
-    // tslint:disable-next-line:no-any
+    const { references } = readJsonFile(tree, '/tsconfig.json');
-    const { references } = parseJson(tree.readContent('/tsconfig.json').toString(), JsonParseMode.Loose) as any;
     expect(references).toEqual([
       { path: './projects/foo/tsconfig.app.json' },
       { path: './projects/foo/tsconfig.spec.json' },
@@ -147,17 +151,20 @@ describe('Application Schematic', () => {
     expect(content).toContain(`import { enableProdMode, ViewEncapsulation } from '@angular/core'`);
   });
 
-  it('should set the right paths in the tsconfig files', async () => {
+  it('should set the right paths in the tsconfig.app.json', async () => {
     const tree = await schematicRunner.runSchematicAsync('application', defaultOptions, workspaceTree)
       .toPromise();
-    let path = '/projects/foo/tsconfig.app.json';
+    const { files, extends: _extends } = readJsonFile(tree, '/projects/foo/tsconfig.app.json');
-    let content = tree.readContent(path);
+    expect(files).toEqual(['src/main.ts', 'src/polyfills.ts']);
-    expect(content).toMatch('../../tsconfig.base.json');
+    expect(_extends).toBe('../../tsconfig.base.json');
-    path = '/projects/foo/tsconfig.spec.json';
+  });
-    content = tree.readContent(path);
+
-    expect(content).toMatch('../../tsconfig.base.json');
+  it('should set the right paths in the tsconfig.spec.json', async () => {
-    const specTsConfig = JSON.parse(content);
+    const tree = await schematicRunner.runSchematicAsync('application', defaultOptions, workspaceTree)
-    expect(specTsConfig.files).toEqual(['src/test.ts', 'src/polyfills.ts']);
+      .toPromise();
+    const { files, extends: _extends } = readJsonFile(tree, '/projects/foo/tsconfig.spec.json');
+    expect(files).toEqual(['src/test.ts', 'src/polyfills.ts']);
+    expect(_extends).toBe('../../tsconfig.base.json');
   });
 
   it('should set the right path and prefix in the tslint file', async () => {
@@ -384,9 +391,9 @@ describe('Application Schematic', () => {
       const options = { ...defaultOptions, projectRoot: '' };
       const tree = await schematicRunner.runSchematicAsync('application', options, workspaceTree)
         .toPromise();
-      const appTsConfig = JSON.parse(tree.readContent('/tsconfig.app.json'));
+      const appTsConfig = readJsonFile(tree, '/tsconfig.app.json');
       expect(appTsConfig.extends).toEqual('./tsconfig.base.json');
-      const specTsConfig = JSON.parse(tree.readContent('/tsconfig.spec.json'));
+      const specTsConfig = readJsonFile(tree, '/tsconfig.spec.json');
       expect(specTsConfig.extends).toEqual('./tsconfig.base.json');
       expect(specTsConfig.files).toEqual(['src/test.ts', 'src/polyfills.ts']);
     });
@@ -427,9 +434,9 @@ describe('Application Schematic', () => {
       expect(buildOpt.polyfills).toEqual('foo/src/polyfills.ts');
       expect(buildOpt.tsConfig).toEqual('foo/tsconfig.app.json');
 
-      const appTsConfig = JSON.parse(tree.readContent('/foo/tsconfig.app.json'));
+      const appTsConfig = readJsonFile(tree, '/foo/tsconfig.app.json');
       expect(appTsConfig.extends).toEqual('../tsconfig.base.json');
-      const specTsConfig = JSON.parse(tree.readContent('/foo/tsconfig.spec.json'));
+      const specTsConfig = readJsonFile(tree, '/foo/tsconfig.spec.json');
       expect(specTsConfig.extends).toEqual('../tsconfig.base.json');
     });
   });

packages/schematics/angular/e2e/files/tsconfig.json.template

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "<%= relativePathToWorkspaceRoot %>/tsconfig.base.json",
   "compilerOptions": {

packages/schematics/angular/library/files/tsconfig.lib.json.template

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "<%= relativePathToWorkspaceRoot %>/tsconfig.base.json",
   "compilerOptions": {

packages/schematics/angular/library/files/tsconfig.lib.prod.json.template

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./tsconfig.lib.json",
   "compilerOptions": {

packages/schematics/angular/library/files/tsconfig.spec.json.template

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "<%= relativePathToWorkspaceRoot %>/tsconfig.base.json",
   "compilerOptions": {

packages/schematics/angular/library/index_spec.ts

@@ -14,8 +14,9 @@ import { latestVersions } from '../utility/latest-versions';
 import { Schema as WorkspaceOptions } from '../workspace/schema';
 import { Schema as GenerateLibrarySchema } from './schema';
 
-function getJsonFileContent(tree: UnitTestTree, path: string) {
+// tslint:disable-next-line: no-any
-  return JSON.parse(tree.readContent(path));
+function getJsonFileContent(tree: UnitTestTree, path: string): any {
+  return parseJson(tree.readContent(path).toString(), JsonParseMode.Loose);
 }
 
 describe('Library Schematic', () => {
@@ -264,13 +265,13 @@ describe('Library Schematic', () => {
     const pkgJson = JSON.parse(tree.readContent(pkgJsonPath));
     expect(pkgJson.name).toEqual(scopedName);
 
-    const tsConfigJson = JSON.parse(tree.readContent('/projects/myscope/mylib/tsconfig.spec.json'));
+    const tsConfigJson = getJsonFileContent(tree, '/projects/myscope/mylib/tsconfig.spec.json');
     expect(tsConfigJson.extends).toEqual('../../../tsconfig.base.json');
 
     const cfg = JSON.parse(tree.readContent('/angular.json'));
     expect(cfg.projects['@myscope/mylib']).toBeDefined();
 
-    const rootTsCfg = JSON.parse(tree.readContent('/tsconfig.base.json'));
+    const rootTsCfg = getJsonFileContent(tree, '/tsconfig.base.json');
     expect(rootTsCfg.compilerOptions.paths['@myscope/mylib']).toEqual(['dist/myscope/mylib/myscope-mylib', 'dist/myscope/mylib']);
 
     const karmaConf = getFileContent(tree, '/projects/myscope/mylib/karma.conf.js');
@@ -307,16 +308,16 @@ describe('Library Schematic', () => {
     const workspaceTree = await schematicRunner.runSchematicAsync('workspace', { ...workspaceOptions, newProjectRoot: '' }).toPromise();
     const tree = await schematicRunner.runSchematicAsync('library', defaultOptions, workspaceTree)
       .toPromise();
-    const config = JSON.parse(tree.readContent('/angular.json'));
+    const config = getJsonFileContent(tree, '/angular.json');
     const project = config.projects.foo;
     expect(project.root).toEqual('foo');
     const buildOpt = project.architect.build.options;
     expect(buildOpt.project).toEqual('foo/ng-package.json');
     expect(buildOpt.tsConfig).toEqual('foo/tsconfig.lib.json');
 
-    const appTsConfig = JSON.parse(tree.readContent('/foo/tsconfig.lib.json'));
+    const appTsConfig = getJsonFileContent(tree, '/foo/tsconfig.lib.json');
     expect(appTsConfig.extends).toEqual('../tsconfig.base.json');
-    const specTsConfig = JSON.parse(tree.readContent('/foo/tsconfig.spec.json'));
+    const specTsConfig = getJsonFileContent(tree, '/foo/tsconfig.spec.json');
     expect(specTsConfig.extends).toEqual('../tsconfig.base.json');
   });
 
@@ -333,7 +334,7 @@ describe('Library Schematic', () => {
       .toPromise();
 
     // tslint:disable-next-line:no-any
-    const { references } = parseJson(tree.readContent('/tsconfig.json').toString(), JsonParseMode.Loose) as any;
+    const { references } = getJsonFileContent(tree, '/tsconfig.json');
     expect(references).toEqual([
       { path: './projects/foo/tsconfig.lib.json' },
       { path: './projects/foo/tsconfig.spec.json' },

packages/schematics/angular/migrations/update-10/solution-style-tsconfig.ts

@@ -10,9 +10,13 @@ import { DirEntry, Rule, chain } from '@angular-devkit/schematics';
 import { findPropertyInAstObject } from '../../utility/json-utils';
 import { getWorkspace } from '../../utility/workspace';
 
-const SOLUTIONS_TS_CONFIG_HEADER = '// This is a "Solution Style" tsconfig.json file, and is used by editors and TypeScript’s' +
+const SOLUTIONS_TS_CONFIG_HEADER = `/*
-  'language server to improve development experience.\n' +
+  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.\n';
+  It is not intended to be used to perform a compilation.
+
+  To learn more about this file see: https://angular.io/config/solution-tsconfig.
+*/
+`;
 
 function* visitExtendedJsonFiles(directory: DirEntry): IterableIterator<[string, JsonAstString]> {
   for (const path of directory.subfiles) {

packages/schematics/angular/migrations/update-9/update-app-tsconfigs_spec.ts

@@ -6,11 +6,16 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import { JsonParseMode, JsonValue, parseJson } from '@angular-devkit/core';
 import { EmptyTree } from '@angular-devkit/schematics';
 import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
 import { getWorkspaceTargets, updateWorkspaceTargets } from './update-workspace-config_spec';
 
 // tslint:disable-next-line: no-any
+function readJsonFile(tree: UnitTestTree, path: string): any {
+  return parseJson(tree.readContent(path).toString(), JsonParseMode.Loose);
+}
+
 function overrideJsonFile(tree: UnitTestTree, path: string, newContent: object) {
   tree.overwrite(path, JSON.stringify(newContent, undefined, 2));
 }
@@ -63,7 +68,7 @@ describe('Migration to version 9', () => {
     it('should update apps tsConfig with stricter files inclusions', async () => {
       overrideJsonFile(tree, 'tsconfig.app.json', defaultTsConfigOptions);
       const tree2 = await schematicRunner.runSchematicAsync('workspace-version-9', {}, tree.branch()).toPromise();
-      const { exclude, files, include } = JSON.parse(tree2.readContent('tsconfig.app.json'));
+      const { exclude, files, include } = readJsonFile(tree2 , 'tsconfig.app.json');
       expect(exclude).toBeUndefined();
       expect(files).toEqual(['src/main.ts', 'src/polyfills.ts']);
       expect(include).toEqual(['src/**/*.d.ts']);
@@ -90,7 +95,7 @@ describe('Migration to version 9', () => {
       updateWorkspaceTargets(tree2, config, 'another-app');
 
       const tree3 = await schematicRunner.runSchematicAsync('workspace-version-9', {}, tree2.branch()).toPromise();
-      const { exclude, files } = JSON.parse(tree3.readContent(tsCfgPath));
+      const { exclude, files } = readJsonFile(tree3, tsCfgPath);
       expect(exclude).toBeUndefined();
       expect(files).toEqual(['src/main.ts', 'src/polyfills.ts']);
     });
@@ -104,7 +109,7 @@ describe('Migration to version 9', () => {
       overrideJsonFile(tree, 'tsconfig.app.json', tsConfigContent);
 
       const tree2 = await schematicRunner.runSchematicAsync('workspace-version-9', {}, tree.branch()).toPromise();
-      const { files, include } = JSON.parse(tree2.readContent('tsconfig.app.json'));
+      const { files, include } = readJsonFile(tree2, 'tsconfig.app.json');
       expect(files).toEqual(['src/main.ts', 'src/polyfills.ts']);
       expect(include).toEqual(['foo.ts']);
     });
@@ -119,7 +124,7 @@ describe('Migration to version 9', () => {
       overrideJsonFile(tree, 'tsconfig.app.json', tsConfigContent);
 
       const tree2 = await schematicRunner.runSchematicAsync('workspace-version-9', {}, tree.branch()).toPromise();
-      const { files, include, exclude } = JSON.parse(tree2.readContent('tsconfig.app.json'));
+      const { files, include, exclude } = readJsonFile(tree2, 'tsconfig.app.json');
       expect(files).toEqual(['src/main.ts', 'src/polyfills.ts']);
       expect(include).toEqual(['src/**/*.d.ts']);
       expect(exclude).toBeUndefined();
@@ -134,7 +139,7 @@ describe('Migration to version 9', () => {
       overrideJsonFile(tree, 'tsconfig.app.json', tsConfigContent);
 
       const tree2 = await schematicRunner.runSchematicAsync('workspace-version-9', {}, tree.branch()).toPromise();
-      const { files, include, exclude } = JSON.parse(tree2.readContent('tsconfig.app.json'));
+      const { files, include, exclude } = readJsonFile(tree2, 'tsconfig.app.json');
       expect(files).toEqual(['src/main.ts', 'src/polyfills.ts']);
       expect(include).toEqual(['foo.ts', 'src/**/*.d.ts']);
       expect(exclude).toBeUndefined();
@@ -143,7 +148,7 @@ describe('Migration to version 9', () => {
     it(`should remove angularCompilerOptions when enableIvy is true and it's the only option`, async () => {
       overrideJsonFile(tree, 'tsconfig.app.json', defaultTsConfigOptions);
       const tree2 = await schematicRunner.runSchematicAsync('workspace-version-9', {}, tree.branch()).toPromise();
-      const { angularCompilerOptions } = JSON.parse(tree2.readContent('tsconfig.app.json'));
+      const { angularCompilerOptions } = readJsonFile(tree2, 'tsconfig.app.json');
       expect(angularCompilerOptions).toBeUndefined();
     });
 
@@ -158,7 +163,7 @@ describe('Migration to version 9', () => {
 
       overrideJsonFile(tree, 'tsconfig.app.json', tsConfigContent);
       const tree2 = await schematicRunner.runSchematicAsync('workspace-version-9', {}, tree.branch()).toPromise();
-      const { angularCompilerOptions } = JSON.parse(tree2.readContent('tsconfig.app.json'));
+      const { angularCompilerOptions } = readJsonFile(tree2, 'tsconfig.app.json');
       expect(angularCompilerOptions.enableIvy).toBeUndefined();
       expect(angularCompilerOptions.fullTemplateTypeCheck).toBe(true);
     });
@@ -174,7 +179,7 @@ describe('Migration to version 9', () => {
 
       overrideJsonFile(tree, 'tsconfig.app.json', tsConfigContent);
       const tree2 = await schematicRunner.runSchematicAsync('workspace-version-9', {}, tree.branch()).toPromise();
-      const { angularCompilerOptions } = JSON.parse(tree2.readContent('tsconfig.app.json'));
+      const { angularCompilerOptions } = readJsonFile(tree2, 'tsconfig.app.json');
       expect(angularCompilerOptions.enableIvy).toBe(false);
       expect(angularCompilerOptions.fullTemplateTypeCheck).toBe(true);
     });
@@ -190,10 +195,10 @@ describe('Migration to version 9', () => {
 
       overrideJsonFile(tree, 'tsconfig.app.json', tsConfigContent);
       const tree2 = await schematicRunner.runSchematicAsync('workspace-version-9', {}, tree.branch()).toPromise();
-      const { compilerOptions } = JSON.parse(tree2.readContent('tsconfig.app.json'));
+      const { compilerOptions } = readJsonFile(tree2, 'tsconfig.app.json');
       expect(compilerOptions.module).toBeUndefined();
 
-      const { compilerOptions: workspaceCompilerOptions } = JSON.parse(tree2.readContent('tsconfig.json'));
+      const { compilerOptions: workspaceCompilerOptions } = readJsonFile(tree2, 'tsconfig.json');
       expect(workspaceCompilerOptions.module).toBe('esnext');
     });
 
@@ -209,7 +214,7 @@ describe('Migration to version 9', () => {
 
       overrideJsonFile(tree, 'tsconfig.app.json', tsConfigContent);
       const tree2 = await schematicRunner.runSchematicAsync('workspace-version-9', {}, tree.branch()).toPromise();
-      const { compilerOptions } = JSON.parse(tree2.readContent('tsconfig.app.json'));
+      const { compilerOptions } = readJsonFile(tree2, 'tsconfig.app.json');
       expect(compilerOptions.module).toBe('esnext');
     });
 
@@ -238,7 +243,7 @@ describe('Migration to version 9', () => {
 
       overrideJsonFile(tree, 'tsconfig.server.json', tsConfigContent);
       const tree2 = await schematicRunner.runSchematicAsync('workspace-version-9', {}, tree.branch()).toPromise();
-      const { compilerOptions } = JSON.parse(tree2.readContent('tsconfig.server.json'));
+      const { compilerOptions } = readJsonFile(tree2, 'tsconfig.server.json');
       expect(compilerOptions.module).toBe('commonjs');
     });
 
@@ -250,7 +255,7 @@ describe('Migration to version 9', () => {
 
       overrideJsonFile(tree, 'tsconfig.json', tsConfigContent);
       const tree2 = await schematicRunner.runSchematicAsync('workspace-version-9', {}, tree.branch()).toPromise();
-      const { compilerOptions } = JSON.parse(tree2.readContent('tsconfig.json'));
+      const { compilerOptions } = readJsonFile(tree2, 'tsconfig.json');
       expect(compilerOptions.module).toBe('esnext');
     });
   });

packages/schematics/angular/universal/files/root/tsconfig.server.json.template

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "./<%= tsConfigExtends %>",
   "compilerOptions": {

packages/schematics/angular/universal/index_spec.ts

@@ -87,8 +87,9 @@ describe('Universal Schematic', () => {
       .toPromise();
     const filePath = '/tsconfig.server.json';
     expect(tree.exists(filePath)).toEqual(true);
-    const contents = tree.readContent(filePath);
+    // tslint:disable-next-line: no-any
-    expect(JSON.parse(contents)).toEqual({
+    const contents = parseJson(tree.readContent(filePath).toString(), JsonParseMode.Loose) as any;
+    expect(contents).toEqual({
       extends: './tsconfig.app.json',
       compilerOptions: {
         outDir: './out-tsc/server',
@@ -112,8 +113,9 @@ describe('Universal Schematic', () => {
       .toPromise();
     const filePath = '/projects/bar/tsconfig.server.json';
     expect(tree.exists(filePath)).toEqual(true);
-    const contents = tree.readContent(filePath);
+    // tslint:disable-next-line: no-any
-    expect(JSON.parse(contents)).toEqual({
+    const contents = parseJson(tree.readContent(filePath).toString(), JsonParseMode.Loose) as any;
+    expect(contents).toEqual({
       extends: './tsconfig.app.json',
       compilerOptions: {
         outDir: '../../out-tsc/server',

packages/schematics/angular/web-worker/files/worker-tsconfig/tsconfig.worker.json.template

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "extends": "<%= relativePathToWorkspaceRoot %>/tsconfig.base.json",
   "compilerOptions": {

packages/schematics/angular/web-worker/index_spec.ts

@@ -59,7 +59,8 @@ describe('Web Worker Schematic', () => {
     const path = '/projects/bar/tsconfig.worker.json';
     expect(tree.exists(path)).toEqual(true);
 
-    const { compilerOptions } = JSON.parse(tree.readContent(path));
+    // tslint:disable-next-line: no-any
+    const { compilerOptions } = parseJson(tree.readContent(path).toString(), JsonParseMode.Loose) as any;
     expect(compilerOptions.outDir).toBe('../../out-tsc/worker');
   });
 
@@ -123,7 +124,8 @@ describe('Web Worker Schematic', () => {
     const path = '/tsconfig.worker.json';
     expect(tree.exists(path)).toEqual(true);
 
-    const { compilerOptions } = JSON.parse(tree.readContent(path));
+    // tslint:disable-next-line: no-any
+    const { compilerOptions } = parseJson(tree.readContent(path).toString(), JsonParseMode.Loose) as any;
     expect(compilerOptions.outDir).toBe('./out-tsc/worker');
   });
 

packages/schematics/angular/workspace/files/tsconfig.base.json.template

@@ -1,3 +1,4 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
   "compileOnSave": false,
   "compilerOptions": {

packages/schematics/angular/workspace/files/tsconfig.json.template

@@ -1,5 +1,9 @@
-// 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.
+  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.
+*/
 {
   "files": [],
   "references": []

packages/schematics/angular/workspace/index_spec.ts

@@ -5,6 +5,7 @@
  * Use of this source code is governed by an MIT-style license that can be
  * found in the LICENSE file at https://angular.io/license
  */
+import { JsonParseMode, parseJson } from '@angular-devkit/core';
 import { SchematicTestRunner } from '@angular-devkit/schematics/testing';
 import { latestVersions } from '../utility/latest-versions';
 import { Schema as WorkspaceOptions } from './schema';
@@ -76,14 +77,18 @@ describe('Workspace Schematic', () => {
 
   it('should not add strict compiler options when false', async () => {
     const tree = await schematicRunner.runSchematicAsync('workspace', { ...defaultOptions, strict: false }).toPromise();
-    const { compilerOptions, angularCompilerOptions } = JSON.parse(tree.readContent('/tsconfig.base.json'));
+    const { compilerOptions, angularCompilerOptions } =
+      // tslint:disable-next-line: no-any
+      parseJson(tree.readContent('tsconfig.base.json').toString(), JsonParseMode.Loose) as any;
     expect(compilerOptions.strict).toBeUndefined();
     expect(angularCompilerOptions).toBeUndefined();
   });
 
   it('should add strict compiler options when true', async () => {
     const tree = await schematicRunner.runSchematicAsync('workspace', { ...defaultOptions, strict: true }).toPromise();
-    const { compilerOptions, angularCompilerOptions } = JSON.parse(tree.readContent('/tsconfig.base.json'));
+    const { compilerOptions, angularCompilerOptions } =
+      // tslint:disable-next-line: no-any
+      parseJson(tree.readContent('tsconfig.base.json').toString(), JsonParseMode.Loose) as any;
     expect(compilerOptions.strict).toBe(true);
     expect(angularCompilerOptions.strictTemplates).toBe(true);
   });