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

netpoe · 2018-06-27T23:46:37Z

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.

The text was updated successfully, but these errors were encountered:

netpoe · 2018-06-28T02:52:40Z

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 · 2018-06-29T15:42:08Z

I have tried this and I cannot replicate any issue.

Steps I did,

Clone https://github.com/canyaio/Common
npm install
Remove all ViewEncapsulation.Native
ng build common-lib
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 · 2018-06-29T15:46:53Z

Can you check if this has the same effect

npm run ng build -- --prod

netpoe · 2018-06-29T16:12:19Z

@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 · 2018-06-29T17:14:30Z

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 · 2018-06-29T17:17:46Z

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 · 2018-07-10T22:24:45Z

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 · 2018-07-19T07:34:20Z

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 · 2018-08-27T09:02:33Z

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 · 2018-09-26T19:30:23Z

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 · 2018-10-30T07:41:24Z

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

vimalans · 2018-11-17T02:50:13Z

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 · 2019-01-04T10:59:52Z

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

nickofthyme · 2019-01-09T22:06:11Z

Also see this post #10643 (comment)

gmerabishvili · 2019-02-02T11:11:48Z

Any solution for that issue please?

hari1928 · 2019-02-18T05:51:05Z

These is another way to making build ,
ng build --prod --base-href "PATH OF SERVER" --aot=false --build-optimizer=false

patha like http://demo.com/professionals/admin/

subodhkumar · 2019-02-18T06:18:22Z

@hari1928 thats almost the same as dev build. The expectation is it to work on Prod/AOT build

subodhkumar · 2019-02-18T08:48:03Z

To All, i think this issue is replicable even in a sample project created using CLI

Steps | All using Ng CLI
Add a proj
Add a couple of libraries to the project.
Do a Ng Build --prod

WORKS FINE

Now rename the library entries with alias names & have the paths for aliases resolved in the tsConfig.
eg. import {} from 'library1' to import {} from '@my/library'

Now, 'ng build' will work fine but 'ng build --prod' fails.

Happy to know if there is something missing/incorrect in the above steps.

alhilali · 2019-02-20T17:11:51Z

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/*"
      ]
    }

I was able to resolve my issue bu going into *.metadata.json file of that library and making sure "importAs" value is set to the new alias. I'm not sure where is this pulled from? Name tags in package.json is updated correctly.

andrewantar · 2019-03-18T22:33:41Z

Still getting this error despite trying every proposed solution

subodhkumar · 2019-03-19T04:43:25Z

@andrewantar ... Can you please share the error, from what i experienced...one of the above should fix the issues...
try the build with --verbose option to get the issue in more detail...

goresc · 2019-04-19T19:10:49Z

I had the same issue with Angular 7. "ng build" was fine but "ng build --prod" failed on 2 files saying it couldn't find the imported @module, even though that same @module was imported on several other files just fine. It turned out removing unused interfaces pulled from the @module fixed the issue. It seems a mix of used and unused interfaces causes the import to fail (with a bad message about the whole file not being found) -- It didn't complain if all imported items were unused, precompiler probably just removed the entire reference. Also, this was a named @module that just exported Interfaces. Other "normal" unused references from other modules were ignored.

meysamsahragard · 2019-05-22T10:15:13Z

I resolve this error by using the followed command, after building the library:
npm install dist/libraryName --save
"dist" is the directory of the library.

JahyrLopez · 2019-06-26T20:10:19Z

help I have a problem problem mark me this error when I put the command
ng build --prod

Date: 2019-06-26T19:47:29.429Z
Hash: 47649eb13e262d7eaef3
Time: 45551ms
chunk {0} runtime-es5.741402d1d47331ce975c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main-es5.7c04bb8524a34ea08589.js (main) 828 kB [initial] [rendered]
chunk {2} polyfills-es5.b8d6dd293b73bbb8581d.js (polyfills) 132 kB [initial] [rendered]
chunk {scripts} scripts.000eefc49a6f20ab379c.js (scripts) 607 kB [entry] [rendered]

ERROR in scripts.000eefc49a6f20ab379c.js from Terser
Unexpected character '@' [scripts.000eefc49a6f20ab379c.js:17652,1]

JahyrLopez · 2019-06-26T22:42:21Z

please help help

leparfait · 2019-07-30T16:24:36Z

help I have a problem problem mark me this error when I put the command
ng build --prod

Date: 2019-06-26T19:47:29.429Z
Hash: 47649eb13e262d7eaef3
Time: 45551ms
chunk {0} runtime-es5.741402d1d47331ce975c.js (runtime) 1.41 kB [entry] [rendered]
chunk {1} main-es5.7c04bb8524a34ea08589.js (main) 828 kB [initial] [rendered]
chunk {2} polyfills-es5.b8d6dd293b73bbb8581d.js (polyfills) 132 kB [initial] [rendered]
chunk {scripts} scripts.000eefc49a6f20ab379c.js (scripts) 607 kB [entry] [rendered]

ERROR in scripts.000eefc49a6f20ab379c.js from Terser
Unexpected character '@' [scripts.000eefc49a6f20ab379c.js:17652,1]

I have same error please someone can help us ???

angular-automatic-lock-bot · 2019-09-09T19:41:23Z

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

clydin added the devkit/build-angular:library label Jun 28, 2018

netpoe closed this as completed Jun 29, 2018

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 9, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

netpoe commented Jun 27, 2018

netpoe commented Jun 28, 2018

alan-agius4 commented Jun 29, 2018 •

edited

Loading

alan-agius4 commented Jun 29, 2018

netpoe commented Jun 29, 2018 •

edited

Loading

alan-agius4 commented Jun 29, 2018 via email

netpoe commented Jun 29, 2018

daniel-nagy commented Jul 10, 2018

alisha42 commented Jul 19, 2018

tmakin commented Aug 27, 2018 •

edited

Loading

affilnost commented Sep 26, 2018

mal90 commented Oct 30, 2018

vimalans commented Nov 17, 2018 •

edited

Loading

subodhkumar commented Jan 4, 2019

nickofthyme commented Jan 9, 2019

gmerabishvili commented Feb 2, 2019

hari1928 commented Feb 18, 2019 •

edited

Loading

subodhkumar commented Feb 18, 2019

subodhkumar commented Feb 18, 2019

alhilali commented Feb 20, 2019

andrewantar commented Mar 18, 2019

subodhkumar commented Mar 19, 2019

goresc commented Apr 19, 2019 •

edited

Loading

meysamsahragard commented May 22, 2019

JahyrLopez commented Jun 26, 2019

JahyrLopez commented Jun 26, 2019

leparfait commented Jul 30, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

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

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

Comments

netpoe commented Jun 27, 2018

Bug Report or Feature Request (mark with an x)

Area

Versions

Repro steps

The log given by the failure

Desired functionality

Mention any other details that might be useful

netpoe commented Jun 28, 2018

alan-agius4 commented Jun 29, 2018 • edited Loading

alan-agius4 commented Jun 29, 2018

netpoe commented Jun 29, 2018 • edited Loading

alan-agius4 commented Jun 29, 2018 via email

netpoe commented Jun 29, 2018

daniel-nagy commented Jul 10, 2018

alisha42 commented Jul 19, 2018

tmakin commented Aug 27, 2018 • edited Loading

affilnost commented Sep 26, 2018

mal90 commented Oct 30, 2018

vimalans commented Nov 17, 2018 • edited Loading

subodhkumar commented Jan 4, 2019

nickofthyme commented Jan 9, 2019

gmerabishvili commented Feb 2, 2019

hari1928 commented Feb 18, 2019 • edited Loading

subodhkumar commented Feb 18, 2019

subodhkumar commented Feb 18, 2019

WORKS FINE

alhilali commented Feb 20, 2019

andrewantar commented Mar 18, 2019

subodhkumar commented Mar 19, 2019

goresc commented Apr 19, 2019 • edited Loading

meysamsahragard commented May 22, 2019

JahyrLopez commented Jun 26, 2019

JahyrLopez commented Jun 26, 2019

leparfait commented Jul 30, 2019

angular-automatic-lock-bot bot commented Sep 9, 2019

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

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

Bug Report or Feature Request (mark with an `x`)

alan-agius4 commented Jun 29, 2018 •

edited

Loading

netpoe commented Jun 29, 2018 •

edited

Loading

tmakin commented Aug 27, 2018 •

edited

Loading

vimalans commented Nov 17, 2018 •

edited

Loading

hari1928 commented Feb 18, 2019 •

edited

Loading

goresc commented Apr 19, 2019 •

edited

Loading