Vscode-ng-language-service: Component not included in a module warning for all components not in root AppModule
Hi,
This is looking very promising, can't wait to use it!
I am however having trouble getting this to recognise components that are declared in feature modules (both lazy-loaded and not). All these components have the following warning (with red squiggles under the component decorator).
[Angular] Component 'xxxComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration
This means that in templates (the app.component.html template in the root module is the only one) in this module I can get completion etc. to work for directives that are in the same module and imported angular built-in directives. However directives from my own imported modules i get the following.
[Angular] 'app-nav' is not a known element:
1. If 'app-nav' is an Angular component, then verify that it is part of this module.
2. If 'app-nav' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.
Have i missed something or is this maybe a bug?
I am very excited to use this. It will make my angular 2 coding experience so much better and hopefully save a lot of time, so thanks!
chrissena
All 30 comments
It could be a bug but I am not sure. Can you produce a repository that reproduces this issue?
This error is generated when you include a reference to a component that is not included in the the NgModule it is declared in or one of the NgModules that is imported by its module.
The language service scans the entire project (everything included by the tsconfig.json) for @NgModule declarations and creates a dependency graph between the components and the modules. The first error is generated for components that are not declared in a module and the second is for references to components not reachable from the module the component is in.
chuckjaz
on 8 Dec 2016
Just tried in a new angular-cli project but can't seem to be able to reproduce the issue. Not sure if it's a problem that only affects projects over a certain threshold size/module structure.
The project in which I discovered the issue has 12 modules in total:
- a core module
- a shared module
- 4 feature modules (with some nesting)
- 1 root app module
- 5 routing modules (corresponding to the 4 feature modules and single root app module)
Will have a further look and play around when I get a chance to see if I can discover at what point this is reproduced.
chrissena
on 12 Dec 2016
I think this might be related to #36
petebacondarwin
on 23 Jan 2017
I'm still having the same issue with the latest version.
I have managed to narrow down one scenario that causes the bug.
In a simple solution created with the latest angular-cli, I have the following structure
- A root AppModule
- An AppComponent
- A CoreModule.
- A NavComponent
- A HomeComponent
- An AuthService
When I include the AuthSevice in the CoreModule's providers array and import the CoreModule into the AppModule I get the following errors.
The same error occurs with the HomeComponent too.
If I comment out the AuthService from the providers array in the CoreModule the errors go away.
The app works fine though.
I've uploaded the example to this repository.
Hope this helps track down the problem.
chrissena
on 11 Feb 2017
Tracked as https://github.com/angular/angular/issues/14631.
This bug will be closed when the fix for the above lands and a new release of ngls.visx is produced that includes it.
chuckjaz
on 22 Feb 2017
This has been fixed in 0.1.0
chuckjaz
on 24 Mar 2017
Still have the same problem, version 0.1.3
veldirre
on 11 Apr 2017
Just installed 0.1.3 to check out this plugin. Getting the same error on a project that's working fine.
It's also identifying is deprecated (when used for ng-bootstrap components) and should be replaced with
jshea
on 11 Apr 2017
@veldirre Can you create a separate issue and attach a way to reproduce the issue you are having? This issue has been fixed. You are probably running into a different issue that looks similar.
chuckjaz
on 12 Apr 2017
@jshea I am not sure I understand you issue. Can you open a separate issue and attach a project that reproduces the issue?
chuckjaz
on 12 Apr 2017
@chuckjaz Are there any debugging methods for investigating this _as it occurs_? None of my non-route components are recognized as included in the module declaration, but stripping down our production app to a minimal example would be very time consuming (and so far all of the toy versions I've tried to spin up haven't exhibited the problem).
I'll keep trying to make a small reproduction, but if there are any other approaches that would help a lot.
tdsmithATabc
on 12 Apr 2017
Nevermind. I stumbled upon the problem just a bit after posting: #80.
tdsmithATabc
on 12 Apr 2017
@tdsmithATabc The initial cause of original issue of this thread is fixed in the latest version 0.1.3.
However, I did notice I was still getting the same error occasionally for some components. After a bit of investigating I realised these remaining errors were being caused by another separate issue #72.
Changing references for any services etc... in the offending components to relative paths (as opposed to paths relative to the baseUrl location provided by tsconfig - the "src/" folder by default) seems to act as a workaround in the offending components. Not sure if this is the same issue you have but thought I'd mention it here.
chrissena
on 12 Apr 2017
Ah, just got you last message, nevermind.
chrissena
on 12 Apr 2017
Thanks for the tip regardless! I've had some path struggles as well, but that was because our set-up was using _project-relative_ paths, which are nice for development but terrible for pretty much everything else...
tdsmithATabc
on 12 Apr 2017
Upgrading the Angular Language Service from 0.1.2 to 0.1.3 has fixed the issue for me. Thanks!
Marcidius
on 19 Apr 2017
I'm using Angular Language Service 0.1.3 and I'm still having this same issue.
wbuck
on 18 May 2017
Any news about that thing?
Still having the issue with 0.1.4
markus-fischbacher
on 7 Aug 2017
I was having the same issue
Component 'xxxComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration
and while I was researching an reading some threads of pretty much the same issue, the error suddenly (after about 15 minutes) disappeared, I think is more a timing issue when you change/add components
ivanlopezmolina
on 15 Sep 2017
Still having the issue with 0.1.7
DmitryEfimenko
on 27 Oct 2017
Encountering this on 0.1.9.
Reproducible by starting new ionic project with the tutorial template and creating a new page which requires the the new page class be declared in the app.module.ts file.
I am able to get this to go away by just reopening the project so not the end of the world, but inconvenient.
joshua-strickland
on 12 Feb 2018
Have this issue on 0.1.9 with Directives
olehleskiv
on 12 Feb 2018
I can confirm the same behavior as @josh-strickland-4c
Here my the VSCode info:
Version 1.19.3
Commit 7c4205b5c6e52a53b81c69d2b2dc8a627abaa0ba
Date 2018-01-25T10:36:34.867Z
Shell 1.7.9
Renderer 58.0.3029.110
Node 7.9.0
Architecture x64
andrei0x309
on 20 Feb 2018
I can report this issue with the 0.1.9 version with components.
LeonardoMinatiCrispyBacon
on 7 Mar 2018
i got the same error. b/c first i made a component by using "ng g c post " then i made another folder inside of post, and push all the files was created before and renamed all files, post to post-create. then i got the same error.. even there was an error said by VS code, my chrome console doesn't say anything. and it works.
pramodaya
on 26 Jun 2018
bump, same problem in 0.1.9 when using lazy loading modules. If details are needed lmk.
ruimagro
on 26 Jul 2018
Still an issue with 2018.2 in a library project (created with angular cli).
ghost
on 26 Sep 2018
Same for me in Webstorm Project!
MikeVoermans
on 26 Sep 2018
The same problem with WebStorm.
Angular Cli 6.2.3
Angular 6.1.9
miguelms95
on 29 Sep 2018
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[bot] picture](https://avatars.githubusercontent.com/in/40213?v=4&s=40)
angular-automatic-lock-bot[bot]
on 15 Feb 2020
Related issues
kondi
路
4Comments
seangwright
路
4Comments
MoazAlkharfan
路
3Comments
user3323
路
4Comments
yjaaidi
路
5Comments
Most helpful comment
I'm using Angular Language Service 0.1.3 and I'm still having this same issue.