组件不是任何NgModule的一部分，或者模块尚未导入模块

6 回答

• 1

  如果您没有使用延迟加载，则需要在app.module中导入HomeComponent并在声明下提及它 . 另外，不要忘记从导入中删除

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

  回复于 2024-05-02T08:16:33+08:00
• 1

  在我的情况下，我只需要重新启动服务器（即如果你正在使用 ng serve ） .

  每次我在服务器运行时添加新模块时都会发生这种情况 .

  回复于 2024-05-02T08:16:33+08:00
• 29

  我有同样的问题 . 原因是因为我在服务器仍在运行时创建了一个组件 . 解决方案是退出服务器并再次使用ng服务 .

  回复于 2024-05-02T08:16:33+08:00
• 1

  在我的情况下， 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();
    }));
  
  });
  

  回复于 2024-05-02T08:16:33+08:00
• 4

  我遇到了同样的问题，我在这里看到的一切都没有奏效 . 如果您在app-routing.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 { }
  

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

  我不会声称理解为什么会出现这种情况，但是当使用索引来导出组件时（我会假设服务等相同），当在单独的模块中引用相同的组件时，您需要从相同的文件，在这种情况下是索引，以避免此问题 .

  回复于 2024-05-02T08:16:33+08:00
• 14

  在我的情况下，Angular 6，我重命名了我的模块的文件夹和文件名 from google.map.module.ts to 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 { }
  

  回复于 2024-05-02T08:16:33+08:00