Angular CLI 1.2.6 Build AOT Fail

[olivierscheffler]

Hi,

I create a pacakge with your generator and publish it to an local artifactory. I can import it, use it in dev mode, but I try to do ng build --prod to build in aot mode I have some error prompt. It say that Cannot Find oel-gabarits on some component of my application and error inside the nodes_modules...

Here's a copy paste of the log in my console

ng build --prod Hash: 16a5b46d4ed9799a9444 Time: 15042ms chunk {0} polyfills.86c0b4d44f70fee7f41e.bundle.js (polyfills) 255 kB {4} [initial] [rendered] chunk {1} main.3c31870d629bceebe9f8.bundle.js (main) 256 kB {3} [initial] [rendered] chunk {2} styles.acbe024ab0f7dafcc3aa.bundle.css (styles) 69 bytes {4} [initial] [rendered] chunk {3} vendor.52c64a0afab9cdf1414c.bundle.js (vendor) 1.31 MB [initial] [rendered] chunk {4} inline.46e0b4bbe8a4c486211c.bundle.js (inline) 0 bytes [entry] [rendered]

ERROR in C:/Desjardins/dev/FondsDesjardins/fonds-desjardins-extranet/formulaires/choix-investissement-helios2/src/$$_gendir/app/solution-investissement/solution-investissement.component.ngfactory.ts (12,21): Cannot find module 'oel-gabarits'.

ERROR in C:/Desjardins/dev/FondsDesjardins/fonds-desjardins-extranet/formulaires/choix-investissement-helios2/src/$$_gendir/node_modules/oel-gabarits-temp/oel-gabarits.ngfactory.ts (10,21): Cannot find module 'oel-gabarits'.

ERROR in C:/Desjardins/dev/FondsDesjardins/fonds-desjardins-extranet/formulaires/choix-investissement-helios2/src/$$_gendir/app/app.module.ngfactory.ts (26,22): Cannot find module 'oel-gabarits'.

ERROR in C:/Desjardins/dev/FondsDesjardins/fonds-desjardins-extranet/formulaires/choix-investissement-helios2/src/$$_gendir/app/app.module.ngfactory.ts (26,22): Cannot find module 'oel-gabarits'.

ERROR in C:/Desjardins/dev/FondsDesjardins/fonds-desjardins-extranet/formulaires/choix-investissement-helios2/src/$$_gendir/app/solution-investissement/solution-investissement.component.ngfactory.ts (12,21): Cannot find module 'oel-gabarits'.

ERROR in C:/Desjardins/dev/FondsDesjardins/fonds-desjardins-extranet/formulaires/choix-investissement-helios2/src/$$_gendir/node_modules/oel-gabarits-temp/oel-gabarits.ngfactory.ts (10,21): Cannot find module 'oel-gabarits'.

ERROR in ./src/$$_gendir/app/app.module.ngfactory.ts Module not found: Error: Can't resolve 'oel-gabarits' in 'C:\Desjardins\dev\FondsDesjardins\fonds-desjardins-extranet\formulaires\choix-investissement-helios2\src\$$_gendir\app' @ ./src/$$_gendir/app/app.module.ngfactory.ts 24:0-36 @ ./src/main.ts @ multi ./src/main.ts

ERROR in ./src/$$_gendir/app/solution-investissement/solution-investissement.component.ngfactory.ts Module not found: Error: Can't resolve 'oel-gabarits' in 'C:\Desjardins\dev\FondsDesjardins\fonds-desjardins-extranet\formulaires\choix-investissement-helios2\src\$$_gendir\app\solution-investissement' @ ./src/$$_gendir/app/solution-investissement/solution-investissement.component.ngfactory.ts 10:0-35 @ ./src/$$_gendir/app/app.module.ngfactory.ts @ ./src/main.ts @ multi ./src/main.ts

ERROR in ./src/$$_gendir/~/oel-gabarits-temp/oel-gabarits.ngfactory.ts Module not found: Error: Can't resolve 'oel-gabarits' in 'C:\Desjardins\dev\FondsDesjardins\fonds-desjardins-extranet\formulaires\choix-investissement-helios2\src\$$_gendir\node_modules\oel-gabarits-temp' @ ./src/$$_gendir/~/oel-gabarits-temp/oel-gabarits.ngfactory.ts 8:0-35 @ ./src/$$_gendir/app/solution-investissement/solution-investissement.component.ngfactory.ts @ ./src/$$_gendir/app/app.module.ngfactory.ts @ ./src/main.ts @ multi ./src/main.ts

Does someone have this issue and how to fix it ?

Thank you !

[chriszrc]

What have you named your npm module? Are you using a scoped package name by any chance?

[olivierscheffler]

Hi!

My npm.module is named oel-gabarits. If you look in the issues, I have write another one with the standard package generated by the application. I try to import like the documentation say but I have the same error...

[chriszrc]

I just dealt with a very similar error. What does your src/tsconfig.es5.json have for the angularCompilerOptions.flatModuleId

[olivierscheffler]

If I remember right I didn't change this parameter. I let the same as when it was generated.

[chriszrc]

Yup, all the same, just post that section of your src/tsconfig.es5.json file

[olivierscheffler]

Hi ! There the section you ask for : "angularCompilerOptions": { "annotateForClosureCompiler": true, "strictMetadataEmit": true, "skipTemplateCodegen": true, "flatModuleOutFile": "oel-gabarits-temp.js", "flatModuleId": "oel-gabarits-temp" },

My package is call oel-gabarits-temp. Have you an idea why when I use it in an application I have the contructor problem ?

Thanks for the help !

[chriszrc]

Hi, Right so I would guess that maybe this library started out as "oel-gabarits" and then somewhere along the line, maybe you updated to "oel-gabarits-temp". To the best of my knowledge, you are only seeing that error when running the prod build because that's when the cli is trying to do all of its fancy compilation, and looks at things like the flatmoduleid. The error indicates that it can't find a npm module with that name. I would probably do a search in your app for any references to "oel-gabarits" without the temp-

[olivierscheffler]

Hi, Yes that's right name have change. But I try with the real version of oel-gabarits and still doesn't work. If you look issue #183 I explain the same problem but with the setting of the generate library without any change... So there's something going on but I don't figure out what... So it's not a problem with oel-gabarits Wich become oel-gabarits-temp... Do you have an idea? Have you use this generator for making one of your library?

Thank you

[chriszrc]

Yes, I used it successfully to create a library for my own angular code. I've also imported the default sample library into a brand new cli generated project without any problems. I'm also using the angular cli 1.4.0 though, maybe the more recent version has fixed some problems-

[olivierscheffler]

Ok this is really strange... One of my work colleagues use it too and try to build a project with this library and still's doesn't work... I use 1.2.6 or 1.3.1... but this generator was made before so I guess it's not logical that it doesn't work actually... Do you have a place where I can see your library code? Thank you

[devshangari]

I seem to be having the same issue, but i am using a scoped package name, as i publish the package privately on npm. Do you think that could be why it isnt working for me? When i do a regular build (ng build / ng serve) it works fine, but when i try and do a production build (ng build --prod / ng serve --prod) it fails with the module not found error.

Update: adding the scope name to the flatmoduleid worked for me. Should have read the documentation better :)

[alesmit]

@devshangari it worked for me as well: when using scoped package names should be updated the flatModuleId option in the src/tsconfig.es5.json:

"angularCompilerOptions": {
  "annotateForClosureCompiler": true,
  "strictMetadataEmit": true,
  "skipTemplateCodegen": true,
  "flatModuleOutFile": "your-lib-name.js",
  "flatModuleId": "@your-scope/your-lib-name" <-- this
},