Angular-cli: Error in chunk main - HarmonyImportDependency

[yusijs]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   Windows 10
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   angular-cli: 1.0.0-beta.11-webpack
   node: 4.3.0
   os: win32 x64
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   Create with cli (systemjs). Upgraded to webpack
4. The log given by the failure. Normally this include a stack trace and some
   more information.
   ERROR in chunk main [initial]
   [name].[chunkhash].bundle.js
   Template cannot be applied as TemplateArgument: HarmonyImportDependency
5. Mention any other details that might be useful.
   Only happens with ng serve/build -prod. Dev works fine.

---

Thanks! We'll be in touch soon.

[TheLarkInn]

Create with cli (systemjs). Upgraded to webpack

Does this mean that you were migrating an existing CLI app from the SystemJS build to Webpack build version?

[yusijs]

Yes! :)

[TheLarkInn]

Did you follow the steps from the Migration guide?
https://github.com/angular/angular-cli/blob/master/WEBPACK_UPDATE.md

Just want to rule out these steps first.

Also this is strange that you are getting this error because it pertains to an older version of the webpack 2 which may be fixed.

What does your package.json look like.

[yusijs]

I did yes.

https://gist.github.com/yusijs/66be415a41ad76cbbd19977cfbbb5d20

[TheLarkInn]

Oooo, one more thing, since this is related to HarmonyImports, this means that then the output that webpack is trying to read is ES6 related. What does the contents of your tsconfig.json look like. I wonder if you are outputting ES6 from the tsconfig target property.

[yusijs]

{
"compilerOptions": {
"declaration": false,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"lib": ["es6", "dom"],
"mapRoot": "./",
"module": "es6",
"moduleResolution": "node",
"outDir": "../dist/out-tsc",
"sourceMap": true,
"target": "es5",
"typeRoots": [
"../node_modules/@types"
],
"types": [
"jasmine"
]
}
}

[TheLarkInn]

Is this a project that I can test locally myself to see what the issue might be. I need more information to know what specifically is causing this error to happen.

[yusijs]

It would probably be a bit hard to test it - it uses a separate backend. However, build and compile should work fine I reckon. It's on a private gitlab repo though - I sent you a dm on twitter with the git info.

[mwawrusch]

I have similar issues - when building with env=prod it works fine.

[andyrue]

I'm experiencing the exact same error with ng build --prod, dev works fine. The only difference is I started this project using the webpack version, so this isn't an upgrade from systemjs.

version: beta.11-webpack2
os: OS X 10.10.5

Other Warnings:

• bunch of 'Cannot find source file' for the 3rd party library primeng.
• WARNING in polyfills.5113661bf4bd499f3401.bundle.js from UglifyJs
  Condition left of || always false [polyfills.5113661bf4bd499f3401.bundle.js:3559,63]
  Condition left of || always false [polyfills.5113661bf4bd499f3401.bundle.js:3560,62]
  Dropping side-effect-free statement [polyfills.5113661bf4bd499f3401.bundle.js:3588,21]
  Side effects in initialization of unused variable Zone [polyfills.5113661bf4bd499f3401.bundle.js:3111,5]

Other Errors:

• A number of ERROR in [default] typing errors but those shouldn't be a problem.

[yusijs]

@andyrue it's a webpack issue, think @thelarkinn is on it. :)

[TheLarkInn]

Yup I'm working on this, this is a problem with HarmonyDependencies and the DedupePlugin({}) https://github.com/webpack/webpack/issues/2644.

@filipesilva We need to remove DedupePlugin({}) for now from webpack-build-production.ts in the meantime to fix this.

The fix for this issue on webpack's side is pretty complex (because of DedupePlugin)

The optimizations are very very minimal, and as long as users don't make the mistake of importing dupes of dependencies, it shouldn't be a problem. npm dedupe can help too (for the user).

[Brocco]

Closed via #1937

[areijngoudt]

I have exact the same issue. When will the fix be available?
$ ng version
angular-cli: 1.0.0-beta.11-webpack.8
node: 5.7.1
os: darwin x64

[Chabane]

I have the same issue when I run ng build -prod

chunk {0} (main) 2.48 MB {1} [initial]
chunk {1} inline.js (inline) 0 bytes [entry] [rendered]
ERROR in chunk main [initial]
[name].[chunkhash].bundle.js
Template cannot be applied as TemplateArgument: HarmonyImportDependency
Child html-webpack-plugin for "index.html":
Asset Size Chunks Chunk Names
index.html 5.05 kB 0
chunk {0} index.html 2.58 kB [entry] [rendered]

[hoangnguyenba]

I have exact the same issue:
angular-cli: 1.0.0-beta.11-webpack.8
node: 6.4.0
os: X El Capitan
ERROR in chunk main [initial] [name].[chunkhash].bundle.js Template cannot be applied as TemplateArgument: HarmonyImportDependency Child html-webpack-plugin for "index.html": Asset Size Chunks Chunk Names index.html 3.13 kB 0 chunk {0} index.html 662 bytes [entry] [rendered]

[Kamshak]

I still get this bug on the most recent master, #1937 didn't fix it for me @Brocco

angular-cli: ba668a8
node: Node v6.5.0
OS: Win10 x64

[danbucholtz]

I am seeing this as well.

Thanks,
Dan

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