Angular 6 app with angular library: `ng build` works but `ng build --prod` throws "ERROR in ./src/app/app.component.ngfactory.js"

[netpoe]

Bug Report or Feature Request (mark with an x)

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

Area

- [x] devkit
- [ ] schematics

Versions

node v8.10.0
npm 6.1.0
macOS High Sierra
"@angular/core": "^6.0.3",
"@angular/cli": "~6.0.8",

Repro steps

I created an angular library ng generate library common-lib --prefix=canyalib

Added these components and services to the library module

Exported them in the public_api.ts

Used the library components successfully in the project app

The CommonLibModule is imported in the app.module.ts

I run ng serve and ng build without errors. But when I run ng serve --prod or ng build --prod. The build fails after the 92% ... UglifyTask :

The log given by the failure

ERROR in ./dist/common-lib/canyaio-common-lib.ngfactory.js
Module not found: Error: Can't resolve '@canyaio/common-lib' in '/Users/GustavoIbarra/Projects/Angular/canya-common/dist/common-lib'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve '@canyaio/common-lib' in '/Users/GustavoIbarra/Projects/Angular/canya-common/src/app'
ERROR in ./src/app/app.component.ngfactory.js
Module not found: Error: Can't resolve '@canyaio/common-lib' in '/Users/GustavoIbarra/Projects/Angular/canya-common/src/app'

Desired functionality

This error won't let me run the app with library modules in a production environment.

Mention any other details that might be useful

If I import the packaged library in an external Angular 6 application, the same happens: ng serve or ng build lets the app run without problems. ng serve --prod or ng build --prod fails.

[netpoe]

After adding the encapsulation property to one of the library components, I managed to make it work:

import { Component, OnInit, ViewEncapsulation, Input } from '@angular/core';

@Component({
  selector: 'canyalib-footer',
  templateUrl: './footer.component.html',
  styleUrls: ['./footer.component.css'],
  encapsulation: ViewEncapsulation.Native,
})
export class FooterComponent implements OnInit {

Now the ng build --prod returns no errors.

Please see #11394 . I'm using this library in an external Angular 6 application and even though this build works as expected. It won't work on an external app.

[alan-agius4]

I have tried this and I cannot replicate any issue.

Steps I did,

1. Clone https://github.com/canyaio/Common
2. npm install
3. Remove all ViewEncapsulation.Native
4. ng build common-lib
5. ng build --prod

Output;

Alans-iMac:Common alan$ ng build common-lib
Building Angular Package
Building entry point '@canyaio/common-lib'
Rendering Stylesheets
Rendering Templates
Compiling TypeScript sources through ngc
Bundling to FESM2015
Bundling to FESM5
Bundling to UMD
Minifying UMD bundle
Copying declaration files
Writing package metadata
Removing scripts section in package.json as it's considered a potential security vulnerability.
Built @canyaio/common-lib
Built Angular Package!
- from: /Users/alan/git/Common/projects/common-lib
- to:   /Users/alan/git/Common/dist/common-lib
Alans-iMac:Common alan$ ng build --prod

Date: 2018-06-29T15:38:58.467Z
Hash: a6b418e2c27ccdc9ac10
Time: 41160ms
chunk {scripts} scripts.a8d156b92ea2ded28ebf.js (scripts) 13.2 kB  [rendered]
chunk {0} runtime.a66f828dca56eeb90e02.js (runtime) 1.05 kB [entry] [rendered]
chunk {1} styles.9e3ca50e8b8e482de370.css (styles) 75 kB [initial] [rendered]
chunk {2} polyfills.2f4a59095805af02bd79.js (polyfills) 59.6 kB [initial] [rendered]
chunk {3} main.20bdf776bfb60813d771.js (main) 635 kB [initial] [rendered]

[alan-agius4]

Can you check if this has the same effect

npm run ng build -- --prod

[netpoe]

@alan-agius4 thanks.

This build is working as expected now.

Would this library work for child modules inside an external Angular 6 app?

I'm having trouble with an Angular 6.0.7 app that uses the packaged library. This app has multiple modules

However, when I use the same library in an app with just the app.module.ts, it works 🤔

Am I missing something in order to use the library inside child modules?
https://github.com/canyaio/Common/tree/master/projects/common-lib/src

[alan-agius4]

There shouldn’t be any difference using this with multiple modules. Since the issue is now resolved. Please close the issue. Thanks

…

On Fri, 29 Jun 2018 at 18:12, Gus ***@***.***> wrote: @alan-agius4 <https://github.com/alan-agius4> thanks. This build is working as expected now. Would this library work for child modules inside an external Angular 6 app? I'm having trouble with an Angular 6.0.7 app that uses the packaged library. This app has multiple modules However, when I use the same library in an app with just the app.module.ts, it works 🤔 — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#11392 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AQv-WriJ6EWnuiTtp3NQbAVnBO6EVTxyks5uBlIFgaJpZM4U6i5F> .

[netpoe]

Just for future reference, I made it work by rm -rf node_modules and npm install again.

Seems like a cache issue or something

[daniel-nagy]

Incase someone else lands here, I had the same issue but my problem was I prefixed the path with an @ in my tsconfig.json file. Development builds worked find but when building for production I got the following error:

ERROR in ./dist/my-library/my-library.ngfactory.js
Module not found: Error: Can't resolve 'my-library' in '/path/to/MyWorkSpace/dist/my-library'
ERROR in ./src/app/app.module.ngfactory.js
Module not found: Error: Can't resolve 'my-library' in '/path/to/MyWorkSpace/src/app'

As you can see, the generated factory classes are looking for my-library, not @my-library. I just removed the @ from my path mappings and it built fine.

[alisha42]

i have encountered same issue. Check your aot build of library. Check its metadata.json file, importAs:"libname", it should be "@libname". that why ngfactory.js searching for "libname" rather than "@libname".

so solution is change package.json of your library. 'name' property should be "@libname".

[tmakin]

After hours messing about with this I found this article stating that the local library package needs to be installed as well as being aliased in tsconfig.json. This step is missing from the current cli docs.
https://medium.com/@SirMaxxx/angular-6-creating-a-shareable-control-library-6a27f0ebe5c2

The author mentions that the local install can cause problems with npm install next time you perform a clean checkout of the repo, To get around this I used npm install file:dist/mylibrary --no-save to create the link without touching package.json.

[affilnost]

I had the the same problem. I fixed it by using ng-packagr v3.0.3 instead of v2.4.5 when building the npm-package.

[mal90]

I fixed this issue by adding the @libname path in the tsconfig.json , under "path" key

[vimalans]

Thanks @daniel-nagy
I encountered this issue and got it resolved by adding another path in tsconfig.json.
ngfactory is looking for the name defined in library's package.json. It could be different from the original name used to create the library using angular cli.
matching the path like below resolved the issue (@my-repo/my-lib is the package name defined in library package.json).

"paths": {
      "my-lib": [
        "dist/my-lib"
      ],
      "@my-repo/my-lib": [
        "dist/my-lib"
      ],
      "my-lib/*": [
        "dist/my-lib/*"
      ]
    }

[subodhkumar]

@vimalans thanks... the solution worked for me as well with the similar error...Angular 7