No Directive annotation found on when working with NPM linked modules

[zackarychapple]

When trying to combine development of a npm linked component library and the latest webpack build there is a potential to get the error No Directive annotation found on MyModule. This is due to the fact that Webpack is picking up @angular/core in the node_modules directory of the component library in addition to the modules in the cli generated application.

Desired behavior would be for the CLI to ignore packages of the same version regardless of location.

[MarkChrisLevy]

I have the same problem. Any advice how to solve it?

[adamduren]

This error threw me for a loop. Very annoying but my workaround is to npm install localPath instead of npm link package-name.

[vujita]

I ran into this problem too. I believe it is cause reflect-metadata isn't getting pulled in correctly, so it isn't reading the annotations as expected. Peer dependancy issue

The only way I can seem to get around this issue is a weird npm dance of sorts.

rm -rf node_modules/package-name
npm install
npm link package-name
npm start

Sometimes, I would have to do the same for to relink to the package name.

When I used the install by localPath, it would not pick changes to the files. I would have to run npm install localpath again. I'm thinking of setting a small gulp task for this to watch. Does anyone have another thought?

[filipesilva]

I don't think there is anything we CAN do about this scenario really. It's a NPM issue of sorts.

Basically, if you link a package, NPM doesn't dedupe it's dependencies... which is what you want really, otherwise you can't continue development on the linked package.

In the Angular 2 case, it DOES mean that there are two sets of @angular/core etc installed. The Angular 2 your app imports is not the same as the Angular 2 that your linked lib loads. I might be the same version but that doesn't matters. They're just not the same objects in memory.

And that messes up dependency injection. It messes it up bad.

I'll leave the issue open for now to see if someone comes up with more useful information about this topic. But, unless my understanding of the issue is severely flawed, I don't see this as a CLI issue.

[christian-laakmann]

One solution that worked for me in prototyping, was explicitly listing all relevant modules within the alias element of the webpack config.

Maybe this could be made configurable?

This might help as well: https://github.com/thebeansgroup/webpack-link

[snehasis]

Same here, if I use it directly with npm link it gives me "No Directive annotation found on XYZ" .
And if I copy the dist folder of my Package and Put it under the same node_modules it works fine.

What is the suggested way to solve this issue ?

[filipesilva]

Closing as it's not a CLI issue, and nothing else came up so far. The CLI is not going to alias modules to prevent these problems as they are npm considerations.

[adamduren]

It seems like the best solution when developing a component is to have a demo page and to not rely on developing the extension in an external application. If that is needed a develop could probably setup a gulp task or something to watch and copy the component files automatically on change instead of relying on linking. Running npm install each time is the most comprehensive method but at a great expense to the time increase on the feedback cycle.

[angular-automatic-lock-bot]

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