5

I recently followed this guide to learn how to create an angular library and publish it for my own use: https://medium.com/@nikolasleblanc/building-an-angular-4-component-library-with-the-angular-cli-and-ng-packagr-53b2ade0701e

After packing the library and referencing it from my own angular project, I came up with this error: NullInjectorError: No provider for NgZone.

When I try to inject NgZone in my controller, without referencing the component in my library which is also injecting it, my project works just fine. However, when I try to reference the library component in my view, it no longer works!

I've spent the whole day trying to figure this out, however there's little to no information regarding this error, and I believe it has nothing to do with NgZone but rather something i overlooked.

I'm not sure what kind of information i should provide to better troubleshoot this error, so please feel free to ask me.

Both my library and project reference Angular 5.0.0 and zone.js 0.8.12. You can find my library published on github under: https://github.com/lakylekidd/skating-library

Any help would be appreciate it, it is driving me crazy!!

Thank you in advance, Billy

Billy Vlachos
  • 93
  • 2
  • 8
  • Did you add `peerDependencies` such as `@angular/core` to `package.json` of your library? – yurzui Feb 14 '18 at 05:28
  • I did... i have this included `"peerDependencies": { "@agm/core": "^1.0.0-beta.2", "@angular/core": "^5.0.0", "lodash": "^4.17.5", "zone.js": "0.8.12" },` but i keep getting the same error. – Billy Vlachos Feb 14 '18 at 12:05
  • Did you publish your library on npm? Can I install it? – yurzui Feb 14 '18 at 12:05
  • Hello again, yes, i have published my library on npm and tested it out myself... it turns out that it works when I `npm install` as I also did some modifications which I will explain in a post. Thank you for your help! – Billy Vlachos Feb 15 '18 at 04:20

3 Answers3

2

I think I figured it out why it wasn't working.

Turns out my library had a dependency for angular 5.2 and my application had angular 5.0, so I upgraded my application to 5.2. Also, as suggested by yurzui, I added peerDependencies with all the libraries I am using. I published my library on npm and npm install ed it on my project. It works just fine.

I am not 100% sure what the issue was, but after following all these steps, the issue was gone.

Hope this helps should anyone bump into the same issue in the future.

Billy

Billy Vlachos
  • 93
  • 2
  • 8
0

Spent a lot of time on this issue:( Hope it will help somebody to save time: https://github.com/angular/angular-cli/issues/8117

Todmy
  • 1,051
  • 1
  • 8
  • 12
-1

If you are using webpack in your project, it can be solved very easily. You can specify the absolute path to your current node_modules when resolving modules. 

 resolve: {
            extensions: ['.ts', '.js'],
            modules: [helpers.root('src'),  helpers.root('node_modules')]
        },

By Default webpack is using relative path to node_module, this will cause npm linked packages using their own libs specified in their own node_modules

javaLearner
  • 963
  • 8
  • 5