构建 Angular 应用程序时出现“没有为“类{}”找到 NgModule 元数据错误

Question

在我的 Angular 应用程序中，我有多个模块。我将所有组件从 AppModule 移到 MainModule（新的）。现在我在 AppModule 中导入了 MainModule。当我使用ng serve 运行应用程序时，一切正常。但是当我运行ng build --prod 时，我遇到了以下问题。

我的模块文件是：

AppModule：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { MainModule } from './main.module';
import { AppComponent } from './app.component';


@NgModule({
  declarations: [
  ],
  imports: [
    MainModule
  ],
  providers: [],
  exports: [],
  bootstrap: [AppComponent]
})
export class AppModule {}

和

主模块：

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

import { AppComponent } from './app.component';
import { AccountDetailsComponent } from './pages/account-details/account-details.component';
import { KPIsComponent } from './components/kpis/kpis.component';
import { ConsentActivitiesComponent } from './components/consent-activities/consent-activities.component';
import { AccountsListComponent } from './components/accounts-list/accounts-list.component';
import { AccountCardComponent } from './components/account-card/account-card.component';
import { CardCommonLayoutComponent } from './components/card-common-layout/card-common-layout.component';
import { LinkedAccountsComponent } from './components/linked-accounts/linked-accounts.component';
import { StepperNavComponent } from './pages/account-link/components/stepper-nav/stepper-nav.component';
import { FIListComponent } from './pages/account-link/components/fi-list/fi-list.component';
import { DiscoverAccountsComponent } from './pages/account-link/components/discover-accounts/discover-accounts.component'
import { LinkAccountsComponent } from './pages/account-link/components/link-accounts/link-accounts.component'
import { AccountDashboardComponent } from './pages/account-dashboard/account-dashboard.component';
import { AccountActionComponent } from './components/account-action/account-action.component';
import { ProfileComponent } from './pages/profile/profile.component';
import { PageWrapperComponent } from './pages/recent-activities/page-wrapper/page-wrapper.component';
import { ChangePinComponent } from './pages/change-pin/change-pin.component';
import { FilterDropdownComponent } from './pages/account-link/components/filter-dropdown/filter-dropdown.component'
import { LinkAccountComponent } from './pages/account-link/components/link-account/link-account.component';
import { DiscoverAccountComponent } from './pages/account-link/components/discover-account/discover-account.component'
import { DashboardComponent } from './pages/dashboard/dashboard.component';
import { LinkingStepperComponent } from './pages/account-link/linking-stepper/linking-stepper.component';
import { AccountLinkingIntroScreenComponent } from './components/account-linking-intro-screen/account-linking-intro-screen.component';


@NgModule({
  declarations: [
    AppComponent,
    DashboardComponent,
    ...   
    LinkAccountComponent,
    DiscoverAccountComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    HttpClientModule,
    AppRoutingModule,
    SharedModule,
  ],
  providers: [],
  bootstrap: [],
  exports: [
    AppComponent,
    DashboardComponent,
    ...
    AppRoutingModule,
    SharedModule,
  ]
})
export class MainModule { }

ma​​in.ts:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { LibrModule } from './app/libr.module';
import 'zone.js';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

if(environment.library) {
  platformBrowserDynamic().bootstrapModule(MainModule)
    .catch(err => console.error(err));
} else {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
}

我不明白实际问题。请帮我解决这个问题。

谢谢...

Answer 1

经过大量试验和错误案例，我发现main.ts 中的 if 条件导致了问题。删除 if 条件并正常放置后，一切正常。

我改变了这个

if(environment.library) {
  platformBrowserDynamic().bootstrapModule(MainModule)
    .catch(err => console.error(err));
} else {
  platformBrowserDynamic().bootstrapModule(AppModule)
    .catch(err => console.error(err));
}

对此（仍然不确定，为什么上面不起作用）

platformBrowserDynamic().bootstrapModule(MainModule)
    .catch(err => console.error(err));

我还将 if 条件移至 angular.json 文件。在该文件中，我在配置下创建了另一个对象，并在其中添加了fileReplacements 中的条件，如下所示

"fileReplacements": [
    {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.lib.ts"
    },
    {
        "replace": "src/main.ts",
        "with": "src/main.lib.ts"
    }
],

如上，我实现了main.ts文件的条件加载。

希望这对某人有所帮助。

谢谢...