角度误差：＆＃39;组件＆＃39; X＆＃39;不包含在模块中......＆＃39;在子模块中声明时

Question

我试图将我的对话框整合到Angular模块中，但我在IDE中遇到了linting错误：

  

组件＆＃39; X＆＃39;不包含在模块中，也不可用   在模板内。考虑将其添加到NgModule声明中。

尽管出现此错误，应用程序仍会加载并成功运行。

示例组件定义

getValuePromise: function(i) {
    return new Promise(resolve => {
        this.getValue(i, resolve);
    });
}
getAllValues: function(callback) {
    this.getCount((count) => 
        Promise.all(Array.from({length:count}).map((unused, i) => this.getValuePromise(i)))
        .then(callback)
    );
}

子模块制作声明/导出

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

}

应用模块

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

版本

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

Answer 1

我遇到了同样的问题，这是如何解决的：

1）转到Intellij / IDE设置并勾选（设置）将更改重新编译为：

2）转到 tsconfig.json 并将 compileOnSave 设置为true：

现在去除导致问题的@Component，并重新键入@Component。

这对我有用:)祝你好运。

Answer 2

首先：在声明部分（app.module.ts）中声明所有组件。

如果问题仍然存在，我记得这是beta angular-cli版本的问题。

  

您遇到的问题是baseUrl问题的变体。语言服务不正确地遵循baseUrl选项。例如，如果您将共享模块的导入从app / shared / shared.module更改为../shared/shared.module，那么错误就会消失。

Answer 3

添加@angular/language-service作为开发依赖

或

做npm install @angular/language-service

可以确认此问题已在v 5.2.9中修复。 YMMV与早期版本。

Answer 4

该错误来自Angular语言服务（https://github.com/angular/angular/issues/14961）。您可以通过清除“设置” |“语言”中的“ Angular Language Service”复选框来禁用它。语言和框架|打字稿

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

Answer 5

对于遇到此错误的任何人，解决方案是将组件添加到 NgModule 声明中，该声明可以在 'module.ts' 文件中找到。

Answer 6

在ANGULAR服务器中 仔细检查您的代码，因为我们会错误地写一个文件，这样就会发生这些错误

Answer 7

对我来说，在声明组件的模块中缺少 CommonModule 的导入时，也会发生同样的错误。

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