ส่วนประกอบไม่ได้เป็นส่วนหนึ่งของ NgModule ใด ๆ หรือโมดูลไม่ได้ถูกนำเข้ามาในโมดูล

ฉันกำลังสร้างแอปพลิเคชั่นเชิงมุม 4 ฉันได้รับข้อผิดพลาด

Error:Component HomeComponent is not part of any NgModule or the module has not been imported into your module.

ฉันได้สร้าง HomeModule และ HomeComponent ฉันต้องอ้างถึง AppModule ตัวไหน ฉันสับสนนิดหน่อย ฉันจำเป็นต้องอ้างอิง HomeModule หรือ HomeComponent หรือไม่ ในที่สุดสิ่งที่ฉันกำลังมองหาคือเมื่อผู้ใช้คลิกเมนูหน้าแรกเขาควรถูกนำไปที่ home.component.html ซึ่งจะแสดงผลในหน้าดัชนี

App.module คือ:

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

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import { AppRoutingModule } from './app.routing';
import { HomeModule } from './Home/home.module';

@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent

  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    HomeModule

  ],
  providers: [MRDBGlobalConstants],
  bootstrap: [AppComponent]
})
export class AppModule { }

HomeModule คือ:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { HomeComponent } from './home.component';

@NgModule({
  imports: [
    CommonModule
  ],
  exports: [HomeComponent],
  declarations: [HomeComponent]
})
export class HomeModule { }

HomeComponent คือ:

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

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

หากคุณไม่ได้ใช้การโหลดแบบขี้เกียจคุณต้องนำเข้า HomeComponent ของคุณใน app.module และกล่าวถึงภายใต้การประกาศ นอกจากนี้อย่าลืมลบออกจากการนำเข้า

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

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import {AppRoutingModule} from './app.routing';
import {HomeModule} from './Home/home.module';
// import HomeComponent here

@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent,
    // add HomeComponent here
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    HomeModule  // remove this

  ],
  providers: [MRDBGlobalConstants],
  bootstrap: [AppComponent]
})
export class AppModule { }

ในกรณีของฉันฉันต้องรีสตาร์ทเซิร์ฟเวอร์เท่านั้น (นั่นคือถ้าคุณใช้งานอยู่ng serve)

มันเกิดขึ้นกับฉันทุกครั้งที่ฉันเพิ่มโมดูลใหม่ในขณะที่เซิร์ฟเวอร์กำลังทำงาน

ในกรณีของฉันฉันไม่มีส่วนประกอบที่สร้างขึ้นใหม่ในdeclarationsที่app.module.ts:

@NgModule({
  declarations: [
    AppComponent,
    ....
    NewGeneratedComponent, //this was missing
    ....
  ],
  imports: [
    ....

ผมมีปัญหาเดียวกัน. สาเหตุเกิดจากฉันสร้างส่วนประกอบในขณะที่เซิร์ฟเวอร์ของฉันยังทำงานอยู่ วิธีแก้ไขคือออกจากเซิร์ฟเวอร์และให้บริการอีกครั้ง

สาเหตุปกติถ้าคุณกำลังใช้เครื่องขุดและขี้เกียจรูปแบบฟังก์ชั่นงบนำเข้าจะนำเข้าโมดูลเส้นทางแทนของโมดูลหน้า ดังนั้น:

ไม่ถูกต้อง :

loadChildren: () => import('./../home-routing.module').then(m => m.HomePageRoutingModule)

ถูกต้อง :

loadChildren: () => import('./../home.module').then(m => m.HomePageModule)

คุณอาจจะหนีไปได้สักพัก แต่ในที่สุดมันก็จะทำให้เกิดปัญหา

ฉันพบข้อความแสดงข้อผิดพลาดนี้ 2 ครั้งแยกกันโดยขี้เกียจโหลดใน Angular 7 และข้างต้นไม่ได้ช่วยอะไร เพื่อให้ทั้งสองอย่างด้านล่างทำงานได้คุณต้องหยุดและรีสตาร์ท ng เพื่อให้อัปเดตได้อย่างถูกต้อง

1) ครั้งแรกที่ฉันนำเข้า AppModule ของฉันอย่างไม่ถูกต้องไปยังโมดูลคุณลักษณะขี้เกียจโหลด ฉันลบการนำเข้านี้ออกจากโมดูลที่โหลดแบบขี้เกียจและเริ่มทำงานอีกครั้ง

2) ครั้งที่สองฉันมี CoreModule แยกต่างหากซึ่งฉันกำลังนำเข้าสู่ AppModule และโมดูลที่โหลดแบบขี้เกียจเหมือน # 1 ฉันลบการนำเข้านี้ออกจากโมดูลที่โหลดแบบขี้เกียจและเริ่มทำงานอีกครั้ง

โดยทั่วไปให้ตรวจสอบลำดับชั้นการนำเข้าของคุณและให้ความสำคัญกับลำดับการนำเข้า (หากมีการนำเข้าในที่ที่ควรจะเป็น) โมดูลที่โหลดขี้เกียจต้องการส่วนประกอบเส้นทาง / การอ้างอิงของตัวเองเท่านั้น การอ้างอิงของแอปและพาเรนต์จะถูกส่งต่อไปไม่ว่าจะถูกนำเข้ามาใน AppModule หรือนำเข้าจากโมดูลคุณลักษณะอื่นที่โหลดแบบไม่ขี้เกียจและนำเข้าในโมดูลหลักแล้ว

ในกรณีของฉันการนำเข้าเส้นทางจริงapp.component.spec.tsทำให้เกิดข้อความแสดงข้อผิดพลาดเหล่านี้ วิธีแก้ไขคือการนำเข้าRouterTestingModuleแทน

import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
import { RouterTestingModule } from '@angular/router/testing';

describe('AppComponent', () => {
  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        AppComponent
      ],
      imports: [RouterTestingModule]
    }).compileComponents();
  }));

  it('should create the app', async(() => {
    const fixture = TestBed.createComponent(AppComponent);
    console.log(fixture);
    const app = fixture.debugElement.componentInstance;
    expect(app).toBeTruthy();
  }));

});

ฉันพบปัญหาเดียวกันนี้และสิ่งที่ฉันเห็นที่นี่ไม่ได้ผล หากคุณแสดงรายการส่วนประกอบของคุณในปัญหา app-routeing.module คุณอาจพบปัญหาเดียวกันกับที่ฉันพบ

app.module.ts

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

import { AppComponent } from './app.component';
import { NavbarComponent } from './navbar/navbar.component';
import { TopbarComponent } from './topbar/topbar.component';
import { FooterbarComponent } from './footerbar/footerbar.component';
import { MRDBGlobalConstants } from './shared/mrdb.global.constants';
import {AppRoutingModule} from './app.routing';
import {HomeModule} from './Home/home.module';
// import HomeComponent here

@NgModule({
  declarations: [
    AppComponent,
    FooterbarComponent,
    TopbarComponent,
    NavbarComponent,
    // add HomeComponent here
  ],
  imports: [
    BrowserModule,
    HttpModule,
    AppRoutingModule,
    HomeModule  // remove this

  ],
  providers: [MRDBGlobalConstants],
  bootstrap: [AppComponent]
})
export class AppModule { }

home / index.ts

export * from './';

app-Routing.module.ts

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './components';

const routes: Routes = [
    { path: 'app/home', component: HomeComponent },
    { path: '', redirectTo: 'app/home', pathMatch: 'full' },
    { path: '**', redirectTo: 'app/home' }
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule { }

บ้าน / home.module.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
// import { HomeComponent } from './home.component'; This would cause app to break
import { HomeComponent } from './';
@NgModule({
  imports: [
    CommonModule
  ],
  exports: [HomeComponent],
  declarations: [HomeComponent]
})
export class HomeModule { }

ฉันจะไม่อ้างว่าเข้าใจว่าทำไมจึงเป็นเช่นนั้น แต่เมื่อใช้การจัดทำดัชนีเพื่อส่งออกส่วนประกอบ (และฉันจะถือว่าเหมือนกันสำหรับบริการ ฯลฯ ) เมื่ออ้างถึงส่วนประกอบเดียวกันในโมดูลแยกต่างหากคุณต้องนำเข้าจาก ไฟล์เดียวกันในกรณีนี้ดัชนีเพื่อหลีกเลี่ยงปัญหานี้

โหลดเชิงมุมขี้เกียจ

ในกรณีของฉันฉันลืมและนำเข้าส่วนประกอบที่เป็นส่วนหนึ่งของโมดูลลูกที่นำเข้าแล้วใน Routing.ts

....
...
 {
path: "clients",
component: ClientsComponent,
loadChildren: () =>
  import(`./components/users/users.module`).then(m => m.UsersModule)
}
.....
..

ในกรณีของฉัน Angular 6 ฉันเปลี่ยนชื่อโฟลเดอร์และชื่อไฟล์ของโมดูลของฉันจาก google.map.module.ts เป็น google-map.module.ts ในการคอมไพล์โดยไม่มีการซ้อนทับกับชื่อโมดูลและส่วนประกอบเก่าคอมไพเลอร์ ng คอมไพเลอร์โดยไม่มีข้อผิดพลาด

ใน app.routes.ts:

     {
        path: 'calendar', 
        loadChildren: './views/app-calendar/app-calendar.module#AppCalendarModule', 
        data: { title: 'Calendar', breadcrumb: 'CALENDAR'}
      },

ใน google-map.routing.ts

import { GoogleMapComponent } from './google-map.component';
const routes: Routes = [
  {
    path: '', component: GoogleMapComponent, data: { title: 'Coupon Map' }
  }
];
@NgModule({
    exports: [RouterModule],
    imports: [RouterModule.forChild(routes)]
})
export class GoogleMapRoutingModule { }

ใน google-map.module.ts:

import { GoogleMapRoutingModule } from './google-map.routing';
@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    CommonModule,
    GoogleMapRoutingModule,
  ],
  exports: [GoogleMapComponent],
  declarations: [GoogleMapComponent]
})
export class GoogleMapModule { }

ฉันพบปัญหาเดียวกัน ฉันได้สร้างส่วนประกอบอื่นที่มีชื่อเดียวกันภายใต้โฟลเดอร์อื่น ดังนั้นในโมดูลแอปของฉันฉันต้องนำเข้าส่วนประกอบทั้งสอง แต่มีเคล็ดลับ

import {DuplicateComponent as AdminDuplicateComponent} from '/the/path/to/the/component';

จากนั้นในการประกาศฉันสามารถเพิ่ม AdminDuplicateComponent แทนได้

แค่คิดว่าฉันจะทิ้งไว้ที่นั่นเพื่อใช้อ้างอิงในอนาคต

ตรวจสอบโมดูล Lazy ของคุณฉันได้นำเข้า AppRoutingModule ในโมดูล lazy หลังจากลบการนำเข้าและนำเข้า AppRoutingModule แล้ว Mine ก็เริ่มทำงาน

import { AppRoutingModule } from '../app-routing.module'; 

ในกรณีของฉันฉันกำลังย้ายส่วนประกอบUserComponentจากโมดูลหนึ่งappModuleไปยังอีกโมดูลหนึ่งdashboardModuleและลืมที่จะลบนิยามเส้นทางออกจากการกำหนดเส้นทางของโมดูลก่อนหน้าappModuleในไฟล์ AppRoutingModule

const routes = [
 { path: 'user', component: UserComponent, canActivate: [AuthGuard]},...]

หลังจากที่ฉันลบคำจำกัดความของเส้นทางแล้วมันก็ใช้งานได้ดี

หากคุณใช้การโหลดแบบขี้เกียจคุณต้องโหลดโมดูลนั้นในโมดูลเราเตอร์ใด ๆ เช่นใน app-routeing.module.ts {path: 'home', loadChildren: './ home.module # HomeModule'}

กรณีของฉันเหมือนกับที่ @ 7guyo กล่าวถึง ฉันใช้ lazyloading และกำลังทำสิ่งนี้อย่างไร้เหตุผล:

import { component1Route } from './path/component1.route';

export const entityState: Routes = [
{
   path: 'home',
   children: component1Route
}]

แทน:

@NgModule({
imports: [
   RouterModule.forChild([
   {
     path: '',
     loadChildren: () => import('./component1/component1.module').then(m => m.ComponentOneModule)
  },
  {
    path: '',
    loadChildren: () => import('./component2/component2.module').then(m => m.ComponentTwoModule)
  }])
  ]})

  export class MainModule {}

คุณสามารถแก้ไขได้ด้วยสองขั้นตอนง่ายๆ:

เพิ่มส่วนประกอบของคุณ (HomeComponent) ในdeclarationsอาร์เรย์entryComponentsอาร์เรย์

เนื่องจากส่วนประกอบนี้ไม่สามารถเข้าถึงได้ทั้ง throw selector หรือ router การเพิ่มสิ่งนี้ในอาร์เรย์ entryComponnets จึงมีความสำคัญ

ดูวิธีทำ:

@NgModule({
  declarations: [
    AppComponent,
    ....
    HomeComponent
  ],
  imports: [
    BrowserModule,
    HttpModule,
    ...

  ],
  providers: [],
  bootstrap: [AppComponent],
  entryComponents: [HomeComponent]
})
export class AppModule {} 

เมื่อคุณใช้การโหลดแบบขี้เกียจคุณจะต้องลบโมดูลส่วนประกอบและโมดูลการกำหนดเส้นทางออกจากโมดูลแอป หากไม่เป็นเช่นนั้นระบบจะพยายามโหลดเมื่อแอปเริ่มทำงานและแสดงข้อผิดพลาดนั้น

@NgModule({
   declarations: [
      AppComponent
   ],
   imports: [
      BrowserModule,
      FormsModule,
      HttpClientModule,
      AppRoutingModule,
      // YourComponentModule,
      // YourComponentRoutingModule
   ],
   bootstrap: [
      AppComponent
   ]
})
export class AppModule { }

ในกรณีของฉันฉันนำเข้าผิดในตำแหน่งโมดูลแทนที่จะนำเข้าโมดูล (DemoModule) นำเข้าโมดูลการกำหนดเส้นทาง (DemoRoutingModule)

นำเข้าผิด:

const routes: Routes = [
  {
  path: '', component: ContentComponent,
  children: [
  { path: '', redirectTo: 'demo' },
  { path: 'demo', loadChildren : () => import('../content/demo/demo-routing.module').then(m => m.DemoRoutingModule)}]
  }
];

รหัสที่ถูกต้อง

const routes: Routes = [
  {
  path: '', component: ContentComponent,
  children: [
  { path: '', redirectTo: 'demo' },
  { path: 'demo', loadChildren : () => import('../content/demo/demo.module').then(m => m.DemoModule)}]
  }
];

ตรวจสอบว่าส่วนประกอบของคุณได้รับการนำเข้าอย่างถูกต้องใน app-routeing.module.ts ในกรณีของฉันนั่นคือเหตุผล

สิ่งที่ต้องมีก่อน: 1. หากคุณมีหลายโมดูล 2. และคุณกำลังใช้ส่วนประกอบ (สมมติว่า DemoComponent) จากโมดูลอื่น (สมมติว่า AModule) ในโมดูลอื่น (สมมติว่า BModule)

จากนั้น AModule ของคุณควรเป็น

@NgModule({
  declarations: [DemoComponent],
  imports: [
    CommonModule
  ],
  exports: [AModule]
})
export class AModule{ }

และ BModule ของคุณควรเป็น

@NgModule({
  declarations: [],
  imports: [
    CommonModule, AModule
  ],
  exports: [],
})
export class BModule { }

ในบางกรณีอาจเกิดขึ้นเมื่อคุณสร้างโมดูลสำหรับ HomeComponent และในการกำหนดเส้นทางแอปโมดูลที่คุณให้โดยตรงทั้งสอง

ส่วนประกอบ: HomeComponent, loadChildren: "./ modules /.../ HomeModule.module # HomeModule"ใน Routes array

เมื่อเราลองขี้เกียจโหลดเราจะให้แอตทริบิวต์ loadChildren เท่านั้น

ฉันได้รับข้อผิดพลาดนี้เนื่องจากฉันมีชื่อส่วนประกอบเดียวกันใน 2 โมดูลที่แตกต่างกัน วิธีแก้ปัญหาหนึ่งคือถ้าใช้ร่วมกันใช้เทคนิคการส่งออก ฯลฯ แต่ในกรณีของฉันทั้งคู่ต้องตั้งชื่อเหมือนกัน แต่จุดประสงค์ต่างกัน

ปัญหาที่แท้จริง

ดังนั้นในขณะที่นำเข้าส่วนประกอบ B intellisense นำเข้าเส้นทางของ Component A ดังนั้นฉันจึงต้องเลือกตัวเลือกที่ 2 ของเส้นทางส่วนประกอบจาก intellisense และนั่นช่วยแก้ปัญหาของฉันได้