Scoped packages throw compilation errors

[jdjuan]

When I try to compile an application for production that uses a library which has an NPM scope, it throws errors and fails.

Reproduction Steps

1. Create a new library: mkdir lib, cd lib, and yo angular2-library
2. Generate a new clean angular app with angular-cli: ng new app-seed
3. Modify your library package.json (the one in src, or the dist folder) to be scoped: "name": "@aaa/lib",
4. Perform an NPM link of your library: npm link and then inside your app: npm link @aaa/lib
5. Run ng build --prod --aot and see the console error below. Commands ng serve and ng build work well.

You can also clone this repo and jump to step 3.

Error

ERROR in C:/Users/jherrera/repos/PROD-ISSUE3/app-seed/src/$$_gendir/app/app.component.ngfactory.ts (1,1): Cannot find module 'lib'.

ERROR in C:/Users/jherrera/repos/PROD-ISSUE3/app-seed/src/$$_gendir/node_modules/@aaa/lib/lib.ngfactory.ts (1,1): Cannot find module 'lib'.

ERROR in C:/Users/jherrera/repos/PROD-ISSUE3/app-seed/src/$$_gendir/app/app.module.ngfactory.ts (1,1): Cannot find module 'lib'.

ERROR in C:/Users/jherrera/repos/PROD-ISSUE3/app-seed/src/$$_gendir/app/app.module.ngfactory.ts (1,1): Cannot find module 'lib'.

ERROR in C:/Users/jherrera/repos/PROD-ISSUE3/app-seed/src/$$_gendir/app/app.component.ngfactory.ts (1,1): Cannot find module 'lib'.

ERROR in ./src/$$_gendir/app/app.module.ngfactory.ts
Module not found: Error: Can't resolve 'lib' in 'C:\Users\jherrera\repos\PROD-ISSUE3\app-seed\src\$$_gendir\app'
 @ ./src/$$_gendir/app/app.module.ngfactory.ts 23:0-31
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in ./src/$$_gendir/app/app.component.ngfactory.ts
Module not found: Error: Can't resolve 'lib' in 'C:\Users\jherrera\repos\PROD-ISSUE3\app-seed\src\$$_gendir\app'
 @ ./src/$$_gendir/app/app.component.ngfactory.ts 10:0-31
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

ERROR in C:/Users/jherrera/repos/PROD-ISSUE3/app-seed/src/$$_gendir/node_modules/@aaa/lib/lib.ngfactory.ts (1,1): Cannot find module 'lib'.

ERROR in ./src/$$_gendir/~/@aaa/lib/lib.ngfactory.ts
Module not found: Error: Can't resolve 'lib' in 'C:\Users\jherrera\repos\PROD-ISSUE3\app-seed\src\$$_gendir\node_modules\@aaa\lib'
 @ ./src/$$_gendir/~/@aaa/lib/lib.ngfactory.ts 18:0-31
 @ ./src/$$_gendir/app/app.component.ngfactory.ts
 @ ./src/$$_gendir/app/app.module.ngfactory.ts
 @ ./src/main.ts
 @ multi ./src/main.ts

Environment

• NPM: 4.5.0
• Node: 7.9.0
• Angular CLI: 1.0.0
• Generator-angular2-libary: 9.0.0
• OS: Windows 10

[jdjuan]

Nevermind I just fixed. It turns out that whenever you are creating scoped packages you want to update the package name in the package.json like this:

"name": "@aaa/lib"

AND, you also need to update flatModuleId in your tsconfig.es5.json, like this:

"flatModuleId": "@aaa/lib"

Once you do that, you have scoped packages working correctly.

PS: We can close this now, but don't you think it is worth creating a wiki page for people who want to create scoped packages with this generator? I really spend a few days trying to figure it out @jvandemo

[jvandemo]

@jdjuan — Thank you for your follow-up, Juan. Much appreciated! 🏆

I have added a section to the README with instructions and a link to this issue.

[DaveMonag]

Thanks so much for this @jdjuan ! I'd tried the same fix before but I'd made the mistake of changing the "flatModuleOutFile" to include the scope too, which stopped it from building. Anyone else that made the same mistake, ONLY change "name" and "flatModuleId", you don't need to change "flatModuleOutFile".

[jvandemo]

@DaveMonag — Thank you for your follow-up 👍

[odolha]

We still had this issue when trying to build using AOT (angular cli --prod mode) an app that's using a library generated by this even after following the guideline to update the flatModuleId.

The fix in this case was in gulp.js file - by removing the .umd suffix of the generated JS file name in the umd distribution pipe.

So for @aaa/lib the generated file should be aaa-lib.js instead of aaa-lib.umd.js for angular to build properly.

[jvandemo]

@odolha — Thank you, what error were you seeing when you used the .umd.js suffix? Thanks!

[odolha]

Sure, it was like this:

ERROR in ./src/$$_gendir/app/app.module.ngfactory.ts
Module not found: Error: Can't resolve '@aaa/lib/aaa-lib' in '\src$$_gendir\app'
@ ./src/$$_gendir/app/app.module.ngfactory.ts 21:0-58
@ ./src/main.ts
@ multi webpack-dev-server/client?http://localhost:4200 ./src/main.ts

And a bunch of other errors like this for each import of something from the module that we have.

From what I can gather, when using the --prod flag, angular/webpack tries to bundle the lib code from the prepared file node_modules/@aaa/lib/aaa-lib.js which initially was named node_modules/@aaa/lib/aaa-lib.umd.js by this library.

This occurred for Angular 2.4.10 that we still use both for our app and library. We also use an older angular-cli 1.0.0-rc.4, due to some other compatibility complications.

[jvandemo]

@odolha — Did you have a main property in your package.json that referenced the UMD bundle?

I think adding main: 'aaa-lib.umd.js' to package.json would also have solved the issue.

Would you be able to verify that? Thanks in advance!

[odolha]

@jvandemo I was also expecting this to work but to no avail... I'm not sure why angular stubbornly expects aaa-lib.js still... maybe there's something else in the context I'm missing and it's difficult to see. I'll take a closer look later.

[jvandemo]

@odolha — Thank you, feel free to let us know if you find out why it happened. Thanks!