如果 '' 是 Angular 组件，则验证它是否是该模块的一部分

Question

我正在开发 Angular 9 项目。随着项目不断增长，我决定将代码拆分为功能模块。我创建了一个单独的功能模块，声明并导出了每个子组件。我还在 AppModule 中导入了功能模块。

运行后ng serve，我仍然遇到此错误：（If 'app-component-name' is an Angular component, then verify that it is part of this module.该错误发生在我的功能模块中使用的每个组件上，导致数十个错误行具有相同的消息。）

这是一个片段

登陆页面.module.ts

//Core imports
...

//Lib imports
...

//Routing
import { LandingPageRoutingModule } from './landing-page-routing.module';

//Shared components
...

//Components
import { LandingPageComponent } from './landing-page.component';
import { SectionCompositionLayoutComponent } from './section-composition/section-composition-layout/section-composition-layout.component';
import { SectionPresentationLayoutComponent } from './section-presentation/section-presentation-layout/section-presentation-layout.component';
import { SectionContactLayoutComponent } from './section-contact/section-contact-layout/section-contact-layout.component';
import { SectionDescriptionLayoutComponent } from './section-description/section-description-layout/section-description-layout.component';
import { SectionHeaderLayoutComponent } from './section-header/section-header-layout/section-header-layout.component';
import { SectionLocationLayoutComponent } from './section-location/section-location-layout/section-location-layout.component';
import { SectionPricesLayoutComponent } from './section-prices/section-prices-layout/section-prices-layout.component';
import { SectionProximitiesLayoutComponent } from './section-proximities/section-proximities-layout/section-proximities-layout.component';
import { CompoDetailsComponent } from './section-composition/compo-details/compo-details.component';
import { CompoTotalComponent } from './section-composition/compo-total/compo-total.component';
import { HeaderComponent } from './section-header/header/header.component';
import { InfobarComponent } from './section-header/infobar/infobar.component';
import { CallToActionComponent } from './section-presentation/call-to-action/call-to-action.component';
import { ExtraCardComponent } from './section-prices/extra-card/extra-card.component';
import { PricesTabComponent } from './section-prices/prices-tab/prices-tab.component';
import { CardDistanceComponent } from './section-proximities/card-distance/card-distance.component';
import { NearComponent } from './section-proximities/near/near.component';


@NgModule({
  declarations: [
    LandingPageComponent, 
    SectionPresentationLayoutComponent, 
    SectionCompositionLayoutComponent, 
    SectionContactLayoutComponent, 
    SectionDescriptionLayoutComponent, 
    SectionHeaderLayoutComponent, 
    SectionLocationLayoutComponent,
    SectionPricesLayoutComponent, 
    SectionProximitiesLayoutComponent,
    BouncingIconComponent,
    BtnContactComponent,
    FlagComponent,
    SeparatorComponent,
    CompoDetailsComponent,
    CompoTotalComponent,
    HeaderComponent,
    InfobarComponent,
    CallToActionComponent,
    CarouselComponent,
    ExtraCardComponent,
    PricesTabComponent,
    CardDistanceComponent,
    NearComponent
  ],
  imports: [
    CommonModule,
    LandingPageRoutingModule,

    //Libs imports
    ...
  ],

  exports: [
    LandingPageComponent, 
    SectionPresentationLayoutComponent, 
    SectionCompositionLayoutComponent, 
    SectionContactLayoutComponent, 
    SectionDescriptionLayoutComponent, 
    SectionHeaderLayoutComponent, 
    SectionLocationLayoutComponent,
    SectionPricesLayoutComponent, 
    SectionProximitiesLayoutComponent,
    BouncingIconComponent,
    BtnContactComponent,
    FlagComponent,
    SeparatorComponent,
    CompoDetailsComponent,
    CompoTotalComponent,
    HeaderComponent,
    InfobarComponent,
    CallToActionComponent,
    CarouselComponent,
    ExtraCardComponent,
    PricesTabComponent,
    CardDistanceComponent,
    NearComponent
  ],
  
  providers: [
    ...
  ],
})
export class LandingPageModule { }

登陆页面路由.module.ts

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

import { LandingPageComponent } from './landing-page.component';

const routes: Routes = [{ path: '', component: LandingPageComponent }];

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

应用程序模块.ts

//Core imports
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { HttpClientModule } from '@angular/common/http';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';


//Lib imports
...

//Core Components
import { AppComponent } from './app.component';

//Feature modules
import { LandingPageModule } from './landing-page/landing-page.module';


@NgModule({
  declarations: [
    AppComponent
  ],

  imports: [
    //Core imports
    BrowserModule.withServerTransition({ appId: 'serverApp' }),
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,

    //Libs imports
    ...

    //Feature module imports
    LandingPageModule
  ],

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

应用程序路由.module.ts

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

const routes: Routes = [
  { path: '', loadChildren: () => import('./landing-page/landing-page.module').then(m => m.LandingPageModule) },
  { path: '**', redirectTo: '' }
];

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

阅读文档和教程后，我找不到它不起作用的原因。npm update/install我一次又一次地尝试，ng serve但仍然不起作用。在此先感谢您的帮助。

Answer 1

有几点需要澄清：

• 如果您在 AppModule 中导入模块，则该模块将成为主包的一部分，并且不会延迟加载。（如果您想延迟加载，则不应将 LandingPageModule 添加到 AppModule）
• 如果您收到 error If 'app-component-name' is an Angular component...，这意味着您在出现此错误的模块范围内不存在此组件。您可以通过两种方式获取模块中可用的组件：将此组件添加到declarations或导入导出此组件的模块。
• 如果你想在少数延迟加载的模块中使用某个组件，你应该将该组件移至共享模块，并将该模块导入到每个需要该组件的模块中。

因此，如果您想将应用程序与延迟加载的模块分开，您应该确保：

1. 您的所有模块都已声明或导入了所有必需的组件。
2. 所有延迟加载的模块仅通过路由连接到您的应用程序模块。