Компонент Angular 6 NgModule

Вам нужно добавить AppComponent в тот модуль, в котором вы хотите его использовать. Если вы загружаетесь ProductComponent и использовать AppComponent внутри него, вам нужно добавить их в тот модуль, в котором вы использовали ProductComponent.

Сначала вы должны импортировать AppComponent в «app.module.ts», а после этого вы должны объявить его и добавить в бутстрап следующим образом:

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

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

Исправить: Если вы нигде не используете AppComponent и вместо этого загружаете свое приложение с помощью ProductComponent, просто удалите селекторы «app-root» из любого html-файла, который его включает (я подозреваю, что файл index.html в вашем корневом каталоге)

Или, если вы действительно хотите его использовать, вам придется импортировать AppComponent в ваш app.module.ts и также объявить его в массиве объявлений декоратора NgModule.

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

Если вы используете селектор AppComponent (обычно корень приложения) в любом месте вашего приложения, удалите его, так как он больше не требуется.

Поскольку вы задаете этот вопрос, вы новичок в angular 2+. К вашему сведению:

• Любой новый компонент, который мы создали, должен быть настроен (добавлен) в Массив декларации рядом с ngModule. В вашем случае это app.module.ts.
• Любой новый сервис или канал, который мы создали, должен быть настроен (добавлен) в массиве провайдеры рядом с ngModule. В вашем случае это 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 { }

You have to first import the component in your app module and then add the app component in the declarations array

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