diff --git a/docs/documentation/angular-cli.md b/docs/documentation/angular-cli.md index 2d065ac36a7b..4d836dfe714a 100644 --- a/docs/documentation/angular-cli.md +++ b/docs/documentation/angular-cli.md @@ -77,6 +77,15 @@ - *service*: Options for generating a service. - *flat* (`boolean`): Flag to indicate if a dir is created. Default is `true`. - *spec* (`boolean`): Specifies if a spec file is generated. Default is `true`. + - *build*: Properties to be passed to the build command. + - *sourcemaps* (`boolean`): Output sourcemaps. + - *baseHref* (`string`): Base url for the application being built. + - *progress* (`boolean`): Log progress to the console while building. Default is `true`. + - *poll* (`number`): Enable and define the file watching poll time period (milliseconds). + - *deleteOutputPath* (`boolean`): Delete output path before build. Default is `true`. + - *preserveSymlinks* (`boolean`): Do not use the real path when resolving modules. Default is `false`. + - *showCircularDependencies* (`boolean`): Show circular dependency warnings on builds. Default is `true`. + - *namedChunks* (`boolean`): Use file name for lazy loaded chunks. - *serve*: Properties to be passed to the serve command - *port* (`number`): The port the application will be served on. Default is `4200`. - *host* (`string`): The host the application will be served on. Default is `localhost`. diff --git a/docs/documentation/build.md b/docs/documentation/build.md index 2a3678bd904d..fdc30ab9489c 100644 --- a/docs/documentation/build.md +++ b/docs/documentation/build.md @@ -342,3 +342,13 @@ Note: service worker support is experimental and subject to change. (Experimental) Enables @angular-devkit/build-optimizer optimizations when using `--aot`.

+ +
+ named-chunks +

+ --named-chunks (aliases: -nm) +

+

+ Use file name for lazy loaded chunks. +

+
diff --git a/packages/@angular/cli/commands/build.ts b/packages/@angular/cli/commands/build.ts index 2138b1aa028d..50819f9baff7 100644 --- a/packages/@angular/cli/commands/build.ts +++ b/packages/@angular/cli/commands/build.ts @@ -9,7 +9,7 @@ const Command = require('../ember-cli/lib/models/command'); const config = CliConfig.fromProject() || CliConfig.fromGlobal(); const buildConfigDefaults = config.getPaths('defaults.build', [ 'sourcemaps', 'baseHref', 'progress', 'poll', 'deleteOutputPath', 'preserveSymlinks', - 'showCircularDependencies', 'commonChunk' + 'showCircularDependencies', 'commonChunk', 'namedChunks' ]); // defaults for BuildOptions @@ -166,6 +166,13 @@ export const baseBuildCommandOptions: any = [ aliases: ['bo'], description: '(Experimental) Enables @angular-devkit/build-optimizer ' + 'optimizations when using `--aot`.' + }, + { + name: 'named-chunks', + type: Boolean, + aliases: ['nc'], + description: 'Use file name for lazy loaded chunks.', + default: buildConfigDefaults['namedChunks'] } ]; diff --git a/packages/@angular/cli/lib/config/schema.json b/packages/@angular/cli/lib/config/schema.json index 3cda338df6aa..ccd71182dbeb 100644 --- a/packages/@angular/cli/lib/config/schema.json +++ b/packages/@angular/cli/lib/config/schema.json @@ -486,6 +486,10 @@ "description": "Use a separate bundle containing code used across multiple bundles.", "type": "boolean", "default": true + }, + "namedChunks": { + "description": "Use file name for lazy loaded chunks.", + "type": "boolean" } } }, diff --git a/packages/@angular/cli/models/build-options.ts b/packages/@angular/cli/models/build-options.ts index e8e2265eddce..840395926dbe 100644 --- a/packages/@angular/cli/models/build-options.ts +++ b/packages/@angular/cli/models/build-options.ts @@ -23,4 +23,5 @@ export interface BuildOptions { extractLicenses?: boolean; showCircularDependencies?: boolean; buildOptimizer?: boolean; + namedChunks?: boolean; } diff --git a/packages/@angular/cli/models/webpack-config.ts b/packages/@angular/cli/models/webpack-config.ts index e3a1b2061d30..8d084801e48c 100644 --- a/packages/@angular/cli/models/webpack-config.ts +++ b/packages/@angular/cli/models/webpack-config.ts @@ -84,13 +84,16 @@ export class NgCliWebpackConfig { environment: 'dev', outputHashing: 'media', sourcemaps: true, - extractCss: false + extractCss: false, + namedChunks: true, + aot: false }, production: { environment: 'prod', outputHashing: 'all', sourcemaps: false, extractCss: true, + namedChunks: false, aot: true } }; diff --git a/packages/@angular/cli/models/webpack-configs/common.ts b/packages/@angular/cli/models/webpack-configs/common.ts index 4a23ab39d311..513ab32540d6 100644 --- a/packages/@angular/cli/models/webpack-configs/common.ts +++ b/packages/@angular/cli/models/webpack-configs/common.ts @@ -82,6 +82,10 @@ export function getCommonConfig(wco: WebpackConfigOptions) { }); } + if (buildOptions.namedChunks) { + extraPlugins.push(new NamedLazyChunksWebpackPlugin()); + } + return { resolve: { extensions: ['.ts', '.js'], @@ -112,8 +116,7 @@ export function getCommonConfig(wco: WebpackConfigOptions) { ].concat(extraRules) }, plugins: [ - new webpack.NoEmitOnErrorsPlugin(), - new NamedLazyChunksWebpackPlugin(), + new webpack.NoEmitOnErrorsPlugin() ].concat(extraPlugins), node: { fs: 'empty', diff --git a/tests/e2e/tests/misc/lazy-module.ts b/tests/e2e/tests/misc/lazy-module.ts index b49c754ec6b8..e4adbb2295bb 100644 --- a/tests/e2e/tests/misc/lazy-module.ts +++ b/tests/e2e/tests/misc/lazy-module.ts @@ -18,7 +18,7 @@ export default function() { RouterModule.forRoot([{ path: "lazy1", loadChildren: "./lazy/lazy.module#LazyModule" }]), RouterModule.forRoot([{ path: "lazy2", loadChildren: "./too/lazy/lazy.module#LazyModule" }]) `, '@angular/router')) - .then(() => ng('build')) + .then(() => ng('build', '--named-chunks')) .then(() => readdirSync('dist')) .then((distFiles) => { const currentNumberOfDistFiles = distFiles.length; @@ -28,10 +28,10 @@ export default function() { oldNumberOfFiles = currentNumberOfDistFiles; if (!distFiles.includes('lazy.module.chunk.js')){ - throw new Error('The chunk for the lazy module did not have a name.'); + throw new Error('The lazy module chunk did not have a name.'); } if (!distFiles.includes('lazy.module.0.chunk.js')){ - throw new Error('The chunk for the lazy module did not use a unique name.'); + throw new Error('The lazy module chunk did not use a unique name.'); } }) // verify System.import still works @@ -42,7 +42,7 @@ export default function() { const lazyFile = 'file'; System.import('./lazy-' + lazyFile); `)) - .then(() => ng('build')) + .then(() => ng('build', '--named-chunks')) .then(() => readdirSync('dist')) .then((distFiles) => { const currentNumberOfDistFiles = distFiles.length; @@ -50,7 +50,7 @@ export default function() { throw new Error('A bundle for the lazy file was not created.'); } if (!distFiles.includes('lazy-file.chunk.js')) { - throw new Error('The chunk for the lazy file did not have a name.'); + throw new Error('The lazy file chunk did not have a name.'); } oldNumberOfFiles = currentNumberOfDistFiles; }) @@ -67,6 +67,16 @@ export default function() { throw new Error('Bundles were not created after adding \'import *\'.'); } }) + .then(() => ng('build', '--no-named-chunks')) + .then(() => readdirSync('dist')) + .then((distFiles) => { + if (distFiles.includes('lazy.module.chunk.js') + || distFiles.includes('lazy.module.0.chunk.js') + || distFiles.includes('lazy-file.chunk.js') + ) { + throw new Error('Lazy chunks shouldn\'t have a name but did.'); + } + }) // Check for AoT and lazy routes. .then(() => ng('build', '--aot')) .then(() => readdirSync('dist').length)