Question

我使用Angular6。我有以下问题

import { Component } from '@angular/core';

// debugger;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app';
}

我遇到以下错误

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

我有NgModule的定义

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { ProductComponent } from "./component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

@NgModule({
    imports: [BrowserModule, FormsModule, ReactiveFormsModule],
    declarations: [ProductComponent],
    bootstrap: [ProductComponent]
})
export class AppModule {}

我必须在此NgModule中包含AppComponent吗？

Answer 1

您需要在要使用它的模块中添加AppComponent。如果您自举 ProductComponent并在其中使用AppComponent，您需要将其中一个添加到您使用过ProductComponent的模块中。

Answer 2

首先，您应该在“ app.module.ts”中导入AppComponent，然后声明它，并将其添加到引导程序中，如下所示：

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { ProductComponent } from "./component";
import { FormsModule, ReactiveFormsModule } from "@angular/forms";
import { AppComponent } from './app.component';

@NgModule({
    imports: [BrowserModule, FormsModule, ReactiveFormsModule],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule {}

Answer 3

组件'AppComponent'不包含在模块中，也不会在模板中可用。考虑将其添加到NgModule中声明

修复：：如果您不在任何地方使用AppComponent，而是使用ProductComponent引导应用程序，只需从包含它的任何html文件中删除选择器“ app-root”（我怀疑是index.html文件在您的根目录中）

或者，如果您确实要使用它，则必须在app.module.ts中导入AppComponent，并在NgModule装饰器的Declarations数组中对其进行声明。

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { ProductComponent } from "./component";
import { AppComponent } from "./app.component";      // import it here
import { FormsModule, ReactiveFormsModule } from "@angular/forms";

@NgModule({
    imports: [BrowserModule, FormsModule, ReactiveFormsModule],
    declarations: [ProductComponent, AppComponent],    //declare it here
    bootstrap: [ProductComponent]
})
export class AppModule {}

Answer 4

如果您在应用程序中的任何位置使用AppComponent的选择器（通常为 app-root ），请删除该内容，因为它不再需要。

Answer 5

当您问这个问题时，您是角度2+的新手。仅供参考：

我们创建的任何新组件都应在以下位置进行配置（添加） ngModule附近的声明数组。您的情况是app.module.ts。
我们创建的任何新服务或管道都应在ngModule附近的 providers 数组中进行配置（添加）。你的情况是 app.module.ts。

app.modules.ts示例如下

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { BillingComponent } from './billing/billing.component';
import { RouterModule } from '@angular/router';
import { rootRouterConfig } from './app.route';
import { HomeComponent } from './home/home.component';
import { CustomersComponent } from './customers/customers.component';
import { GasStorageComponent } from './gas-storage/gas-storage.component';

import {MatButtonModule, MatCheckboxModule} from '@angular/material';
import {MatExpansionModule} from '@angular/material/expansion';
import {MatFormFieldModule} from '@angular/material/form-field';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {NoopAnimationsModule} from '@angular/platform-browser/animations';



@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    BillingComponent,
    CustomersComponent,
    GasStorageComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(rootRouterConfig),
    MatButtonModule,
    MatCheckboxModule,
    MatExpansionModule,
    MatFormFieldModule,
    BrowserAnimationsModule,
    NoopAnimationsModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Answer 6

您必须首先将组件导入到您的应用程序模块中，然后将应用程序组件添加到声明数组中

import { NgModule } from "@angular/core";
    import { BrowserModule } from "@angular/platform-browser";
    import { ProductComponent } from "./component";
    import {AppComponent} from './components/app.component'
    import { FormsModule, ReactiveFormsModule } from "@angular/forms";

    @NgModule({
        imports: [BrowserModule, FormsModule, ReactiveFormsModule],
        declarations: [ProductComponent,AppComponent],
        bootstrap: [ProductComponent]
    })
    export class AppModule {}

Angular 6组件NgModule

6 个答案: