Angular-cli: Chunks are not getting generated with @ngtools/webpack

[krischandra]

Versions

Angular CLI: 1.5.0
Node: 6.10.1
Angular 5
@ngtools/webpack version: 1.8.2

Webpack.common.js
module: {
rules: [{
loader: '@ngtools/webpack',
options: {
configFileName: 'tsconfig.webpack.json',
}
}],
plugins: [{
new AngularCompilerPlugin({
"sourceMap": true,
"tsConfigPath": helpers.root('tsconfig.webpack.json'),
"skipCodeGeneration": true,
"compilerOptions": {}
}),
}]
}
Actual result: Chunks is not getting generated for lazy loaded modules
Expected Result: Should generate chunks

[KrakenTyio]

pls post tsconfig.webpack.json
maybe there is problem

[krischandra]

{
"compilerOptions": {
"outDir": "./compiled",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"baseUrl": ".",
"paths": {
"@root/:[
"src/root/"
],
"@main/": [
"src/main/"
],
"@test/": [
"src/test/"
],
"@styles/": [
"src/style-sheets/"
]
},
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2015",
"dom"
]
},
"exclude": [
"node_modules",
],
"angularCompilerOptions": {
"genDir": "./compiled",
"skipMetadataEmit": true
},
"compileOnSave": false,
"buildOnSave": false,
"atom": {
"rewriteTsconfig": false
}
}

Do i need to use @angularclass/hmr-loader, ng-router-loader, angular2-template-loader while using
ngtools/webpack to generate chunks?. If so what should be the order do we need to follow?

Thanks in advance

[KrakenTyio]

tsconfig looks good.
Extra routing template loaders are no needed for new ngtools.

Maybe you have wrong defined routers.

[EmaGht]

Actually having the same problem here...

webpack:

var webpack = require("webpack");
var path = require("path");
var clone = require("js.clone");
var merge = require("webpack-merge");
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var ContextReplacementPlugin = require("webpack/lib/ContextReplacementPlugin");
var TsConfigPathsPlugin = require("awesome-typescript-loader").TsConfigPathsPlugin;
var CheckerPlugin = require("awesome-typescript-loader").CheckerPlugin;
var DefinePlugin = require("webpack/lib/DefinePlugin");
var CopyWebpackPlugin = require("copy-webpack-plugin");
var isDevBuild = process.env.ASPNETCORE_ENVIRONMENT === "Production" ? false : true;
var isAotBuild = false;
var AngularCompilerPlugin = require('@ngtools/webpack').AngularCompilerPlugin;

module.exports = (env) => {

  if (env && env.prod)
    isDevBuild = false;

  if (env && env.aot) {
    isAotBuild = true;
  }
  var distDirectory = "./wwwroot/dist";
  var defaultLoaders = ["awesome-typescript-loader?silent=true", "angular2-template-loader", "angular-router-loader"];

  var sharedConfig = {
    resolve: {
      extensions: [".js", ".ts", ".css", ".scss", ".json"]
    },

    stats: { modules: false },
    context: __dirname,

    output: {
      filename: "[name].js",
      publicPath: "/dist/"
    },

    module: {
      loaders: [
        { test: /\.ts$/, use: isDevBuild ? defaultLoaders : isAotBuild ? '@ngtools/webpack' : defaultLoaders },
        { test: /\.html$/, use: "raw-loader" },
        { test: /\.css/, use: "raw-loader" },
        { test: /\.scss$/, use: ["raw-loader", "sass-loader"] },
        { test: /initial\.scss$/, use: ExtractTextPlugin.extract({ fallback: "style-loader", use: "css-loader!sass-loader?sourceMap" }) },
        { test: /\.json$/, use: "json-loader" },
        { test: /\.woff(2)?(\?v=.+)?$/, use: "url-loader?limit=10000&mimetype=application/font-woff&name=fonts/[name].[ext]" },
        { test: /\.(ttf|eot|svg)(\?v=.+)?$/, use: "file-loader?&name=fonts/[name].[ext]" },
        { test: /bootstrap\/dist\/js\/umd\//, use: "imports?jQuery=jquery" },
        { test: /\.(png|jpg|gif)$/, use: "file-loader?limit=8192&name=assets/img/[name].[ext]" }
      ]
    },

    plugins: [ new CheckerPlugin() ]
  };

  var clientConfig = setTypeScriptAlias(require("./tsconfig.json"), {

    entry: {
      'main-client': "./Client/bootstrap-client.ts"
    },

    output: {
      path: path.join(__dirname, distDirectory),
      filename: "[name].js",
      publicPath: "/dist/"
    },

    plugins: [
      new DefinePlugin({ 'process.env': { 'development': true } }),
      new ContextReplacementPlugin(
        // The (\\|\/) piece accounts for path separators in *nix and Windows
        /angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/,
        root("./Client")
      ),
      new TsConfigPathsPlugin({ tsconfig: "tsconfig.json" }),
      new webpack.DllReferencePlugin({
        context: __dirname,
        manifest: require("./wwwroot/dist/vendor-manifest.json")
      })

    ].concat(isDevBuild ?
      [
        new webpack.SourceMapDevToolPlugin({ filename: "[file].map", moduleFilenameTemplate: path.relative(distDirectory, "[resourcePath]") })
      ] :
      [
        new webpack.optimize.UglifyJsPlugin()
      ]
      ).concat(isAotBuild ?
        [
          new AngularCompilerPlugin({
            tsConfigPath: './tsconfig.json',
            entryModule: path.join(__dirname, 'Client/app/platform-modules/app.browser.module#AppBrowserModule'),
            exclude: ['./**/*.server.ts']
          })
        ] :
        [])
  });

  // Merge with Shared
  var mergedClientConfig = merge(sharedConfig, clientConfig);

  return [mergedClientConfig];
};

function setTypeScriptAlias(tsConfig, config) {
  var newConfig = clone(config);
  newConfig = newConfig || {};
  newConfig.resolve = newConfig.resolve || {};
  newConfig.resolve.alias = newConfig.resolve.alias || {};
  var tsPaths = tsConfig.compilerOptions.paths;
  for (var prop in tsPaths) {
    newConfig.resolve.alias[prop] = root(tsPaths[prop][0]);
  }
  return newConfig;
}

function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [__dirname].concat(args));
}

scripts i use to compile:

    "build:dev": "webpack --config webpack.config.vendor.js --progress && webpack --config webpack.config.js --progress",

    "build:prod": "webpack --config webpack.config.vendor.js --progress --env.prod && webpack --config webpack.config.js --env.prod --progress",

    "build:prod:aot": "webpack --config webpack.config.vendor.js --progress --env.prod && webpack --config webpack.config.js --env.prod --env.aot --progress"

results for :dev are

results for :prod are:

results for prod:aot are...

As you can see it's not generating the chunks in AOT mode.
Strange thing is AOT compilation throws no error whatsoever...

[filipesilva]

There was a similar issue (https://github.com/angular/angular-cli/issues/8597) where the problem was ContextReplacementPlugin. If that's not the problem in your case, could you set up a repro that I can clone to see the problem please?

[EmaGht]

Actually i was following the thread you linked aswell.
In my case, tho, the problem was this:

new webpack.DllReferencePlugin({ context: __dirname, manifest: require("./wwwroot/dist/vendor-manifest.json") })

I'm not really sure about what it does... i just took it from another template a couple months ago, but that was my deal-breaker.
Thanks for your interest!!

[filipesilva]

@EmaGht the @ngtools/webpack plugin is unfortunately not compatible with the DLLPlugin: https://github.com/angular/angular-cli/issues/4565

[sjumble]

Hey @EmaGht have you resolved this issue, if Yes then can you please let us know the solutions.

[EmaGht]

@sjumble I just excluded the DllReference plugin from the plugin chain during aot build, you can see my webpack configuration in my rant about the current state of node's package manager here: https://github.com/yarnpkg/yarn/issues/2088

[alan-agius4]

Closing as no re-production was provided.

If the problem persists after upgrading, please open a new issue, provide a simple repository reproducing the problem, and describe the difference between the expected and current behavior.

[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._}