Angular Error: 'Component 'X' is not included in a module...' when declared in a sub module

Question

I'm trying to consolidate my dialogs into an Angular module, but I'm getting a linting error in the IDE:

Component 'X' is not included in a module and will not be available inside a template. Consider adding it to an NgModule declaration.

Despite this error the application still loads and runs successfully.

Example Component Definition

import { Component, Inject, OnInit, ViewEncapsulation } from '@angular/core';
import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material';

export interface AlertDialogData {
  titleText: string;
  dismissalText: string;
  contentComponent: string;
}

@Component({
  selector: 'app-alert-dialog',
  templateUrl: './alert-dialog.component.html',
  styleUrls: ['./alert-dialog.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class AlertDialogComponent implements OnInit {

  constructor(private dialogRef: MatDialogRef<AlertDialogComponent>, @Inject(MAT_DIALOG_DATA) public data: any) { }

  ngOnInit() {
  }

  handleCloseClick(): void {
    this.dialogRef.close();
  }

}

Sub module making Declaration/Export

import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { ZipLocatorDialogComponent } from './zip-locator-dialog/zip-locator-dialog.component';
import { AlertDialogComponent } from './alert-dialog/alert-dialog.component';
import { HelperDialogComponent } from './helper-dialog/helper-dialog.component';
import {
  MatAutocompleteModule, MatButtonModule, MatDialogModule, MatFormFieldModule, MatInputModule,
  MatSelectModule
} from '@angular/material';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

@NgModule({
  imports: [
    CommonModule,
    FlexLayoutModule,
    FormsModule,
    ReactiveFormsModule,
    MatDialogModule,
    MatInputModule,
    MatFormFieldModule,
    MatSelectModule,
    MatAutocompleteModule,
    MatButtonModule
  ],
  exports: [
    ZipLocatorDialogComponent,
    HelperDialogComponent,
    AlertDialogComponent
  ],
  declarations: [
    ZipLocatorDialogComponent,
    HelperDialogComponent,
    AlertDialogComponent
  ],
  entryComponents: [
    ZipLocatorDialogComponent,
    HelperDialogComponent,
    AlertDialogComponent
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ]
})
export class AppDialogsModule { }

App Module

// <editor-fold desc="Global Application Imports">
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { RouterModule } from '@angular/router';
import { RouteDefinitions } from './app.routes';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FlexLayoutModule } from '@angular/flex-layout';
import { WebWrapperModule } from 'web-wrapper';
import { UiComponentsModule } from './ui-components.module';
import { AppComponent } from './app.component';


// OPERATORS
import './rxjs-operators';

// SERVICES
import { LoginManagerService } from './services/login-manager.service';
import { UtilsService } from './services/utils.service';
import { DataManagerService } from './services/data-manager.service';
import { ReferenceDataManagerService } from './services/reference-data-manager.service';
import { InfrastructureApiService } from './services/infrastructure-api.service';
// </editor-fold>

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    FlexLayoutModule,
    HttpClientModule,
    WebWrapperModule,
    UiComponentsModule,
    AppDialogsModule,
    RouterModule.forRoot(RouteDefinitions)
  ],
  providers: [
    UtilsService,
    LoginManagerService,
    DataManagerService,
    InfrastructureApiService,
    ReferenceDataManagerService
  ],
  schemas: [
    CUSTOM_ELEMENTS_SCHEMA
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Versions

Angular CLI: 1.5.0
Node: 7.2.1
OS: win32 x64
Angular: 4.4.6
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router, tsc-wrapped

@angular/cdk: 2.0.0-beta.12
@angular/cli: 1.5.0
@angular/flex-layout: 2.0.0-beta.11-b01c2d7
@angular/material: 2.0.0-beta.12
@angular-devkit/build-optimizer: 0.0.32
@angular-devkit/core: 0.0.20
@angular-devkit/schematics: 0.0.35
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.0
@schematics/angular: 0.1.2
typescript: 2.4.2
webpack: 3.8.1

Does the error message literally say "x"? Or the name of one of your components? And it looks like from the provided code that you *are* exporting each of your components in your shared module? And did you plan to also export all of the modules that you wanted to share? — DeborahK, Nov 30 '17 at 23:44
It's not literally 'X', but it appears for every dialog component declared in the `AppDialogsModule`, i.e. `HelperDialogComponent`. The exports are only included, because I saw that was provided in a different SO answer however it makes no difference. The `AppDialogsModule` is already included as an import to the `AppModule` which is all that should be required correct? — rawkfist0215, Nov 30 '17 at 23:46
There are quite a few rules here on how this works. Consider checking out my video on the topic from ngConf here: https://www.youtube.com/watch?v=ntJ-P-Cvo7o&t=1s — DeborahK, Dec 01 '17 at 07:09
Regarding your error, have you seen this: https://github.com/angular/vscode-ng-language-service/issues/10. It appears that this may be a known error with the VS Code language service. Are you using that tool? — DeborahK, Dec 01 '17 at 07:12
I'm using the npm package `@angular/language-service": "^4.3.6` tool that ships with the CLI. Maybe it's the same issue the VS Code version has though. Thanks for sharing the link to the talk. While I think my modules were already configured correctly, (I removed exporting the components) you gave an excellent presentation! If anything I gained more understanding into the "why" instead of employing blind copy/paste tactics. — rawkfist0215, Dec 01 '17 at 18:11
Did you solve this? What IDE are you using, WebStrorm or IntelliJ? — mohsenmadi, Jan 11 '18 at 15:30
I did not find a solution to this. I ended up shuffling component declarations and module definitions around, and eventually the error went away. There wasn't any tried and true solution however that I can post here unfortunately. — rawkfist0215, Jan 12 '18 at 00:12
It does seem to be related to the `@angular/language-service` package though, and I'm using WebStorm. — rawkfist0215, Jan 12 '18 at 00:12

score 46 · Accepted Answer · answered Jun 04 '18 at 10:55

I had this same issue and this is how it got resolved :

1) Goto Intellij / IDE settings and tick(set) the Recompile on changes to :

2) Goto tsconfig.json and set the compileOnSave to true :

Now go and remove the @Component that's causing the issue, and retype @Component.

This worked for me :) Good Luck.

score 7 · Answer 2 · edited Feb 28 '19 at 17:38

7

First: declare all your components in declarations section (app.module.ts).

If the problem persist, I remember that is a problem with the beta angular-cli versions.

The issue you are running into is a variant of the baseUrl issue. The language service does not correctly respect the baseUrl option. For example, if you change the import of the shared module from app/shared/shared.module to ../shared/shared.module then the errors go away.

edited Feb 28 '19 at 17:38

Pipo

4,653
38
47

answered Nov 30 '17 at 23:46

alvaropanizo

177
5

Doing so leads to the following error: `Uncaught Error: Type ZipLocatorDialogComponent is part of the declarations of 2 modules: AppDialogsModule and AppModule! Please consider moving ZipLocatorDialogComponent to a higher module that imports AppDialogsModule and AppModule. You can also create a new NgModule that exports and includes ZipLocatorDialogComponent then import that NgModule in AppDialogsModule and AppModule.` Which feels ironic, because their suggestion sums up what I'm trying to do in the first place. – rawkfist0215 Dec 01 '17 at 00:00
Try to remove from **imports** and only put this module in **declarations** – alvaropanizo Dec 01 '17 at 00:02
3

Sorry, but the error message still displays. It's only the linting tool that's confused, because Angular still compiles the app and runs without exceptions. – rawkfist0215 Dec 01 '17 at 00:24

score 7 · Answer 3 · answered Nov 16 '22 at 13:12

7

If you are using an IntelliJ IDE (I am running a WebStorm), try this:

File -> Invalidate Caches / Restart -> Invalidate and restart

It should fix the FooComponent is not declared in any Angular module error.

answered Nov 16 '22 at 13:12

Bullsized

362
4
7

score 2 · Answer 4 · answered Feb 14 '21 at 20:52

2

To anybody struggling with this error, the solution is to add the component to the NgModule declaration which can be found in the 'module.ts' file.

answered Feb 14 '21 at 20:52

Gabriel

21
2

score 1 · Answer 5 · answered Apr 06 '18 at 16:16

1

Add @angular/language-service as a dev-dpendency

or

do npm install @angular/language-service

Can confirm this is fixed in v5.2.9. YMMV with earlier versions.

answered Apr 06 '18 at 16:16

AnthonyW

1,910
5
25
46

This fixed it for me on VS Code and `Angular CLI: 7.3.8`. Thank you! – Javier Capello May 11 '19 at 21:25

score 1 · Answer 6 · answered May 05 '21 at 13:39

1

For me the same error occured when in the module in which the Component was declared the import of the CommonModule was missing.

@NgModule({
    declarations: [ExampleComponent],
    imports: [CommonModule],
})
export class ExampleModule {}

answered May 05 '21 at 13:39

ush189

1,342
6
22
30

score 0 · Answer 7 · answered Oct 10 '18 at 19:04

0

The error comes from the Angular language service (https://github.com/angular/angular/issues/14961). You can disable it by clearing the Angular Language Service checkbox in Settings | Languages & Frameworks | Typescript

https://intellij-support.jetbrains.com/hc/en-us/community/posts/360000014820-Component-is-not-includd-in-a-module-and-will-not-be-available-inside-a-template

answered Oct 10 '18 at 19:04

Stack Underflow

2,363
2
26
51

2

@SushiGuy that solution is so draconian, its a little like telling the developer to throw their entire machine out the window: can't have a problem if you don't have a computer! – dudewad Feb 17 '22 at 06:13
2

Turning off the ENTIRE angular language service is a bad approach here. People should look to solve the problem rather than ignore it while simultaneously eliminating the service that makes Angular hinting work. You're talking about completely breaking the Angular workflow to fix one problem here. – dudewad Feb 17 '22 at 06:14

Angular Error: 'Component 'X' is not included in a module...' when declared in a sub module

7 Answers7