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

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
22 Answers

✔️Accepted Answer

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

Other Answers:

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.

Same here...

Screenshot

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:

    image

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

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!

More Issues: