Если '' - это компонент Angular, убедитесь, что он является частью этого модуля.

Question

Я работаю над проектом Angular 9. Пока проект рос, я решил разбить код на функциональные модули. Я создал отдельный функциональный модуль, объявил и экспортировал каждый дочерний компонент. Я также импортировал функциональный модуль в AppModule.

После запуска ng serve у меня все еще есть эта ошибка: If 'app-component-name' is an Angular component, then verify that it is part of this module. (Ошибка возникает на каждом отдельном компоненте, используемом в моем функциональном модуле, что приводит к дюжине строки ошибки с тем же сообщением.)

Вот фрагмент

landing-page.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 { }

лендинг -page-routing.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 { }

app.module.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 { }

app-routing.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

Во-первых, если бы было проще отладить проблему, если бы вы могли поделиться ссылкой на свой код в stackblitz или каким-либо другим способом.

Исходя из того, какой код вы поделили, похоже, что у вас есть оба импортировал и лениво загрузил функциональный модуль в app.module.ts и app-routing.module.ts . вы можете выполнять любое из них, но не оба одновременно

Answer 2

Несколько вещей, которые следует прояснить:

• если вы импортируете свой модуль в AppModule, этот модуль становится частью вашего основного пакета и не будет загружаться лениво. (Вы не должны добавлять свой LandingPageModule в AppModule, если хотите загружать его лениво)
• Если вы получаете ошибку If 'app-component-name' is an Angular component..., это означает, что у вас нет этого компонента в объеме модуля, в котором вы получаете это ошибка. Вы можете получить компонент, доступный в модуле, двумя способами: добавить этот компонент в declarations или импортировать модуль, который экспортирует этот компонент.
• Если вы хотите использовать какой-либо компонент в нескольких лениво загружаемых модулях, вам следует переместить этот компонент в общий модуль и импортируйте этот модуль в каждый модуль, где вам нужен этот компонент.

Итак, если вы хотите разделить свое приложение с ленивыми загруженными модулями, вы должны быть уверены, что:

1. Все ваши модули объявили или импортировали все необходимые компоненты.
2. Все ваши лениво загруженные модули присоединились к вашему модулю приложения с помощью маршрутизации и только с маршрутизацией.