feat(@schematics/angular): configure new libraries to be published in Ivy partial mode

With this change we configure new libraries to be published using Ivy partial compilation instead of the deprecated View Engine rendering engine, we also remove several view engine specific `angularCompilerOptions`.

New libraries can be published using this format, as they are not depend upon by View Engine libraries or application.

Author: alan-agius4

packages/angular_devkit/build_angular/test/hello-world-lib/projects/lib/tsconfig.lib.json

@@ -11,11 +11,6 @@
       "es2018"
     ]
   },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "enableResourceInlining": true
-  },
   "exclude": [
     "src/test.ts",
     "**/*.spec.ts"

packages/angular_devkit/build_angular/test/hello-world-lib/projects/lib/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

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

@@ -13,11 +13,6 @@
       "es2018"
     ]
   },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "enableResourceInlining": true
-  },
   "exclude": [
     "src/test.ts",
     "**/*.spec.ts"

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

@@ -5,6 +5,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

packages/schematics/angular/utility/latest-versions.ts

@@ -20,5 +20,5 @@ export const latestVersions = {
   // should not be updated.
   DevkitBuildAngular: '~0.1200.0-next.9',
 
-  ngPackagr: '^12.0.0-next.0',
+  ngPackagr: '^12.0.0-next.8',
 };

tests/legacy-cli/e2e/tests/generate/library/library-basic.ts

@@ -1,8 +1,10 @@
 import { writeFile } from '../../../utils/fs';
 import { ng } from '../../../utils/process';
+import { updateJsonFile } from '../../../utils/project';
 
 export default async function () {
   await ng('generate', 'library', 'my-lib');
+
   await writeFile('./src/app/app.module.ts', `
       import { BrowserModule } from '@angular/platform-browser';
       import { NgModule } from '@angular/core';
@@ -33,7 +35,7 @@ export default async function () {
         template: '<lib-my-lib></lib-my-lib>'
       })
       export class AppComponent {
-        title = 'app';
+        title = 'test-project';
 
         constructor(myLibService: MyLibService) {
           console.log(myLibService);
@@ -67,19 +69,24 @@ export default async function () {
     });
   `);
 
-  await runLibraryTests();
-  await runLibraryTests(true);
-}
+  // Build library in full mode (development)
+  await ng('build', 'my-lib', '--configuration=development');
 
-async function runLibraryTests(prodMode = false): Promise<void> {
-  const args = ['build', 'my-lib'];
-  if (!prodMode) {
-    args.push('--configuration=development');
-  }
+  // AOT linking
+  await runTests();
 
-  await ng(...args);
+  // JIT linking
+  await updateJsonFile('angular.json', config => {
+    const build = config.projects['test-project'].architect.build;
+    build.options.aot = false;
+    build.configurations.production.buildOptimizer = false;
+  });
+
+  await runTests();
+}
 
-  // Check that the tests succeeds both with named project, unnammed (should test app), and prod.
+async function runTests(): Promise<void> {
+  // Check that the tests succeeds both with named project, unnamed (should test app), and prod.
   await ng('e2e');
   await ng('e2e', 'test-project', '--devServerTarget=test-project:serve:production');
 }

tests/legacy-cli/e2e/tests/generate/library/library-consumption.ts renamed to tests/legacy-cli/e2e/tests/generate/library/library-consumption-ivy-full.ts

@@ -0,0 +1,92 @@
+import { writeFile } from '../../../utils/fs';
+import { ng } from '../../../utils/process';
+import { updateJsonFile } from '../../../utils/project';
+
+export default async function () {
+  await ng('generate', 'library', 'my-lib');
+
+  await writeFile('./src/app/app.module.ts', `
+      import { BrowserModule } from '@angular/platform-browser';
+      import { NgModule } from '@angular/core';
+      import { MyLibModule } from 'my-lib';
+
+      import { AppComponent } from './app.component';
+
+      @NgModule({
+        declarations: [
+          AppComponent
+        ],
+        imports: [
+          BrowserModule,
+          MyLibModule,
+        ],
+        providers: [],
+        bootstrap: [AppComponent]
+      })
+      export class AppModule { }
+    `);
+
+  await writeFile('./src/app/app.component.ts', `
+      import { Component } from '@angular/core';
+      import { MyLibService } from 'my-lib';
+
+      @Component({
+        selector: 'app-root',
+        template: '<lib-my-lib></lib-my-lib>'
+      })
+      export class AppComponent {
+        title = 'test-project';
+
+        constructor(myLibService: MyLibService) {
+          console.log(myLibService);
+        }
+      }
+    `);
+
+  await writeFile('e2e/src/app.e2e-spec.ts', `
+    import { browser, logging, element, by } from 'protractor';
+    import { AppPage } from './app.po';
+
+    describe('workspace-project App', () => {
+      let page: AppPage;
+
+      beforeEach(() => {
+        page = new AppPage();
+      });
+
+      it('should display text from library component', async () => {
+        await page.navigateTo();
+        expect(await element(by.css('lib-my-lib p')).getText()).toEqual('my-lib works!');
+      });
+
+      afterEach(async () => {
+        // Assert that there are no errors emitted from the browser
+        const logs = await browser.manage().logs().get(logging.Type.BROWSER);
+        expect(logs).not.toContain(jasmine.objectContaining({
+          level: logging.Level.SEVERE,
+        }));
+      });
+    });
+  `);
+
+  // Build library in partial mode (production)
+  await ng('build', 'my-lib', '--configuration=production');
+
+  // AOT linking
+  await runTests();
+
+  // JIT linking
+  await updateJsonFile('angular.json', config => {
+    const build = config.projects['test-project'].architect.build;
+    build.options.aot = false;
+    build.configurations.production.buildOptimizer = false;
+  });
+
+  await runTests();
+}
+
+async function runTests(): Promise<void> {
+  // Check that the tests succeeds both with named project, unnamed (should test app), and prod.
+  await ng('e2e');
+  await ng('e2e', 'test-project', '--devServerTarget=test-project:serve:production');
+}

tests/legacy-cli/e2e/tests/generate/library/library-consumption-ivy-partial.ts

@@ -5,11 +5,11 @@ import { updateJsonFile } from '../../../utils/project';
 export default async function () {
   await ng('generate', 'library', 'my-lib');
 
-  // Enable partial compilation mode (linker) for the library
-  await updateJsonFile('projects/my-lib/tsconfig.lib.json', config => {
+  await updateJsonFile('projects/my-lib/tsconfig.lib.prod.json', config => {
     const { angularCompilerOptions = {} } = config;
-    angularCompilerOptions.enableIvy = true;
-    angularCompilerOptions.compilationMode = 'partial';
+    angularCompilerOptions.enableIvy = false;
+    angularCompilerOptions.skipTemplateCodegen = true;
+    angularCompilerOptions.strictMetadataEmit = true;
     config.angularCompilerOptions = angularCompilerOptions;
   });
 
@@ -77,8 +77,8 @@ export default async function () {
     });
   `);
 
-  // Build library in partial mode (development)
-  await ng('build', 'my-lib', '--configuration=development');
+  // Build library in VE mode (production)
+  await ng('build', 'my-lib', '--configuration=production');
 
   // AOT linking
   await runTests();