feat(@schematics/angular): experimentalIvy should generates backwards compatible solution

Usage:
```
ng new foo --experimentalIvy
```

Users will need to use `ngcc` so to process code coming from NPM and produce the equivalent Ivy version. This needs to be done once after installing the node packages.

```
node_modules/.bin/ivy-ngcc
```

`ngtsc` compilter will then be used when building using the `--aot` or `--prod` flag.

Fixes #13024

Author: Alan Agius

packages/schematics/angular/application/files/src/main.ts

@@ -1,19 +1,12 @@
-<%= experimentalIvy ? '// ' : '' %>import { enableProdMode } from '@angular/core';
-<%= experimentalIvy ? '// ' : '' %>import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-<%= experimentalIvy ? '// ' : '' %>
-<%= experimentalIvy ? '// ' : '' %>import { AppModule } from './app/app.module';
-<%= experimentalIvy ? '// ' : '' %>import { environment } from './environments/environment';
-<%= experimentalIvy ? '// ' : '' %>
-<%= experimentalIvy ? '// ' : '' %>if (environment.production) {
-<%= experimentalIvy ? '// ' : '' %>  enableProdMode();
-<%= experimentalIvy ? '// ' : '' %>}
-<%= experimentalIvy ? '// ' : '' %>
-<%= experimentalIvy ? '// ' : '' %>platformBrowserDynamic().bootstrapModule(AppModule)
-<%= experimentalIvy ? '// ' : '' %>  .catch(err => console.error(err));
-<% if (experimentalIvy) { %>
-import { AppComponent } from './app/app.component';
-import { ɵrenderComponent as renderComponent } from '@angular/core';
+import { enableProdMode } from '@angular/core';
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-renderComponent(AppComponent);
+import { AppModule } from './app/app.module';
+import { environment } from './environments/environment';
 
-<% } %>
+if (environment.production) {
+  enableProdMode();
+}
+
+platformBrowserDynamic().bootstrapModule(AppModule)
+  .catch(err => console.error(err));

packages/schematics/angular/application/index.ts

@@ -5,7 +5,15 @@
  * 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 { JsonObject, join, normalize, relative, strings } from '@angular-devkit/core';
+import {
+  JsonObject,
+  JsonParseMode,
+  join,
+  normalize,
+  parseJsonAst,
+  relative,
+  strings,
+} from '@angular-devkit/core';
 import {
   MergeStrategy,
   Rule,
@@ -30,6 +38,7 @@ import {
   getWorkspace,
 } from '../utility/config';
 import { NodeDependencyType, addPackageJsonDependency } from '../utility/dependencies';
+import { findPropertyInAstObject, insertPropertyInAstObjectInOrder } from '../utility/json-utils';
 import { latestVersions } from '../utility/latest-versions';
 import { applyLintFix } from '../utility/lint-fix';
 import { validateProjectName } from '../utility/validation';
@@ -94,6 +103,40 @@ function addDependenciesToPackageJson(options: ApplicationOptions) {
   };
 }
 
+function addPostInstallScript() {
+  return (host: Tree) => {
+    const pkgJsonPath = '/package.json';
+    const buffer = host.read(pkgJsonPath);
+    if (!buffer) {
+      throw new SchematicsException('Could not read package.json.');
+    }
+
+    const packageJsonAst = parseJsonAst(buffer.toString(), JsonParseMode.Strict);
+    if (packageJsonAst.kind !== 'object') {
+      throw new SchematicsException('Invalid package.json. Was expecting an object.');
+    }
+
+    const scriptsNode = findPropertyInAstObject(packageJsonAst, 'scripts');
+    if (scriptsNode && scriptsNode.kind === 'object') {
+      const recorder = host.beginUpdate(pkgJsonPath);
+      const postInstall = findPropertyInAstObject(scriptsNode, 'postinstall');
+
+      if (!postInstall) {
+        // postinstall script not found, add it.
+        insertPropertyInAstObjectInOrder(
+          recorder,
+          scriptsNode,
+          'postinstall',
+          'ivy-ngcc',
+          4,
+        );
+      }
+
+      host.commitUpdate(recorder);
+    }
+  };
+}
+
 function addAppToWorkspaceFile(options: ApplicationOptions, workspace: WorkspaceSchema): Rule {
   // TODO: use JsonAST
   // const workspacePath = '/angular.json';
@@ -372,6 +415,7 @@ export default function (options: ApplicationOptions): Rule {
           move(sourceDir),
         ]), MergeStrategy.Overwrite),
       options.minimal ? noop() : schematic('e2e', e2eOptions),
+      options.experimentalIvy ? addPostInstallScript() : noop(),
       options.skipPackageJson ? noop() : addDependenciesToPackageJson(options),
       options.lintFix ? applyLintFix(sourceDir) : noop(),
     ]);

packages/schematics/angular/application/index_spec.ts

@@ -190,6 +190,12 @@ describe('Application Schematic', () => {
       expect(pkg.devDependencies['typescript']).toEqual(latestVersions.TypeScript);
     });
 
+    it(`should add a postinstall in package.json when 'experimentalIvy'`, () => {
+      const tree = schematicRunner.runSchematic('application', { ...defaultOptions, experimentalIvy: true }, workspaceTree);
+      const pkg = JSON.parse(tree.readContent('/package.json'));
+      expect(pkg.scripts.postinstall).toEqual('ivy-ngcc');
+    });
+
     it(`should not override existing users dependencies`, () => {
       const oldPackageJson = workspaceTree.readContent('package.json');
       workspaceTree.overwrite('package.json', oldPackageJson.replace(

packages/schematics/angular/application/other-files/app.module.ts

@@ -1,17 +1,17 @@
-<% if (!experimentalIvy) { %>import { BrowserModule } from '@angular/platform-browser';<% } %>
+import { BrowserModule } from '@angular/platform-browser';
 import { NgModule } from '@angular/core';
-<% if (routing && !experimentalIvy) { %>
+<% if (routing) { %>
 import { AppRoutingModule } from './app-routing.module';<% } %>
 import { AppComponent } from './app.component';
 
 @NgModule({
   declarations: [
     AppComponent
   ],
-  imports: [<% if (!experimentalIvy) { %>
+  imports: [
     BrowserModule<% if (routing) { %>,
     AppRoutingModule<% } %>
-  <% } %>],
+  ],
   providers: [],
   bootstrap: [AppComponent]
 })