Angular 6組件NgModule

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

首先，您應該在“ 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 2

組件“ 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 3

如果您在應用程序中的任何地方使用AppComponent的選擇器（通常是app-root ），請刪除該內容，因為它不再是必需的。

Answer 4

當您問這個問題時，您是角度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 5

您必須先將組件導入到您的應用程序模塊中，然后將應用程序組件添加到聲明數組中

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

Answer 6

您需要在要使用它的模塊中添加AppComponent 。 如果您引導ProductComponent並在其中使用AppComponent ，則需要將其中一個添加到使用ProductComponent模塊中。