Angular-cli: Not dropping @angular compiler.es.5.js from my vendor bundle

[rustylw]

• [x ] bug report -> please search issues before submitting
• [ ] feature request

Versions.

@angular/cli: 1.0.1
node: 6.9.2
os: win32 x64
@angular/animations: 4.0.3
@angular/common: 4.0.3
@angular/core: 4.0.3
@angular/forms: 4.0.3
@angular/http: 4.0.3
@angular/platform-browser: 4.0.3
@angular/platform-browser-dynamic: 4.0.3
@angular/platform-server: 4.0.3
@angular/router: 4.0.3
@angular/compiler: 4.0.3
@angular/compiler-cli: 4.0.3
@angular/cli: 1.0.1

Repro steps.

npm run build where this is in package.json:
"scripts": {
"build": "node --max_old_space_size=8192 node_modules/webpack/bin/webpack --progress --config ./webpack.config --env=prod --profile --colors",
"build:dev": "node --max_old_space_size=8192 node_modules/webpack/bin/webpack --progress --config ./webpack.config --env=dev --profile --colors",
}

The log given by the failure.

No failure, but when I run source-map-explorer dist\vendor.bundle.js, I see a 965KB payload for @angular/compiler

I have 5 lazy loaded modules (all loading correctly), and AOT is definitely working on my main bundle since my app load time went from 3.5 seconds to 1 second when I enabled AOT.

Desired functionality.

0 MB for @angular/compiler

Mention any other details that might be useful.

When I run the following command, the compiler is removed:
node -max_old_space_size=8192 node_modules\@angular\cli\bin\ng build --aot

Relevant info from my webpack.config.js:
"entry": {
"main": [
"./src/main.ts"
],
"polyfills": [
"./src/polyfills.ts"
],
"vendor": [
"./src/vendor.ts"
],
}

plugins = [
new NoEmitOnErrorsPlugin(),
new GlobCopyWebpackPlugin({
"patterns": [
"assets/images",
isProd ? "assets/scripts/yFiles.lib/production-license.js" : "assets/scripts/yFiles.lib/license.js",
"favicon.ico",
"web.config"
],
"globOptions": {
"cwd": path.join(process.cwd(), "src"),
"dot": true,
"ignore": "**/.gitkeep"
}
}),
new ProgressPlugin(),
new HtmlWebpackPlugin({
"template": "./src/index.html",
"filename": "./index.html",
"hash": false,
"inject": true,
"compile": true,
"favicon": false,
"minify": false,
"cache": true,
"showErrors": true,
"chunks": "all",
"excludeChunks": [],
"title": "Monitor App",
"xhtml": true,
"chunksSortMode": function sort(left, right) {
let leftIndex = entryPoints.indexOf(left.names[0]);
let rightindex = entryPoints.indexOf(right.names[0]);
if (leftIndex > rightindex) {
return 1;
}
else if (leftIndex < rightindex) {
return -1;
}
else {
return 0;
}
}
}),
new BaseHrefWebpackPlugin({}),
new CommonsChunkPlugin({
"name": "inline",
"minChunks": null
}),
new CommonsChunkPlugin({
"name": "vendor",
"minChunks": (module) => module.resource && module.resource.startsWith(nodeModules),
"chunks": [
"main"
]
}),
new ExtractTextPlugin({
"filename": "[name].bundle.css",
"disable": true
}),
new LoaderOptionsPlugin({
"sourceMap": false,
"options": {
"postcss": [
autoprefixer(),
postcssUrl({
"url": (URL) => {
// Only convert root relative URLs, which CSS-Loader won't process into require().
if (!URL.startsWith('/') || URL.startsWith('//')) {
return URL;
}
if (deployUrl.match(/:\/\//)) {
// If deployUrl contains a scheme, ignore baseHref use deployUrl as is.
return ${deployUrl.replace(/\/$/, '')}${URL};
}
else if (baseHref.match(/:\/\//)) {
// If baseHref contains a scheme, include it as is.
return baseHref.replace(/\/$/, '') +
/${deployUrl}/${URL}.replace(/\/\/+/g, '/');
}
else {
// Join together base-href, deploy-url and the original URL.
// Also dedupe multiple slashes into single ones.
return /${baseHref}/${deployUrl}/${URL}.replace(/\/\/+/g, '/');
}
}
})
],
"sassLoader": {
"sourceMap": false,
"includePaths": []
},
"lessLoader": {
"sourceMap": false
},
"context": ""
}
}),
new AotPlugin({
"mainPath": "main.ts",
"hostReplacementPaths": {
"environments/environment": environmentFiles[env]
},
"exclude": [],
"tsConfigPath": "src/tsconfig.app.json",
"skipCodeGeneration": false
}),
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false,
screw_ie8: true,
conditionals: true,
unused: true,
comparisons: true,
sequences: true,
dead_code: true,
evaluate: true,
if_return: true,
join_vars: true,
drop_console: true
},
output: {
comments: false,
},
sourceMap: false
})
];

ventor.ts:
// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/router';
import '@angular/http';
import '@angular/forms';
import '@angular/animations';

// RxJS
import 'rxjs';

// moment
import 'moment';

// ng2-bootstrap
import 'ng2-bootstrap';

// highcharts
import 'angular2-highcharts/dist/HighchartsService'

[rustylw]

Well, I also took a look at the main.bundle.js in source-map-explorer and it had duplicates of all the stuff in the vendor bundle (with the exception of the compiler not being present). So, I just removed vendor from the webpack config file. Problem solved for now.

[rustylw]

BTW, I thought the CommonsChunkPlugin would prevent the duplicates mentioned above.

[andrewpmontgomery]

For anyone who lands on this bug, the solution (for me) was to remove the line:
import "@angular/platform-browser-dynamic";
from vendor.ts

[RickyJiao]

@andrewpmontgomery Once I removed the line import "@angular/platform-browser-dynamic"; from vendor.ts, webpack will bundle compiler.es.5.js into main.js instead of vendor.js. How could we completely remove the compiler.es.5.js from front end? Any ideas are appreciated!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}