Why does prerendering create NamedChunks?

[scurk1415]

🐞 Bug report

What modules are related to this issue?

• aspnetcore-engine
• builders
• common
• express-engine
• hapi-engine
• module-map-ngfactory-loader

Is this a regression?

I don't know cause i was not using the previous version

Description

Prerendering always creates named chunks. If i run ng run app:build:production everything builds correctly https://prnt.sc/r2dytb , but if i run it with ng run app:prerender:production the lazy loaded modules are still named based on the module name https://prnt.sc/r2dzp1

🔬 Minimal Reproduction

1. Create angular app (v9)
2. ng add @nguniversal/express-engine
3. create a module to lazy load
4. run ng run app:prerender:production

🌍 Your Environment

Angular CLI: 9.0.2
Node: 12.14.1
OS: win32 x64

Angular: 9.0.1
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router
Ivy Workspace: Yes

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.900.2
@angular-devkit/build-angular     0.900.2
@angular-devkit/build-optimizer   0.900.2
@angular-devkit/build-webpack     0.900.2
@angular-devkit/core              9.0.2
@angular-devkit/schematics        9.0.2
@angular/cli                      9.0.2
@ngtools/webpack                  9.0.2
@nguniversal/builders             9.0.0
@nguniversal/common               9.0.0
@nguniversal/express-engine       9.0.0
@schematics/angular               9.0.2
@schematics/update                0.900.2
rxjs                              6.5.4
typescript                        3.7.5
webpack                           4.41.2

[wagnermaciel]

@alan-agius4 This is interesting because the browser target we are passing to the prerender builder is app:build:production. See add/index.ts. Do you have any idea why this happens?

[alan-agius4]

Will need some debugging, I am also noticing that in one of screenshots sources are emitted while in the other screenshots they are not.

[alan-agius4]

@wagnermaciel I’d start by debugging here: https://github.com/angular/universal/blob/57a0399133ccb7bc43a5024e0c40c7f8fafa6180/modules/builders/src/prerender/index.ts#L31

[scurk1415]

I also noticed that the file sizes are not the same (which they probably should be) so i am guessing that it runs the serverTarget instead of browserTarget.

This is the output for the files if i run it with the serverTarget configuration (https://prnt.sc/r2mwif). Which is close to being the same as on my second screenshot when i ran app:prerender:production https://prnt.sc/r2dzp1 (based on file size)

[alan-agius4]

I looked at this briefly and it seems that this is a bug related to Angular Devkit architect.

Did a small test to confirm

I did a custom builder that calls the browser target;

const { createBuilder, targetFromTargetString } = require("@angular-devkit/architect");

async function execute(options, context) {
  const browserTarget = targetFromTargetString(options.browserTarget);
  console.log(
    'getTargetOptions', await context.getTargetOptions(browserTarget)
  );

  const browserTargetRun = await context.scheduleTarget(browserTarget);
  await browserTargetRun.result;
  await browserTargetRun.stop();

  return { success: true };
}

exports.default = createBuilder(execute);

Executing the above will return the below (Note: while sourceMaps is false, they are still generated)

getTargetOptions {
  outputPath: 'dist/uni-pre/browser',
  index: 'src/index.html',
  main: 'src/main.ts',
  polyfills: 'src/polyfills.ts',
  tsConfig: 'tsconfig.app.json',
  aot: true,
  assets: [ 'src/favicon.ico', 'src/assets' ],
  styles: [ 'src/styles.css' ],
  scripts: [],
  fileReplacements: [
    {
      replace: 'src/environments/environment.ts',
      with: 'src/environments/environment.prod.ts'
    }
  ],
  optimization: true,
  outputHashing: 'all',
  sourceMap: false,
  extractCss: true,
  namedChunks: false,
  extractLicenses: true,
  vendorChunk: false,
  buildOptimizer: true,
  budgets: [
    { type: 'initial', maximumWarning: '2mb', maximumError: '5mb' },
    {
      type: 'anyComponentStyle',
      maximumWarning: '6kb',
      maximumError: '10kb'
    }
  ]
}
Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {3} polyfills-es5.041738d66a3982520e90.js, polyfills-es5.041738d66a3982520e90.js.map (polyfills-es5) 127 kB [initial] [rendered]
chunk {2} polyfills-es2015.db39b23daa8851ccf344.js, polyfills-es2015.db39b23daa8851ccf344.js.map (polyfills) 35.7 kB [initial] [rendered]
chunk {0} runtime-es2015.0811dcefd377500b5b1a.js, runtime-es2015.0811dcefd377500b5b1a.js.map (runtime) 1.51 kB [entry] [rendered]
chunk {0} runtime-es5.0811dcefd377500b5b1a.js, runtime-es5.0811dcefd377500b5b1a.js.map (runtime) 1.51 kB [entry] [rendered]
chunk {1} main-es2015.4da5b65032ea1b50beac.js, main-es2015.4da5b65032ea1b50beac.js.map (main) 27.1 kB [initial] [rendered]
chunk {1} main-es5.4da5b65032ea1b50beac.js, main-es5.4da5b65032ea1b50beac.js.map (main) 27.3 kB [initial] [rendered]
chunk {5} vendor-es2015.126aaec3f9743611b6ec.js, vendor-es2015.126aaec3f9743611b6ec.js.map (vendor) 215 kB [initial] [rendered]
chunk {5} vendor-es5.126aaec3f9743611b6ec.js, vendor-es5.126aaec3f9743611b6ec.js.map (vendor) 260 kB [initial] [rendered]
chunk {4} styles.8547d00c5fcaf5c47c33.css, styles.8547d00c5fcaf5c47c33.css.map (styles) 0 bytes [initial] [rendered]
Date: 2020-02-19T08:46:11.724Z - Hash: a4caaf1c847b94bf8394 - Time: 24565ms

The interesting part is that if we omit calling context.getTargetOptions prior to context.scheduleTarget the result is different,.

Let update our builder to;

const { createBuilder, targetFromTargetString } = require("@angular-devkit/architect");

async function execute(options, context) {
  const browserTarget = targetFromTargetString(options.browserTarget);
  // console.log(
  //   'getTargetOptions', await context.getTargetOptions(browserTarget)
  // );

  const browserTargetRun = await context.scheduleTarget(browserTarget);
  await browserTargetRun.result;
  await browserTargetRun.stop();

  return { success: true };
}

exports.default = createBuilder(execute);

Here's the result;

Generating ES5 bundles for differential loading...
ES5 bundle generation complete.

chunk {2} polyfills-es2015.ca64e4516afbb1b890d5.js (polyfills) 35.6 kB [initial] [rendered]
chunk {3} polyfills-es5.277e2e1d6fb2daf91a5c.js (polyfills-es5) 127 kB [initial] [rendered]
chunk {0} runtime-es2015.0811dcefd377500b5b1a.js (runtime) 1.45 kB [entry] [rendered]
chunk {0} runtime-es5.0811dcefd377500b5b1a.js (runtime) 1.45 kB [entry] [rendered]
chunk {1} main-es2015.be16c3d420978605e6ed.js (main) 216 kB [initial] [rendered]
chunk {1} main-es5.be16c3d420978605e6ed.js (main) 258 kB [initial] [rendered]
chunk {4} styles.3ff695c00d717f2d2a11.css (styles) 0 bytes [initial] [rendered]
Date: 2020-02-19T08:49:18.308Z - Hash: e6d6b1251cfe649fbfa7 - Time: 20023ms

[alan-agius4]

Transferring to the CLI repo and chiming in @clydin