Skip to content

fix(@ngtools/webpack): replace bootstrap code under Ivy unless running in JIT mode #14180

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
alexeagle merged 3 commits into from
Apr 16, 2019
Merged

fix(@ngtools/webpack): replace bootstrap code under Ivy unless running in JIT mode #14180

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
54f1cad
fix(@ngtools/webpack): replace bootstrap code under Ivy unless runnin…
Apr 16, 2019
6cbcaea
test: fix e2e to rely on the bootstrapping call instead of the method…
Apr 16, 2019
23fd784
test: add size checks to prod build e2e tests
Apr 16, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions packages/ngtools/webpack/src/angular_compiler_plugin.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -948,13 +948,13 @@ export class AngularCompilerPlugin {
this._normalizedLocale));
}

if (this._useFactories) {
// Replace bootstrap in browser AOT.
if (!this._JitMode) {
// Replace bootstrap in browser non JIT Mode.
this._transformers.push(replaceBootstrap(
isAppPath,
getEntryModule,
getTypeChecker,
!!this._compilerOptions.enableIvy,
this._useFactories,
));
}
} else if (this._platform === PLATFORM.Server) {
Expand Down
4 changes: 2 additions & 2 deletions packages/ngtools/webpack/src/transformers/replace_bootstrap.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ export function replaceBootstrap(
shouldTransform: (fileName: string) => boolean,
getEntryModule: () => { path: string, className: string } | null,
getTypeChecker: () => ts.TypeChecker,
enableIvy?: boolean,
useFactories = true,
): ts.TransformerFactory<ts.SourceFile> {

const standardTransform: StandardTransform = function (sourceFile: ts.SourceFile) {
Expand Down Expand Up @@ -82,7 +82,7 @@ export function replaceBootstrap(
let modulePath = `./${relativeEntryModulePath}`.replace(/\\/g, '/');
let bootstrapIdentifier = 'bootstrapModule';

if (!enableIvy) {
if (useFactories) {
className += 'NgFactory';
modulePath += '.ngfactory';
bootstrapIdentifier = 'bootstrapModuleFactory';
Expand Down
4 changes: 2 additions & 2 deletions packages/ngtools/webpack/src/transformers/replace_bootstrap_spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ describe('@ngtools/webpack transformers', () => {
expect(tags.oneLine`${result}`).toEqual(tags.oneLine`${output}`);
});

it('should replace bootstrap for Ivy without referencing ngFactory', () => {
it('should replace bootstrap without referencing ngFactory when useFactories is false', () => {
const input = tags.stripIndent`
import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
Expand Down Expand Up @@ -87,7 +87,7 @@ describe('@ngtools/webpack transformers', () => {
() => true,
() => ({ path: '/project/src/app/app.module', className: 'AppModule' }),
() => program.getTypeChecker(),
true,
false,
);
const result = transformTypescript(undefined, [transformer], program, compilerHost);

Expand Down
82 changes: 59 additions & 23 deletions tests/legacy-cli/e2e/tests/build/prod-build.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,66 @@
import {join} from 'path';
import {readdirSync} from 'fs';
import {expectFileToExist, expectFileToMatch} from '../../utils/fs';
import {ng} from '../../utils/process';
import {expectGitToBeClean} from '../../utils/git';
import { statSync } from 'fs';
import { join } from 'path';
import { getGlobalVariable } from '../../utils/env';
import { expectFileToExist, expectFileToMatch, readFile } from '../../utils/fs';
import { expectGitToBeClean } from '../../utils/git';
import { ng } from '../../utils/process';


export default function() {
function verifySize(bundle: string, baselineBytes: number) {
const size = statSync(`dist/test-project/${bundle}`).size;
const percentageBaseline = baselineBytes * 10 / 100;
const maxSize = baselineBytes + percentageBaseline;
const minSize = baselineBytes - percentageBaseline;

if (size >= maxSize) {
throw new Error(
`Expected ${bundle} size to be less than ${maxSize / 1024}Kb but it was ${size / 1024}Kb.`,
);
}

if (size <= minSize) {
throw new Error(
`Expected ${bundle} size to be greater than ${minSize / 1024}Kb but it was ${size / 1024}Kb.`,
);
}
}

export default async function () {
Comment thread
alan-agius4 marked this conversation as resolved.
Resolved
// TODO(architect): Delete this test. It is now in devkit/build-angular.

// Can't use the `ng` helper because somewhere the environment gets
// stuck to the first build done
return ng('build', '--prod')
.then(() => expectFileToExist(join(process.cwd(), 'dist')))
// Check for cache busting hash script src
.then(() => expectFileToMatch('dist/test-project/index.html', /main-es5\.[0-9a-f]{20}\.js/))
.then(() => expectFileToMatch('dist/test-project/index.html', /main-es2015\.[0-9a-f]{20}\.js/))
.then(() => expectFileToMatch('dist/test-project/index.html', /styles\.[0-9a-f]{20}\.css/))
.then(() => expectFileToMatch('dist/test-project/3rdpartylicenses.txt', /MIT/))
// Defaults to AoT
.then(() => {
const mainES5 = readdirSync('./dist/test-project').find(name => !!name.match(/main-es5.[a-z0-9]+\.js/));
expectFileToMatch(`dist/test-project/${mainES5}`, /bootstrapModuleFactory\(/);

const mainES2015 = readdirSync('./dist/test-project').find(name => !!name.match(/main-es2015.[a-z0-9]+\.js/));
expectFileToMatch(`dist/test-project/${mainES5}`, /bootstrapModuleFactory\(/);

@alan-agius4 alan-agius4 Apr 16, 2019

Copy link
Copy Markdown
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This regexp was actually matching the entire contents of the bundle, and in fact this test was not failing for Ivy

})
// Check that the process didn't change local files.
.then(() => expectGitToBeClean());
const argv = getGlobalVariable('argv');
const ivyProject = argv['ivy'];
const bootstrapRegExp = ivyProject
? /bootstrapModule\([a-zA-Z]+\)\./
: /bootstrapModuleFactory\([a-zA-Z]+\)\./;

await ng('build', '--prod');
await expectFileToExist(join(process.cwd(), 'dist'));
// Check for cache busting hash script src
await expectFileToMatch('dist/test-project/index.html', /main-es5\.[0-9a-f]{20}\.js/);
await expectFileToMatch('dist/test-project/index.html', /main-es2015\.[0-9a-f]{20}\.js/);
await expectFileToMatch('dist/test-project/index.html', /styles\.[0-9a-f]{20}\.css/);
await expectFileToMatch('dist/test-project/3rdpartylicenses.txt', /MIT/);

const indexContent = await readFile('dist/test-project/index.html');
const mainES5Path = indexContent.match(/src="(main-es5\.[a-z0-9]{0,32}\.js)"/)[1];
const mainES2015Path = indexContent.match(/src="(main-es2015\.[a-z0-9]{0,32}\.js)"/)[1];

// Content checks
await expectFileToMatch(`dist/test-project/${mainES5Path}`, bootstrapRegExp);
await expectFileToMatch(`dist/test-project/${mainES2015Path}`, bootstrapRegExp);

// Size checks in bytes
if (ivyProject) {
verifySize(mainES5Path, 147789);
verifySize(mainES2015Path, 130153);
} else {
verifySize(mainES5Path, 155523);
verifySize(mainES2015Path, 135394);
}

// Check that the process didn't change local files.
await expectGitToBeClean();
}