Ionic 3 iOS build --prod 不工作：2 个模块错误的声明

Question

我无情地尝试使用几种不同的方法构建我的 Ionic 3 应用程序以用于生产。

尝试

首先，我从 Angular 导入了 enableProdMode，并在我的 app.component.ts 构造函数中调用了 enableProdMode。反过来，我在构建应用程序时得到了黑屏。

我认为这是不必要的步骤，因为 Ionic Framework documentation 建议我只需运行 ionic cordova build ios --prod 即可获得生产版本。反过来，我得到了以下错误。

错误

在运行使用上述代码行来构建我的生产应用程序后，我在控制台输出中收到了它，然后我的构建被终止（为便于阅读而压缩）。

Type AvatarComponent in .../avatar.ts is part of the declarations of 2 modules: AppModule in .../app.module.ts and AvatarComponentModule in .../avatar.module.ts! Please consider moving AvatarComponent in .../avatar.ts to a higher module that imports AppModule in .../app.module.ts and AvatarComponentModule in .../avatar.module.ts.

因此，我尝试完全按照 Cordova 提示我做的，所以我删除了我的 avatar.module.ts 文件，瞧，错误消失了。令我沮丧的是，我项目中的每个组件都出现了这个问题（请记住，每个组件都是通过 ionic g component 自动生成的）。对每个组件重复此过程后，我的应用程序开始加载 空白屏幕 就像我尝试使用 enableProdMode.

时一样

杂项。详情

cli packages:

    @ionic/cli-utils  : 1.13.1
    ionic (Ionic CLI) : 3.13.2

global packages:

    cordova (Cordova CLI) : 7.0.1 

local packages:

    @ionic/app-scripts : 1.3.7
    Cordova Platforms  : android 6.2.3 ios 4.4.0
    Ionic Framework    : ionic-angular 3.2.1

System:

    Android SDK Tools : 26.0.1
    Node              : v8.6.0
    npm               : 5.4.2 
    OS                : macOS Sierra
    Xcode             : Xcode 8.3.3 Build version 8E3004b 

Misc:

    backend : legacy

总结

我想要一种方法来缓解 Type ___ in ___/__.ts is part of the declarations of 2 modules 问题，并解释为什么尽管我使用了预安装的生成方法也会出现这种情况。

随时要求澄清。提前致谢！

Answer 1

'is part of the declarations of 2 modules'

的解释

为了解释 ionic g 问题，在 ionic 3 中，他们已经开始将您的组件配置为延迟加载。这就是为什么您最终得到 .module.ts 文件的原因。在我的例子中，我采用了不同的方法，我实际上在我的应用程序中包含了该组件的模块。module.ts

分享。module.ts

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { SharePage } from './share';

@NgModule({
  declarations: [
    SharePage,
  ],
  imports: [
    IonicPageModule.forChild(SharePage),
  ],
})
export class SharePageModule {}

app.module.ts

// I removed other modules just look at how I encorporate the component "SharedPageModule"
import {SharePageModule} from "../pages/share/share.module";

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    ComponentsModule,
    ProjectPageModule,
    SharePageModule,
    FormsModule,
    IonicModule.forRoot(MyApp,{
      preloadModules: true
    }),
    IonicStorageModule.forRoot(),
    MomentModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    EmailComposer,
    File,
    Globalization,
    Keyboard,
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler},
    ModelProvider
  ]
})
export class AppModule {
}

正在解决您的问题

我在 ionic cordova build ios --prod 构建时没有遇到任何问题，也没有在运行时出现白屏死机，所以也许像我一样导入模块会有所帮助。

我怀疑这能否解决您的死机白屏问题，因此我建议 debugging on your device or simulator。

Answer 2

在我的例子中，解决方案是从 Ionic 生成的每个组件和页面文件夹中删除 .module.ts（ngModule 文件）。然后，我确保我的应用程序中的组件在我的 app.module.ts 文件中列为 declarations。该应用程序在生产环境中完美编译。

这是我的示例组件或页面的文件夹结构现在的样子：

/examplecomponent
    /examplecomponent.html
    /examplecomponent.scss
    /examplecomponent.ts

此外，这是我的 app.module.ts 文件导入这些组件的方式：

import { ExampleComponent } from '../components/examplecomponent/examplecomponent';

@NgModule({
      declarations: [
            ExampleComponent
      ],
      imports: [
            IonicModule.forRoot(App),
            CloudModule.forRoot(cloudSettings),
            ElasticModule,
            BrowserModule,
            HttpModule
      ],
      bootstrap: [IonicApp],
      entryComponents: [
            MyApp,
            MainPage
      ],
      providers: [
            {provide: ErrorHandler, useClass: IonicErrorHandler},
            // All Injectable Classes Go Here
            Alert,
            Analytics,
            Auth,
            Background
      ]
})
export class AppModule {}

如果您的问题仍然存在，请参阅 Philip Brack 的解决方案。

Ionic 3 iOS build --prod 不工作：2 个模块错误的声明

Ionic 3 iOS build --prod Not Working: Declarations of 2 Modules Error

production

build

cordova

ionic3

尝试

错误

杂项。详情

总结

'is part of the declarations of 2 modules'

分享。module.ts

app.module.ts

正在解决您的问题