Erreur angulaire: 'Le composant' X 'n'est pas inclus dans un module ...' lorsqu'il est déclaré dans un sous-module
J'essaie de consolider mes dialogues dans un module angulaire, mais je reçois une erreur de peluche dans l'IDE
Le composant 'X' n'est pas inclus dans un module et ne sera pas disponible à l'intérieur d'un modèle. Envisagez de l'ajouter à une déclaration NgModule.
Malgré cette erreur, l'application se charge toujours et s'exécute avec succès.
Exemple de définition de composant
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 { }
Module App
// <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
J'ai eu le même problème et voici comment cela a été résolu:
1) Allez aux paramètres Intellij/IDE et cochez (définissez) la recompilation si modifiée pour:
2) Allez à tsconfig.json et définissez le compileOnSave sur true:
Maintenant, supprimez le @Component à l'origine du problème et retapez-le @Component.
Cela a fonctionné pour moi :) Bonne chance.
Premièrement: déclarez tous vos composants dans declarations section (app.module.ts).
Si le problème persiste, je me souviens que c’était un problème avec les versions beta angular-cli.
Le problème que vous rencontrez est une variante du problème baseUrl. Le service de langue ne respecte pas correctement l'option baseUrl. Par exemple, si vous modifiez l'importation du module partagé de app/shared/shared.module à ../shared/shared.module, les erreurs disparaissent.
Ajouter @angular/language-service en tant que dépendance de dev
ou
faire npm install @angular/language-service
Peut confirmer que ceci est corrigé dans 5.2.9. YMMV avec les versions précédentes.
L'erreur provient du service de langue angulaire ( https://github.com/angular/angular/issues/14961 ). Vous pouvez le désactiver en décochant la case Service de langue angulaire dans Paramètres | Langues et cadres | Manuscrit
