@angular-devkit/build-angular 0.803.25 → 0.803.29

package/package.json

@@ -1,28 +1,28 @@
 {
   "name": "@angular-devkit/build-angular",
-  "version": "0.803.25",
+  "version": "0.803.29",
   "description": "Angular Webpack Build Facade",
   "experimental": true,
   "main": "src/index.js",
   "typings": "src/index.d.ts",
   "builders": "builders.json",
   "dependencies": {
-    "@angular-devkit/architect": "0.803.25",
-    "@angular-devkit/build-optimizer": "0.803.25",
-    "@angular-devkit/build-webpack": "0.803.25",
-    "@angular-devkit/core": "8.3.25",
-    "@babel/core": "7.8.3",
-    "@babel/preset-env": "7.8.3",
-    "@ngtools/webpack": "8.3.25",
-    "ajv": "6.10.2",
+    "@angular-devkit/architect": "0.803.29",
+    "@angular-devkit/build-optimizer": "0.803.29",
+    "@angular-devkit/build-webpack": "0.803.29",
+    "@angular-devkit/core": "8.3.29",
+    "@babel/core": "7.8.7",
+    "@babel/preset-env": "7.8.7",
+    "@ngtools/webpack": "8.3.29",
+    "ajv": "6.12.3",
     "autoprefixer": "9.6.1",
-    "browserslist": "4.8.6",
+    "browserslist": "4.10.0",
     "cacache": "12.0.2",
-    "caniuse-lite": "1.0.30001024",
+    "caniuse-lite": "1.0.30001035",
     "circular-dependency-plugin": "5.2.0",
     "clean-css": "4.2.1",
     "coverage-istanbul-loader": "2.0.3",
-    "copy-webpack-plugin": "5.1.1",
+    "copy-webpack-plugin": "6.0.3",
     "core-js": "3.6.4",
     "file-loader": "4.2.0",
     "find-cache-dir": "3.0.0",
@@ -55,10 +55,10 @@
     "stylus-loader": "3.0.2",
     "tree-kill": "1.2.2",
     "terser": "4.6.3",
-    "terser-webpack-plugin": "1.4.3",
+    "terser-webpack-plugin": "3.0.3",
     "webpack": "4.39.2",
     "webpack-dev-middleware": "3.7.2",
-    "webpack-dev-server": "3.9.0",
+    "webpack-dev-server": "3.11.0",
     "webpack-merge": "4.2.1",
     "webpack-sources": "1.4.3",
     "webpack-subresource-integrity": "1.1.0-rc.6",

package/src/angular-cli-files/models/webpack-configs/common.js

@@ -141,30 +141,40 @@ function getCommonConfig(wco) {
         });
     }
     // process asset entries
-    if (buildOptions.assets) {
+    if (buildOptions.assets.length) {
         const copyWebpackPluginPatterns = buildOptions.assets.map((asset) => {
             // Resolve input paths relative to workspace root and add slash at the end.
-            asset.input = path.resolve(root, asset.input).replace(/\\/g, '/');
-            asset.input = asset.input.endsWith('/') ? asset.input : asset.input + '/';
-            asset.output = asset.output.endsWith('/') ? asset.output : asset.output + '/';
-            if (asset.output.startsWith('..')) {
-                const message = 'An asset cannot be written to a location outside of the output path.';
-                throw new Error(message);
+            // tslint:disable-next-line: prefer-const
+            let { input, output, ignore = [], glob } = asset;
+            input = path.resolve(root, input).replace(/\\/g, '/');
+            input = input.endsWith('/') ? input : input + '/';
+            output = output.endsWith('/') ? output : output + '/';
+            if (output.startsWith('..')) {
+                throw new Error('An asset cannot be written to a location outside of the output path.');
             }
             return {
-                context: asset.input,
+                context: input,
                 // Now we remove starting slash to make Webpack place it from the output root.
-                to: asset.output.replace(/^\//, ''),
-                ignore: asset.ignore,
-                from: {
-                    glob: asset.glob,
+                to: output.replace(/^\//, ''),
+                from: glob,
+                noErrorOnMissing: true,
+                globOptions: {
                     dot: true,
+                    ignore: [
+                        '.gitkeep',
+                        '**/.DS_Store',
+                        '**/Thumbs.db',
+                        // Negate patterns needs to be absolute because copy-webpack-plugin uses absolute globs which
+                        // causes negate patterns not to match.
+                        // See: https://github.com/webpack-contrib/copy-webpack-plugin/issues/498#issuecomment-639327909
+                        ...ignore,
+                    ].map(i => path.posix.join(input, i)),
                 },
             };
         });
-        const copyWebpackPluginOptions = { ignore: ['.gitkeep', '**/.DS_Store', '**/Thumbs.db'] };
-        const copyWebpackPluginInstance = new CopyWebpackPlugin(copyWebpackPluginPatterns, copyWebpackPluginOptions);
-        extraPlugins.push(copyWebpackPluginInstance);
+        extraPlugins.push(new CopyWebpackPlugin({
+            patterns: copyWebpackPluginPatterns,
+        }));
     }
     if (buildOptions.progress) {
         extraPlugins.push(new ProgressPlugin({ profile: buildOptions.verbose }));
@@ -286,11 +296,12 @@ function getCommonConfig(wco) {
                 buildOptions.platform !== 'server' &&
                 (!differentialLoadingNeeded || (differentialLoadingNeeded && utils_1.fullDifferential)),
         };
+        const globalScriptsNames = globalScriptsByBundleName.map(s => s.bundleName);
         extraMinimizers.push(new TerserPlugin({
             sourceMap: scriptsSourceMap,
             parallel: true,
             cache: true,
-            chunkFilter: (chunk) => !globalScriptsByBundleName.some(s => s.bundleName === chunk.name),
+            exclude: globalScriptsNames,
             terserOptions,
         }), 
         // Script bundles are fully optimized here in one step since they are never downleveled.
@@ -299,7 +310,7 @@ function getCommonConfig(wco) {
             sourceMap: scriptsSourceMap,
             parallel: true,
             cache: true,
-            chunkFilter: (chunk) => globalScriptsByBundleName.some(s => s.bundleName === chunk.name),
+            include: globalScriptsNames,
             terserOptions: {
                 ...terserOptions,
                 compress: {

package/src/utils/process-bundle.js

@@ -53,6 +53,16 @@ async function process(options) {
     let downlevelCode;
     let downlevelMap;
     if (downlevel) {
+        const { supportedBrowsers: targets = [] } = options;
+        // todo: revisit this in version 10, when we update our defaults browserslist
+        // Without this workaround bundles will not be downlevelled because Babel doesn't know handle to 'op_mini all'
+        // See: https://github.com/babel/babel/issues/11155
+        if (Array.isArray(targets) && targets.includes('op_mini all')) {
+            targets.push('ie_mob 11');
+        }
+        else if ('op_mini' in targets) {
+            targets['ie_mob'] = '11';
+        }
         // Downlevel the bundle
         const transformResult = await core_1.transformAsync(sourceCode, {
             filename: options.filename,
@@ -64,7 +74,7 @@ async function process(options) {
                     require.resolve('@babel/preset-env'),
                     {
                         // browserslist-compatible query or object of minimum environment versions to support
-                        targets: options.supportedBrowsers,
+                        targets,
                         // modules aren't needed since the bundles use webpack's custom module loading
                         modules: false,
                         // 'transform-typeof-symbol' generates slower code

package/test/app-shell/app-shell_spec_large_disabled.d.ts

@@ -0,0 +1 @@
+export {};

package/test/app-shell/app-shell_spec_large_disabled.js

@@ -0,0 +1,236 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const core_1 = require("@angular-devkit/core");
+const express = require("express"); // tslint:disable-line:no-implicit-dependencies
+const utils_1 = require("../utils");
+// This test is excluded by default and will need to be run explicitly.
+// This is because App-Shell builder uses zone.js which patched the global Promise
+// Currently there is no clean way to unload zone.js which causes tests that run after
+// this to be extremly flaky.
+// To run this test use:
+// yarn test-large --full --glob packages/angular_devkit/build_angular/test/app-shell/app-shell_spec_large_disabled.ts --ivy=true
+describe('AppShell Builder', () => {
+    const target = { project: 'app', target: 'app-shell' };
+    let architect;
+    beforeEach(async () => {
+        await utils_1.host.initialize().toPromise();
+        architect = (await utils_1.createArchitect(utils_1.host.root())).architect;
+    });
+    afterEach(async () => utils_1.host.restore().toPromise());
+    const appShellRouteFiles = {
+        'src/app/app-shell/app-shell.component.html': `
+      <p>
+        app-shell works!
+      </p>
+    `,
+        'src/app/app-shell/app-shell.component.ts': `
+      import { Component, OnInit } from '@angular/core';
+
+      @Component({
+        selector: 'app-app-shell',
+        templateUrl: './app-shell.component.html',
+      })
+      export class AppShellComponent implements OnInit {
+
+        constructor() { }
+
+        ngOnInit() {
+        }
+
+      }
+    `,
+        'src/app/app.module.ts': `
+      import { BrowserModule } from '@angular/platform-browser';
+      import { NgModule } from '@angular/core';
+
+      import { AppRoutingModule } from './app-routing.module';
+      import { AppComponent } from './app.component';
+      import { environment } from '../environments/environment';
+      import { RouterModule } from '@angular/router';
+
+      @NgModule({
+        declarations: [
+          AppComponent
+        ],
+        imports: [
+          BrowserModule.withServerTransition({ appId: 'serverApp' }),
+          AppRoutingModule,
+          RouterModule
+        ],
+        providers: [],
+        bootstrap: [AppComponent]
+      })
+      export class AppModule { }
+    `,
+        'src/app/app.server.module.ts': `
+      import { NgModule } from '@angular/core';
+      import { ServerModule } from '@angular/platform-server';
+
+      import { AppModule } from './app.module';
+      import { AppComponent } from './app.component';
+      import { Routes, RouterModule } from '@angular/router';
+      import { AppShellComponent } from './app-shell/app-shell.component';
+
+      const routes: Routes = [ { path: 'shell', component: AppShellComponent }];
+
+      @NgModule({
+        imports: [
+          AppModule,
+          ServerModule,
+          RouterModule.forRoot(routes),
+        ],
+        bootstrap: [AppComponent],
+        declarations: [AppShellComponent],
+      })
+      export class AppServerModule {}
+    `,
+        'src/main.ts': `
+      import { enableProdMode } from '@angular/core';
+      import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+
+      import { AppModule } from './app/app.module';
+      import { environment } from './environments/environment';
+
+      if (environment.production) {
+        enableProdMode();
+      }
+
+      document.addEventListener('DOMContentLoaded', () => {
+        platformBrowserDynamic().bootstrapModule(AppModule)
+        .catch(err => console.log(err));
+      });
+    `,
+        'src/app/app-routing.module.ts': `
+      import { NgModule } from '@angular/core';
+      import { Routes, RouterModule } from '@angular/router';
+
+      const routes: Routes = [];
+
+      @NgModule({
+        imports: [RouterModule.forRoot(routes)],
+        exports: [RouterModule]
+      })
+      export class AppRoutingModule { }
+    `,
+        'src/app/app.component.html': `
+      <router-outlet></router-outlet>
+    `,
+    };
+    it('works (basic)', async () => {
+        utils_1.host.replaceInFile('src/app/app.module.ts', /    BrowserModule/, `
+      BrowserModule.withServerTransition({ appId: 'some-app' })
+    `);
+        const run = await architect.scheduleTarget(target);
+        const output = await run.result;
+        await run.stop();
+        expect(output.success).toBe(true);
+        const fileName = 'dist/index.html';
+        const content = core_1.virtualFs.fileBufferToString(utils_1.host.scopedSync().read(core_1.normalize(fileName)));
+        expect(content).toMatch(/Welcome to app!/);
+    });
+    it('works with route', async () => {
+        utils_1.host.writeMultipleFiles(appShellRouteFiles);
+        const overrides = { route: 'shell' };
+        const run = await architect.scheduleTarget(target, overrides);
+        const output = await run.result;
+        await run.stop();
+        expect(output.success).toBe(true);
+        const fileName = 'dist/index.html';
+        const content = core_1.virtualFs.fileBufferToString(utils_1.host.scopedSync().read(core_1.normalize(fileName)));
+        expect(content).toContain('app-shell works!');
+    });
+    it('works with route and service-worker', async () => {
+        utils_1.host.writeMultipleFiles(appShellRouteFiles);
+        utils_1.host.writeMultipleFiles({
+            'src/ngsw-config.json': `
+        {
+          "index": "/index.html",
+          "assetGroups": [{
+            "name": "app",
+            "installMode": "prefetch",
+            "resources": {
+              "files": [
+                "/favicon.ico",
+                "/index.html",
+                "/*.css",
+                "/*.js"
+              ]
+            }
+          }, {
+            "name": "assets",
+            "installMode": "lazy",
+            "updateMode": "prefetch",
+            "resources": {
+              "files": [
+                "/assets/**"
+              ]
+            }
+          }]
+        }
+      `,
+            'src/app/app.module.ts': `
+        import { BrowserModule } from '@angular/platform-browser';
+        import { NgModule } from '@angular/core';
+
+        import { AppRoutingModule } from './app-routing.module';
+        import { AppComponent } from './app.component';
+        import { ServiceWorkerModule } from '@angular/service-worker';
+        import { environment } from '../environments/environment';
+        import { RouterModule } from '@angular/router';
+
+        @NgModule({
+          declarations: [
+            AppComponent
+          ],
+          imports: [
+            BrowserModule.withServerTransition({ appId: 'serverApp' }),
+            AppRoutingModule,
+            ServiceWorkerModule.register('/ngsw-worker.js', { enabled: environment.production }),
+            RouterModule
+          ],
+          providers: [],
+          bootstrap: [AppComponent]
+        })
+        export class AppModule { }
+      `,
+            'e2e/app.e2e-spec.ts': `
+        import { browser, by, element } from 'protractor';
+
+        it('should have ngsw in normal state', () => {
+          browser.get('/');
+          // Wait for service worker to load.
+          browser.sleep(2000);
+          browser.waitForAngularEnabled(false);
+          browser.get('/ngsw/state');
+          // Should have updated, and be in normal state.
+          expect(element(by.css('pre')).getText()).not.toContain('Last update check: never');
+          expect(element(by.css('pre')).getText()).toContain('Driver state: NORMAL');
+        });
+      `,
+        });
+        // This should match the browser target prod config.
+        utils_1.host.replaceInFile('angular.json', '"buildOptimizer": true', '"buildOptimizer": true, "serviceWorker": true');
+        // We're changing the workspace file so we need to recreate the Architect instance.
+        architect = (await utils_1.createArchitect(utils_1.host.root())).architect;
+        const overrides = { route: 'shell' };
+        const run = await architect.scheduleTarget({ ...target, configuration: 'production' }, overrides);
+        const output = await run.result;
+        await run.stop();
+        expect(output.success).toBe(true);
+        // Make sure the index is pre-rendering the route.
+        const fileName = 'dist/index.html';
+        const content = core_1.virtualFs.fileBufferToString(utils_1.host.scopedSync().read(core_1.normalize(fileName)));
+        expect(content).toContain('app-shell works!');
+        // Serve the app using a simple static server.
+        const app = express();
+        app.use('/', express.static(core_1.getSystemPath(core_1.join(utils_1.host.root(), 'dist')) + '/'));
+        const server = app.listen(4200);
+        // Load app in protractor, then check service worker status.
+        const protractorRun = await architect.scheduleTarget({ project: 'app-e2e', target: 'e2e' }, { devServerTarget: undefined });
+        const protractorOutput = await protractorRun.result;
+        await protractorRun.stop();
+        expect(protractorOutput.success).toBe(true);
+        // Close the express server.
+        server.close();
+    });
+});