feat(@schematics/angular): add a --experimental-ivy flag to ng-new

hansl · hansl · commit 3886aab55b58 · 2018-08-09T19:37:53.000-04:00
This will create a new Ivy-enabled application. Also available in "ng g application".
diff --git a/packages/schematics/angular/application/files/root/tsconfig.app.json b/packages/schematics/angular/application/files/root/tsconfig.app.json
@@ -7,5 +7,8 @@
   "exclude": [
     "src/test.ts",
     "**/*.spec.ts"
-  ]
+  ]<% if (experimentalIvy) { %>,
+  "angularCompilerOptions": {
+    "enableIvy": "ngtsc"
+  }<% } %>
 }
diff --git a/packages/schematics/angular/application/files/src/main.ts b/packages/schematics/angular/application/files/src/main.ts
@@ -1,12 +1,18 @@
-import { enableProdMode } from '@angular/core';
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+<%= 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.log(err));
+<% if (experimentalIvy) { %>
+import { AppComponent } from './app/app.component';
+import { ɵrenderComponent as renderComponent } from '@angular/core';
 
-import { AppModule } from './app/app.module';
-import { environment } from './environments/environment';
-
-if (environment.production) {
-  enableProdMode();
-}
-
-platformBrowserDynamic().bootstrapModule(AppModule)
-  .catch(err => console.log(err));
+renderComponent(AppComponent);
+<% } %>
diff --git a/packages/schematics/angular/application/other-files/app.module.ts b/packages/schematics/angular/application/other-files/app.module.ts
@@ -8,10 +8,10 @@ import { AppComponent } from './app.component';
   declarations: [
     AppComponent
   ],
-  imports: [
+  imports: [<% if (!experimentalIvy) { %>
     BrowserModule<% if (routing) { %>,
     AppRoutingModule<% } %>
-  ],
+  <% } %>],
   providers: [],
   bootstrap: [AppComponent]
 })
diff --git a/packages/schematics/angular/application/schema.d.ts b/packages/schematics/angular/application/schema.d.ts
@@ -15,6 +15,11 @@ export interface Schema {
      * The name of the application.
      */
     name: string;
+    /**
+     * EXPERIMENTAL: Specifies whether to create a new application which uses the Ivy rendering
+     * engine.
+     */
+    experimentalIvy?: boolean;
     /**
      * Specifies if the style will be in the ts file.
      */
diff --git a/packages/schematics/angular/application/schema.json b/packages/schematics/angular/application/schema.json
@@ -17,6 +17,11 @@
         "index": 0
       }
     },
+    "experimentalIvy": {
+      "description": "EXPERIMENTAL: Specifies whether to create a new application which uses the Ivy rendering engine.",
+      "type": "boolean",
+      "default": false
+    },
     "inlineStyle": {
       "description": "Specifies if the style will be in the ts file.",
       "type": "boolean",
diff --git a/packages/schematics/angular/ng-new/index.ts b/packages/schematics/angular/ng-new/index.ts
@@ -39,11 +39,13 @@ export default function (options: NgNewOptions): Rule {
   const workspaceOptions: WorkspaceOptions = {
     name: options.name,
     version: options.version,
+    experimentalAngularNext: options.experimentalIvy,
     newProjectRoot: options.newProjectRoot || 'projects',
   };
   const applicationOptions: ApplicationOptions = {
     projectRoot: '',
     name: options.name,
+    experimentalIvy: options.experimentalIvy,
     inlineStyle: options.inlineStyle,
     inlineTemplate: options.inlineTemplate,
     prefix: options.prefix,
diff --git a/packages/schematics/angular/ng-new/schema.d.ts b/packages/schematics/angular/ng-new/schema.d.ts
@@ -15,6 +15,11 @@ export interface Schema {
    * The name of the workspace.
    */
   name: string;
+  /**
+   * EXPERIMENTAL: Specifies whether to create a new application which uses the Ivy rendering
+   * engine.
+   */
+  experimentalIvy?: boolean;
   /**
    * Skip installing dependency packages.
    */
diff --git a/packages/schematics/angular/ng-new/schema.json b/packages/schematics/angular/ng-new/schema.json
@@ -17,6 +17,11 @@
         "index": 0
       }
     },
+    "experimentalIvy": {
+      "description": "EXPERIMENTAL: Specifies whether to create a new application which uses the Ivy rendering engine.",
+      "type": "boolean",
+      "default": false
+    },
     "skipInstall": {
       "description": "Skip installing dependency packages.",
       "type": "boolean",
diff --git a/packages/schematics/angular/workspace/files/package.json b/packages/schematics/angular/workspace/files/package.json
@@ -11,23 +11,23 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "<%= latestVersions.Angular %>",
-    "@angular/common": "<%= latestVersions.Angular %>",
-    "@angular/compiler": "<%= latestVersions.Angular %>",
-    "@angular/core": "<%= latestVersions.Angular %>",
-    "@angular/forms": "<%= latestVersions.Angular %>",
-    "@angular/http": "<%= latestVersions.Angular %>",
-    "@angular/platform-browser": "<%= latestVersions.Angular %>",
-    "@angular/platform-browser-dynamic": "<%= latestVersions.Angular %>",
-    "@angular/router": "<%= latestVersions.Angular %>",
+    "@angular/animations": "<%= experimentalAngularNext ? 'next' : latestVersions.Angular %>",
+    "@angular/common": "<%= experimentalAngularNext ? 'next' : latestVersions.Angular %>",
+    "@angular/compiler": "<%= experimentalAngularNext ? 'next' : latestVersions.Angular %>",
+    "@angular/core": "<%= experimentalAngularNext ? 'next' : latestVersions.Angular %>",
+    "@angular/forms": "<%= experimentalAngularNext ? 'next' : latestVersions.Angular %>",
+    "@angular/http": "<%= experimentalAngularNext ? 'next' : latestVersions.Angular %>",
+    "@angular/platform-browser": "<%= experimentalAngularNext ? 'next' : latestVersions.Angular %>",
+    "@angular/platform-browser-dynamic": "<%= experimentalAngularNext ? 'next' : latestVersions.Angular %>",
+    "@angular/router": "<%= experimentalAngularNext ? 'next' : latestVersions.Angular %>",
     "core-js": "^2.5.4",
     "rxjs": "<%= latestVersions.RxJs %>",
     "zone.js": "<%= latestVersions.ZoneJs %>"
   },
   "devDependencies": {
-    "@angular/cli": "~<%= version %>",
-    "@angular/compiler-cli": "<%= latestVersions.Angular %>",
-    "@angular/language-service": "<%= latestVersions.Angular %>",
+    "@angular/cli": "<%= experimentalAngularNext ? 'next' : '~' + version %>",
+    "@angular/compiler-cli": "<%= experimentalAngularNext ? 'next' : latestVersions.Angular %>",
+    "@angular/language-service": "<%= experimentalAngularNext ? 'next' : latestVersions.Angular %>",
     "@types/jasmine": "~2.8.8",
     "@types/jasminewd2": "~2.0.3",
     "@types/node": "~8.9.4",
diff --git a/packages/schematics/angular/workspace/schema.d.ts b/packages/schematics/angular/workspace/schema.d.ts
@@ -11,6 +11,10 @@ export interface Schema {
      * The name of the workspace.
      */
     name: string;
+    /**
+     * Uses the next version of Angular.
+     */
+    experimentalAngularNext?: boolean;
     /**
      * The path where new projects will be created.
      */
diff --git a/packages/schematics/angular/workspace/schema.json b/packages/schematics/angular/workspace/schema.json
@@ -13,6 +13,11 @@
         "index": 0
       }
     },
+    "experimentalAngularNext": {
+      "description": "Use the next version of Angular (@next dist-tag).",
+      "type": "boolean",
+      "visible": "false"
+    },
     "newProjectRoot": {
       "description": "The path where new projects will be created.",
       "type": "string",
diff --git a/tests/legacy-cli/e2e/tests/experimental/ivy.ts b/tests/legacy-cli/e2e/tests/experimental/ivy.ts
@@ -0,0 +1,33 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * 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 { request } from '../../utils/http';
+import { killAllProcesses } from '../../utils/process';
+import { createProject, ngServe } from '../../utils/project';
+
+export default async function() {
+  try {
+    await createProject('ivy-project', '--experimental-ivy');
+
+    await ngServe('--aot');
+
+    // Verify the index.html
+    const body = await request('http://localhost:4200/');
+    if (!body.match(/<app-root><\/app-root>/)) {
+      throw new Error('Response does not match expected value.');
+    }
+
+    // Verify it's Ivy.
+    const main = await request('http://localhost:4200/main.js');
+    if (!main.match(/ngComponentDef/)) {
+      throw new Error('Ivy could not be found.');
+    }
+  } finally {
+    await killAllProcesses();
+  }
+}
+
diff --git a/tests/legacy-cli/e2e/utils/project.ts b/tests/legacy-cli/e2e/utils/project.ts
@@ -47,7 +47,7 @@ export function createProject(name: string, ...args: string[]) {
     .then(() => argv.nightly || argv['ng-sha'] ? useSha() : Promise.resolve())
     .then(() => console.log(`Project ${name} created... Installing npm.`))
     .then(() => silentNpm('install'))
-    .then(() => useCIDefaults());
+    .then(() => useCIDefaults(name));
 }
 
 
