From 695a01ba02b8c6e9656ed5ed5b0c5e17760ba21d Mon Sep 17 00:00:00 2001 From: Alan Agius Date: Thu, 8 Apr 2021 10:12:56 +0200 Subject: [PATCH] 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. --- .../projects/lib/tsconfig.lib.json | 5 - .../projects/lib/tsconfig.lib.prod.json | 2 +- .../library/files/tsconfig.lib.json.template | 5 - .../files/tsconfig.lib.prod.json.template | 2 +- .../angular/utility/latest-versions.ts | 2 +- .../tests/generate/library/library-basic.ts | 11 --- ...ion.ts => library-consumption-ivy-full.ts} | 29 +++--- .../library-consumption-ivy-partial.ts | 92 +++++++++++++++++++ ...on-linker.ts => library-consumption-ve.ts} | 12 +-- 9 files changed, 119 insertions(+), 41 deletions(-) delete mode 100644 tests/legacy-cli/e2e/tests/generate/library/library-basic.ts rename tests/legacy-cli/e2e/tests/generate/library/{library-consumption.ts => library-consumption-ivy-full.ts} (78%) create mode 100644 tests/legacy-cli/e2e/tests/generate/library/library-consumption-ivy-partial.ts rename tests/legacy-cli/e2e/tests/generate/library/{library-consumption-linker.ts => library-consumption-ve.ts} (88%) diff --git a/packages/angular_devkit/build_angular/test/hello-world-lib/projects/lib/tsconfig.lib.json b/packages/angular_devkit/build_angular/test/hello-world-lib/projects/lib/tsconfig.lib.json index 0af783fbaf1e..63dd9b693892 100644 --- a/packages/angular_devkit/build_angular/test/hello-world-lib/projects/lib/tsconfig.lib.json +++ b/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" diff --git a/packages/angular_devkit/build_angular/test/hello-world-lib/projects/lib/tsconfig.lib.prod.json b/packages/angular_devkit/build_angular/test/hello-world-lib/projects/lib/tsconfig.lib.prod.json index 04c0e66277e0..2a2faa884cf3 100644 --- a/packages/angular_devkit/build_angular/test/hello-world-lib/projects/lib/tsconfig.lib.prod.json +++ b/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" } } diff --git a/packages/schematics/angular/library/files/tsconfig.lib.json.template b/packages/schematics/angular/library/files/tsconfig.lib.json.template index f3c3f4aa6429..202a2d21c6f9 100644 --- a/packages/schematics/angular/library/files/tsconfig.lib.json.template +++ b/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" diff --git a/packages/schematics/angular/library/files/tsconfig.lib.prod.json.template b/packages/schematics/angular/library/files/tsconfig.lib.prod.json.template index 5615c27df63f..06de549e1072 100644 --- a/packages/schematics/angular/library/files/tsconfig.lib.prod.json.template +++ b/packages/schematics/angular/library/files/tsconfig.lib.prod.json.template @@ -5,6 +5,6 @@ "declarationMap": false }, "angularCompilerOptions": { - "enableIvy": false + "compilationMode": "partial" } } diff --git a/packages/schematics/angular/utility/latest-versions.ts b/packages/schematics/angular/utility/latest-versions.ts index fa10fd161d19..3b2c4d88c52a 100644 --- a/packages/schematics/angular/utility/latest-versions.ts +++ b/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', }; diff --git a/tests/legacy-cli/e2e/tests/generate/library/library-basic.ts b/tests/legacy-cli/e2e/tests/generate/library/library-basic.ts deleted file mode 100644 index 33f1c92f4758..000000000000 --- a/tests/legacy-cli/e2e/tests/generate/library/library-basic.ts +++ /dev/null @@ -1,11 +0,0 @@ -import { ng } from '../../../utils/process'; -import { expectFileToMatch } from '../../../utils/fs'; -import { useCIChrome } from '../../../utils/project'; - -export default function () { - return ng('generate', 'library', 'my-lib') - .then(() => expectFileToMatch('angular.json', /\"my-lib\":/)) - .then(() => useCIChrome('projects/my-lib')) - .then(() => ng('build', 'my-lib', '--configuration=development')) - .then(() => ng('test', 'my-lib', '--watch=false')); -} diff --git a/tests/legacy-cli/e2e/tests/generate/library/library-consumption.ts b/tests/legacy-cli/e2e/tests/generate/library/library-consumption-ivy-full.ts similarity index 78% rename from tests/legacy-cli/e2e/tests/generate/library/library-consumption.ts rename to tests/legacy-cli/e2e/tests/generate/library/library-consumption-ivy-full.ts index 1d292cdc6f8e..b523bbc67bb1 100644 --- a/tests/legacy-cli/e2e/tests/generate/library/library-consumption.ts +++ b/tests/legacy-cli/e2e/tests/generate/library/library-consumption-ivy-full.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: '' }) 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 { - 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 { + // 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'); } diff --git a/tests/legacy-cli/e2e/tests/generate/library/library-consumption-ivy-partial.ts b/tests/legacy-cli/e2e/tests/generate/library/library-consumption-ivy-partial.ts new file mode 100644 index 000000000000..076ceb65cd80 --- /dev/null +++ b/tests/legacy-cli/e2e/tests/generate/library/library-consumption-ivy-partial.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: '' + }) + 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 { + // 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'); +} diff --git a/tests/legacy-cli/e2e/tests/generate/library/library-consumption-linker.ts b/tests/legacy-cli/e2e/tests/generate/library/library-consumption-ve.ts similarity index 88% rename from tests/legacy-cli/e2e/tests/generate/library/library-consumption-linker.ts rename to tests/legacy-cli/e2e/tests/generate/library/library-consumption-ve.ts index b1bc3ea7d004..34c4114fdf8f 100644 --- a/tests/legacy-cli/e2e/tests/generate/library/library-consumption-linker.ts +++ b/tests/legacy-cli/e2e/tests/generate/library/library-consumption-ve.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();