fix(bazel): Add postinstall step to generate summaries (#28850)

This commit adds a postinstall step to the package.json generated by the
schematics to generate ng summary files needed for AOT. Summary files
are not published in npm packages.

PR Close #28850

packages/bazel/src/schematics/bazel-workspace/files/angular-metadata.tsconfig.json.template

@@ -0,0 +1,21 @@
+// Workaround for https://github.com/angular/angular/issues/18810
+// This file is required because when using the Angular NPM packages and building
+// with AOT compilation, NGC needs the "ngsummary.json" files.
+{
+  "compilerOptions": {
+    "lib": [
+      "dom",
+      "es2015"
+    ],
+    "experimentalDecorators": true,
+    "types": []
+  },
+  "include": [
+    "node_modules/@angular/**/*"
+  ],
+  "exclude": [
+    "node_modules/@angular/bazel/**",
+    "node_modules/@angular/compiler-cli/**",
+    "node_modules/@angular/**/testing/**"
+  ]
+}

packages/bazel/src/schematics/ng-add/index.ts

@@ -43,6 +43,7 @@ function addDevDependenciesToPackageJson(options: Schema) {
 
     const devDependencies: {[k: string]: string} = {
       '@angular/bazel': angularCoreVersion,
+      '@angular/upgrade': angularCoreVersion,
       // TODO(kyliau): Consider moving this to latest-versions.ts
       '@bazel/bazel': '^0.22.1',
       '@bazel/ibazel': '^0.9.0',
@@ -298,6 +299,39 @@ function upgradeRxjs() {
   };
 }
 
+/**
+ * When using Angular NPM packages and building with AOT compilation, ngc
+ * requires ngsumamry files but they are not shipped. This function adds a
+ * postinstall step to generate these files.
+ */
+function addPostinstallToGenerateNgSummaries() {
+  return (host: Tree, context: SchematicContext) => {
+    if (!host.exists('angular-metadata.tsconfig.json')) {
+      return;
+    }
+    const packageJson = 'package.json';
+    if (!host.exists(packageJson)) {
+      throw new Error(`Could not find ${packageJson}`);
+    }
+    const content = host.read(packageJson).toString();
+    const jsonAst = parseJsonAst(content) as JsonAstObject;
+    const scripts = findPropertyInAstObject(jsonAst, 'scripts') as JsonAstObject;
+    const recorder = host.beginUpdate(packageJson);
+    if (scripts) {
+      insertPropertyInAstObjectInOrder(
+          recorder, scripts, 'postinstall', 'ngc -p ./angular-metadata.tsconfig.json', 4);
+    } else {
+      insertPropertyInAstObjectInOrder(
+          recorder, jsonAst, 'scripts', {
+            postinstall: 'ngc -p ./angular-metadata.tsconfig.json',
+          },
+          2);
+    }
+    host.commitUpdate(recorder);
+    return host;
+  };
+}
+
 export default function(options: Schema): Rule {
   return (host: Tree) => {
     validateProjectName(options.name);
@@ -306,6 +340,7 @@ export default function(options: Schema): Rule {
       schematic('bazel-workspace', options),
       addDevAndProdMainForAot(options),
       addDevDependenciesToPackageJson(options),
+      addPostinstallToGenerateNgSummaries(),
       backupAngularJson(),
       backupTsconfigJson(),
       updateAngularJsonToUseBazelBuilder(options),

packages/bazel/src/schematics/ng-add/index_spec.ts

@@ -17,7 +17,9 @@ describe('ng-add schematic', () => {
 
   beforeEach(() => {
     host = new UnitTestTree(new HostTree());
-    host.create('package.json', JSON.stringify({
+    host.create(
+        'package.json', JSON.stringify(
+                            {
                               name: 'demo',
                               dependencies: {
                                 '@angular/core': '1.2.3',
@@ -26,15 +28,21 @@ describe('ng-add schematic', () => {
                               devDependencies: {
                                 'typescript': '3.2.2',
                               },
-    }));
-    host.create('tsconfig.json', JSON.stringify({
+                            },
+                            null, 2));
+    host.create(
+        'tsconfig.json', JSON.stringify(
+                             {
                                compileOnSave: false,
                                compilerOptions: {
                                  baseUrl: './',
                                  outDir: './dist/out-tsc',
                                }
-    }));
-    host.create('angular.json', JSON.stringify({
+                             },
+                             null, 2));
+    host.create(
+        'angular.json', JSON.stringify(
+                            {
                               projects: {
                                 'demo': {
                                   architect: {
@@ -55,7 +63,8 @@ describe('ng-add schematic', () => {
                                   },
                                 },
                               },
-    }));
+                            },
+                            null, 2));
     schematicRunner =
         new SchematicTestRunner('@angular/bazel', require.resolve('../collection.json'));
   });
@@ -217,7 +226,9 @@ describe('ng-add schematic', () => {
     ];
     for (const [version, upgrade] of cases) {
       it(`should ${upgrade ? '' : 'not '}upgrade v${version}')`, () => {
-        host.overwrite('package.json', JSON.stringify({
+        host.overwrite(
+            'package.json', JSON.stringify(
+                                {
                                   name: 'demo',
                                   dependencies: {
                                     '@angular/core': '1.2.3',
@@ -226,7 +237,8 @@ describe('ng-add schematic', () => {
                                   devDependencies: {
                                     'typescript': '3.2.2',
                                   },
-        }));
+                                },
+                                null, 2));
         host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
         expect(host.files).toContain('/package.json');
         const content = host.readContent('/package.json');
@@ -239,4 +251,12 @@ describe('ng-add schematic', () => {
       });
     }
   });
+
+  it('should add a postinstall step to package.json', () => {
+    host = schematicRunner.runSchematic('ng-add', defaultOptions, host);
+    expect(host.files).toContain('/package.json');
+    const content = host.readContent('/package.json');
+    const json = JSON.parse(content);
+    expect(json.scripts.postinstall).toBe('ngc -p ./angular-metadata.tsconfig.json');
+  });
 });