Component not included in a module warning for all components not in root AppModule

[chrissena]

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!

[chuckjaz]

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.

[chrissena]

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.

[petebacondarwin]

I think this might be related to #36

[chrissena]

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.

[chuckjaz]

Tracked as angular/angular#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]

This has been fixed in 0.1.0

[veldirre]

Still have the same problem, version 0.1.3

[jshea]

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 . However linting fails when making that change.

[chuckjaz]

@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]

@jshea I am not sure I understand you issue. Can you open a separate issue and attach a project that reproduces the issue?

[tdsmithATabc]

@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]

Nevermind. I stumbled upon the problem just a bit after posting: #80.

[chrissena]

@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]

Ah, just got you last message, nevermind.

[tdsmithATabc]

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

[Marcidius]

Upgrading the Angular Language Service from 0.1.2 to 0.1.3 has fixed the issue for me. Thanks!

[wbuck]

I'm using Angular Language Service 0.1.3 and I'm still having this same issue.

[markus-fischbacher]

Any news about that thing?
Still having the issue with 0.1.4

[ivanlopezmolina]

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

[DmitryEfimenko]

Still having the issue with 0.1.7

[joshua-strickland]

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.

[olehleskiv]

Have this issue on 0.1.9 with Directives

[andrei0x309]

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

[LeonardoMinatiCrispyBacon]

I can report this issue with the 0.1.9 version with components.

[pramodaya]

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.

[ruimagro]

bump, same problem in 0.1.9 when using lazy loading modules. If details are needed lmk.

[ghost]

Still an issue with 2018.2 in a library project (created with angular cli).

[MikeVoermans]

Same for me in Webstorm Project!

[miguelms95]

The same problem with WebStorm.

Angular Cli 6.2.3
Angular 6.1.9

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