Language Service. Component '...' is not included in a module and will not be available inside a template

[WiseBird]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

I have a simple component:

@Component({
               selector: 'app-home',
               templateUrl: './home.component.html'
           })
export class HomeComponent {
    title = 'Home!';
}

in tsconfig there is a mapping that points to component's folder:

    "baseUrl": ".",
    "paths": {
      "home/*": ["./src/app/home/*"]
    }

and finally, component is imported using this mapping and is added to the main module alongside with root component:

    import {HomeComponent} from 'home/home.component';

    ...
    declarations: [
        AppComponent,
        HomeComponent,
    ],
    bootstrap: [
        AppComponent,
    ],
    ...

Current behavior

Language service shows error for HomeComponent: Error:(3, 2) Angular: Component 'HomeComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration

Expected behavior

No error, component is actually imported.

Minimal reproduction of the problem with instructions

Check the repo.

Environment

Angular version: 4.3.3

Others: IDE: WebStorm 2017.2.3 EAP

[vpop]

I ran into the same issue using WebStorm EAP. Every @Component usage was showing the error highlighted in this issue: Component X is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration. The web app would run just fine though.

Updating to the latest version of the EAP (WebStorm 2017.3 EAP, Build #WS-173.3188.31, built on October 12, 2017) solved it though.

[WiseBird]

@nadav1991 Did you checked it with my reproduction? I just checked with angular 4.4.6 and WS-173.3302.13 and it's still there. Also I personally don't think it has anything to do with WS, instead language service should be blamed.

What do you mean rewrite the @component?

[RaphiStein]

For me this problem was resolved when I moved the component directory to the same level as the module.

To illustrate, I went from:

    ├── app
             ├── shared
                         ├── components
                                        ├── my-component
                                                         └── my-component.component.ts
                         └── shared.module.ts

to this

    ├── app
             ├── shared
                          ├── my-component
                                         └── my-component.component.ts
                          └── shared.module.ts

I'm not sure why it didn't work the previous way. All the imports and paths were correct. Since it worked after de-nesting the components I'm just keeping it this way

[ruipimentel]

@RaphiStein thank you, that did work.

Anyways, I would be glad if this bug was fixed, because only small modules could bear keeping its components on the same folder.

[picosam]

Actually, in my case, it still shows the error, even when I have the following folder structure and the release version of WebStorm 2017.3:

├─ app
       ├─ shared
               ├─ components
                      └── my-component.component.ts
              └── shared.module.ts

[chiefbrwnmeanie]

i am having the same errors. however, if i quit and re-open webstorm, the error goes away. i've also noticed this with random "unknown element" errors when i have installed such things as angular material. i wonder if it's a cache issue. next time i'll get it (likely later today), maybe using "invalidate caches" in the menu would do the trick...

Env details:
Angular CLI: 1.5.4
Angular: 5.0
WebStorm 2017.3 (173.3727.108)
Mac OS X : 10.13.1
WebStorm 2017.3

[picosam]

I think this is related to #16382

[LinaSchad]

I just ran into that as well. Like for chiefbrwnmeanie quitting and re-opening did the job.

[MariMax]

same here

WebStorm 2017.3.1
Build #WS-173.3942.31, built on December 11, 2017
Mac OS X 10.12.6

[grigala]

Same here...

[anodynos]

Any updates? I have the same problem with Angular 5.1.2, Webstorm 2017.3.1, Mac or Linux x64.

[avbentem]

Maybe unrelated, but just in case:

1. Having "TypeScript Language Service" enabled in WebStorm, when package.json does not refer to any language service, works just fine for me:

   

2. With the very same settings, also using npm install --save-dev @angular/language-service throws the following for https://github.com/angular/angular.io/blob/master/public/docs/_examples/testing/ts/src/testing/router-stubs.ts

   Error:(11, 2) ng: Directive 'RouterLinkStubDirective' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration

   Error:(26, 2) ng: Component 'RouterOutletStubComponent' is not included in a module and will not be available inside a template. Consider adding it to a NgModule declaration

3. Disabling the settings in WebStorm while keeping "@angular/language-service": "5.1.3" as added by option 2, also works fine.

(I don't know what I'm missing when not having that line in package.json, but I'm fine without it, so I simply keep using option 1.)

WebStorm 2017.3.2 (latest version), Angular 5.1.3 (latest version).

[Rawr421]

avbentem solved my problem by checking the 'recompile on changes' box in the options for Webstorm. The next time I changed a character it was recompiled and the errors went away. Thanks!

[jeenn]

@Rawr421 thank you, changing a character and recompiling did the trick

[BeatriceThalo]

Using Node in VS Code, changing tsconfig.json compileOnSave: false to true solved my problem.

[kevinbeal]

Using that same menu @avbentem shows and toggling the Angular Language Service (applying changes in between) resolves the issue for the editor.

[Sbitneva]

Try to close - open IDEA
it help in my case :)

[schurik]

I get the same error as already mentioned.
Angular 7.2
IntelliJ IDEA 2018.3.3 (Ultimate Edition) Build #IU-183.5153.38, built on January 9, 2019
macOS 10.14.2.

I tried several solutions. close IDEA, enable the 'Recompile on change' option, tsconfig.json compileOnSave: true, invalidate the cache, ... but nothing helped.
Is there a fix for this error?

[Sbitneva]

Just reload your IDE. пн, 14 янв. 2019 г., 10:52 Alexander Buss <notifications@github.com>:

…

I get the same error as already mentioned. Angular 7.2 IntelliJ IDEA 2018.3.3 (Ultimate Edition) Build #IU-183.5153.38, built on January 9, 2019 macOS 10.14.2. I tried several solutions. close IDEA, enable the 'Recompile on change' option, tsconfig.json compileOnSave: true, invalidate the cache, ... but nothing helped. Is there a fix for this error? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#19405 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AJ9ZuZ2RRmcbEXQkHynyXEIdt-0sEOKZks5vDEVOgaJpZM4PkNbX> .

[moorzaa]

I get the same error as already mentioned.
Angular 7.2
IntelliJ IDEA 2018.3.3 (Ultimate Edition) Build #IU-183.5153.38, built on January 9, 2019
macOS 10.14.2.

I tried several solutions. close IDEA, enable the 'Recompile on change' option, tsconfig.json compileOnSave: true, invalidate the cache, ... but nothing helped.
Is there a fix for this error?

uncheck angular language service

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