webentwicklung-frage-antwort-db.com.de

Winkelfehler: 'Komponente' X 'ist nicht in einem Modul enthalten ...', wenn es in einem Untermodul deklariert wird

Ich versuche, meine Dialoge in einem Angular-Modul zu konsolidieren, aber ich bekomme in der IDE einen Fusselfehler:

Die Komponente 'X' ist nicht in einem Modul enthalten und steht nicht zur Verfügung in einer Vorlage. Erwägen Sie, es einer NgModule-Deklaration hinzuzufügen.

Trotz dieses Fehlers wird die Anwendung immer noch geladen und erfolgreich ausgeführt.

Beispielkomponentendefinition

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();
  }

}

Untermodul für Deklaration/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 Modul

// <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 { }

Versionen

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

Ich hatte das gleiche Problem und so wurde es gelöst:

1) Gehen Sie zu den Intellij/IDE -Einstellungen und aktivieren Sie das Kontrollkästchen Neukompilieren, wenn folgende Änderungen vorgenommen werden:

 enter image description here

2) Gehen Sie zu tsconfig.json und setzen Sie compileOnSave auf true:

 enter image description here

Entfernen Sie nun das @Component, das das Problem verursacht, und geben Sie @Component erneut ein.

Das hat für mich funktioniert :) Viel Glück.

18
Praveesh P

Erstens: Deklarieren Sie alle Ihre Komponenten in Deklarationen section (app.module.ts).

Wenn das Problem bestehen bleibt, erinnere ich mich daran, dass dies ein Problem mit der Beta-Version von angle-cli ist.

Das Problem, das Sie ausführen, ist eine Variante des baseUrl-Problems. Der Sprachendienst respektiert die Option baseUrl nicht korrekt. Wenn Sie beispielsweise den Import des gemeinsam genutzten Moduls von app/shared/shared.module in ../shared/shared.module ändern, werden die Fehler nicht mehr angezeigt.

1
alvaropanizo

Fügen Sie @angular/language-service als Dev-Abhängigkeit hinzu

oder

npm install @angular/language-service

Kann bestätigen, dass dies in 5.2.9 behoben ist. YMMV mit früheren Versionen.

0
AnthonyW

Der Fehler stammt vom Angular-Sprachendienst ( https://github.com/angular/angular/issues/14961 ). Sie können es deaktivieren, indem Sie das Kontrollkästchen Angular Language Service in Settings | deaktivieren Sprachen & Frameworks | Typoskript

https://intellij-support.jetbrains.com/hc/de-de/community/posts/360000014820-Component-is-not-includd-in-a-module-und-will-not-verfügbar- inside-a-template

 enter image description here

0
Stack Underflow