Ionic构建PWA执行ionic build browser --prod --release报错

一、修复构建命令参数错误 #

你用的ionic build browser --prod --release命令存在参数使用错误，Ionic CLI已经给出了明确提示：ionic build仅用于构建Web资源，不接受browser这类平台参数。如果要构建浏览器平台的生产发布包，应该使用Cordova构建命令：

ionic cordova build browser --prod --release

二、解决组件重复声明导致的AoT构建失败 #

这个TypeScript错误是Angular开发中非常常见的模块规则问题：同一个组件绝对不能在多个NgModule的declarations数组里重复声明。你的ProgressBarComponent同时出现在AppModule和ComponentsModule的声明列表中，直接违反了Angular的模块隔离规则，导致AoT预编译失败。

具体修复步骤： #

1. 从AppModule中移除ProgressBarComponent的声明
   打开你的app.module.ts，先删掉顶部ProgressBarComponent的导入语句，再把declarations数组里的ProgressBarComponent项移除。
2. 确保ComponentsModule正确导出ProgressBarComponent
   检查你的ComponentsModule（路径src/components/components.module.ts），要保证：
   • ProgressBarComponent在它的declarations数组中（这是它的归属模块）
   • ProgressBarComponent也在它的exports数组中（这样其他导入该模块的地方才能使用这个组件）
3. 在AppModule中导入ComponentsModule
   把ComponentsModule添加到AppModule的imports数组里，这样AppModule下的所有页面就能正常使用ProgressBarComponent了。

修改后的AppModule示例代码： #

import { IonTextAvatarComponent } from '../components/ion-text-avatar/ion-text-avatar';
// 移除这行导入：import { ProgressBarComponent } from '../components/progress-bar/progress-bar';
import { FlashCardComponent } from '../components/flash-card/flash-card';
import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';
import { IonicStorageModule } from '@ionic/storage';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';
import { ContentPage } from '../pages/content/content';
import { TrainingPage } from '../pages/training/training';
import { AuthProvider } from '../providers/auth/auth';
import { TrainingContentPage } from '../pages/training-content/training-content';
import { DataProvider } from '../providers/data/data';
import { HttpModule, Http } from '@angular/http';
import { HttpClientModule } from '@angular/common/http';
import { SanitizePipe } from '../pipes/sanitize/sanitize';
// 新增ComponentsModule的导入
import { ComponentsModule } from '../components/components.module';

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    // 移除这行声明：ProgressBarComponent,
    TrainingContentPage,
    QuizPage,
    FlashCardComponent,
    SanitizePipe,
    IonTextAvatarComponent
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpModule,
    HttpClientModule,
    // 新增ComponentsModule的导入
    ComponentsModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    TrainingContentPage,
    QuizPage,
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    AuthProvider,
    IonicStorageModule,
    DataProvider,
    HttpModule,
    Http,
    HttpClientModule,
  ]
})
export class AppModule {}

完成以上修改后，重新执行正确的构建命令，应该就能顺利通过AoT预编译，完成PWA的生产构建了。

内容的提问来源于stack exchange，提问作者sagar290