Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

No Directive annotation found on when working with NPM linked modules #1514

zackarychapple opened this issue Aug 2, 2016 · 9 comments


Copy link

@zackarychapple zackarychapple commented Aug 2, 2016

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.


This comment has been minimized.

Copy link

@MarkChrisLevy MarkChrisLevy commented Aug 3, 2016

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


This comment has been minimized.

Copy link

@adamduren adamduren commented Aug 9, 2016

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


This comment has been minimized.

Copy link

@vujita vujita commented Aug 12, 2016

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?


This comment has been minimized.

Copy link

@filipesilva filipesilva commented Aug 19, 2016

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.


This comment has been minimized.

Copy link

@christian-laakmann christian-laakmann commented Aug 19, 2016

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:


This comment has been minimized.

Copy link

@snehasis snehasis commented Sep 26, 2016

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 ?


This comment has been minimized.

Copy link

@filipesilva filipesilva commented Oct 5, 2016

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.

@filipesilva filipesilva closed this Oct 5, 2016

This comment has been minimized.

Copy link

@adamduren adamduren commented Oct 5, 2016

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.


This comment has been minimized.

Copy link

@angular-automatic-lock-bot angular-automatic-lock-bot bot commented Sep 6, 2019

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.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
None yet
7 participants
You can’t perform that action at this time.