Ionic 3 iOS build --prod无法正常工作:2个模块的声明错误 [英] Ionic 3 iOS build --prod Not Working: Declarations of 2 Modules Error

问题描述

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

I have ruthlessly tried to build my Ionic 3 app for production using several different methods.

首先，我从Angular导入了enableProdMode，并在我的app.component.ts构造函数中将其命名为enableProdMode.反过来，在构建应用程序时，我会看到空白屏幕.

Firstly I imported enableProdMode from Angular and called enableProdMode in my app.component.ts constructor. In turn, I got a blank screen when I built the app.

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

I decided that this was an unnecessary step, as the Ionic Framework documentation suggested that I simply run ionic cordova build ios --prod to get a production build. In turn, I got the following errors.

运行上述代码行以构建用于生产的应用程序后，我在控制台输出中收到了此消息，然后终止了我的构建(出于易读性而精简).

After running the aforementioned line of code to build my app for production, I received this in the console output and my build was then terminated (condensed for legibility).

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时所做的一样.

Thus, I tried doing exactly what Cordova prompted me to do, so I removed my avatar.module.ts file and voila, the error was gone. To my dismay, this issue occurred for every single component in my project (keep in mind, every component was generated automatically through ionic g component). After repeating this process for every component, my app began loading with a blank screen just as it had done when I tried using 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问题的方法，并说明为什么尽管使用了预装的生成方法，还是会发生这种情况.

Summary

I would like a way to mitigate the Type ___ in ___/__.ts is part of the declarations of 2 modules issue, as well as an explanation as to why this occurs despite my usage of the pre-installed generation method.

随时要求澄清.提前非常感谢您！

Feel free to ask for clarification. Thank you so much in advance!

推荐答案

就我而言，解决方案是从Ionic生成的每个组件和页面文件夹中删除.module.ts(ngModule文件).然后，我确保来自我的应用程序的组件在我的app.module.ts文件中被列为declarations.该应用程序在生产中可以完美编译.

In my case, the solution was to delete the .module.ts (ngModule file) from each component and page folder generated by Ionic. Then, I made sure the components from my app were listed as declarations in my app.module.ts file. The app compiled perfectly in production.

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

Here is how my folder structure for a sample component or page looks like now:

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

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

Additionally, here is how my app.module.ts file imports these components:

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 的解决方案.

If your issue persists, see Philip Brack's Solution.

这篇关于Ionic 3 iOS build --prod无法正常工作:2个模块的声明错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！