组件是2个模块声明的一部分答案

【问题标题】：Component is part of the declaration of 2 modules组件是2个模块声明的一部分
【发布时间】：2017-09-21 17:43:14
【问题描述】：

我尝试构建一个 ionic 2 应用程序。当我在浏览器中使用 ionic serve 尝试应用程序或在模拟器上启动它时，一切正常。

但是当我每次尝试构建它时都会出错

ionic-app-script tast: "build"
Error Type AddEvent in "PATH"/add.event.ts is part of the declarations of 2 modules: AppModule in "PATH"/app.modules.ts and AddEvent in "PATH"/add-event.module.ts.
Please consider moving AddEvent in "PATH"/add-event.ts to a higher module that imports AppModule in "PATH"/app.module.ts and AddEventModule.
You can also create a new NgModule that exports and includes AddEvent then import that NgModule in AppModule and AddEventModule

我的 AppModule 是

import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
import { AngularFireModule } from 'angularfire2';
import { MyApp } from './app.component';
import { Eventdata } from '../providers/eventdata';
import { AuthProvider } from '../providers/auth-provider';
import { HttpModule } from '@angular/http';

import { HomePage } from '../pages/home/home';
import { Login } from '../pages/login/login';
import { Register } from '../pages/register/register';
import { AddEvent } from '../pages/add-event/add-event';
import { EventDetails } from '../pages/event-details/event-details';

import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';
   

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Login,
    Register,
    AddEvent,
    EventDetails
    
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    AngularFireModule.initializeApp(config)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Login,
    Register,
    AddEvent,
    EventDetails
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}, Eventdata, AuthProvider
  ]
})
export class AppModule {}

而我的 add-event.module.ts 是

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { AddEvent } from './add-event';

@NgModule({
  declarations: [
    AddEvent,
  ],
  imports: [
    IonicPageModule.forChild(AddEvent),
  ],
  exports: [
    AddEvent
  ]
})
export class AddEventModule {}

我知道我必须删除其中一个声明，但我不知道如何。

如果我从 AppModule 中删除声明，我会在运行 ionic serve 时收到一个找不到登录页面的错误

【问题讨论】：

标签： angular build ionic2 declaration ionic3

【解决方案1】：

从AppModule 中删除声明，但更新AppModule 配置以导入您的AddEventModule。

.....
import { AddEventModule } from './add-event.module';  // <-- don't forget to import the AddEventModule class

@NgModule({
  declarations: [
    MyApp,
    HomePage,
    Login,
    Register,
    //AddEvent,  <--- remove this
    EventDetails

  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HttpModule,
    AngularFireModule.initializeApp(config),
    AddEventModule,  // <--- add this import here
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage,
    Login,
    Register,
    AddEvent,
    EventDetails
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}, Eventdata, AuthProvider
  ]
})
export class AppModule {}

还有，

请注意，如果您想在该模块之外使用 AddEventModule 组件，则导出 AddEvent 组件非常重要。幸运的是，你已经配置好了，但是如果它被省略了，如果你试图在你的 AppModule 的另一个组件中使用 AddEvent 组件，你会得到一个错误

【讨论】：

嘿，谢谢您的回答，我是否还必须将我的导入从 '../pages/add-event/add-event.module'; 更改为 { AddEventModule }？因为无论有没有导入都会引发错误
在 AppModule 中，您必须为 AddEventModule 添加一个额外的导入。我会更新答案
如果我添加所有内容，则会抛出错误“静态解析符号值时遇到错误。无法解析相对于解析符号 AddModule 的 add-event.module”
add-event.module.ts 文件在哪个文件夹？
在与 AddEvents 相同的文件夹中，所以我使用了 ''../pages/add-event/add-event.module';该页面由 ionic g page 生成

【解决方案2】：

一些使用Lazy loading 的人会偶然发现这个页面。

这是我为修复共享一个指令所做的。

创建一个新的共享模块

shared.module.ts

import { NgModule, Directive,OnInit, EventEmitter, Output, OnDestroy, Input,ElementRef,Renderer } from '@angular/core';
import { CommonModule } from '@angular/common';

import { SortDirective } from './sort-directive';

@NgModule({
  imports: [
  ],
  declarations: [
  SortDirective
  ],
  exports: [
    SortDirective
  ]
})

export class SharedModule { }

然后在 app.module 和您的其他模块中

import {SharedModule} from '../directives/shared.module'
...

@NgModule({
   imports: [
       SharedModule
       ....
       ....
 ]
})
export class WhateverModule { }

【讨论】：

为什么不直接添加到 app.module 中呢？或者如果您要从 app.module 导入它，也可以是 core.module
这太完美了！我有一个补充......您需要将 IonicPageModule.forChild(SharedModule) 添加到 ShareModule 的 Imports。在我这样做之前，我遇到了各种奇怪的问题。

【解决方案3】：

解决方案非常简单。查找 *.module.ts 文件和注释声明。在您的情况下，找到 addevent.module.ts 文件并删除/评论下面的一行：

@NgModule({
  declarations: [
    // AddEvent, <-- Comment or Remove This Line
  ],
  imports: [
    IonicPageModule.forChild(AddEvent),
  ],
})

该解决方案在 ionic 3 中适用于由 ionic-cli 生成的页面，并且适用于 ionic serve 和 ionic cordova build android --prod --release 命令！

要快乐...

【讨论】：

【解决方案4】：

在 Angular 4 中。此错误被视为 ng serve 运行时缓存问题。

case:1 会出现这个错误，一旦你在一个模块中导入组件，再在子模块中导入就会出现。

case:2 将一个组件导入错误的位置并在正确的模块中删除和替换，当时它认为是ng服务缓存问题。需要停止项目并重新开始 -do ng serve，它会按预期工作。

【讨论】：

案例 1 是我的问题，已解决！

【解决方案5】：

如果您的页面是使用 CLI 创建的，那么它会使用 filename.module.ts 创建一个文件，那么您必须在导入数组中注册您的 filename.module.ts在 app.module.ts 文件中，并且不要在声明数组中插入该页面。

例如。

import { LoginPageModule } from '../login/login.module';


declarations: [
    MyApp,
    LoginPageModule,// remove this and add it below array i.e. imports
],

imports: [
        BrowserModule,
        HttpModule,
        IonicModule.forRoot(MyApp, {
           scrollPadding: false,
           scrollAssist: true,
           autoFocusAssist: false,
           tabsHideOnSubPages:false
        }),
       LoginPageModule,
],

【讨论】：

【解决方案6】：

这个模块是在你运行 ionic 命令时自动添加的。然而，这不是必需的。因此，另一种解决方案是从项目中删除 add-event.module.ts。

【讨论】：

【解决方案7】：

你可以试试这个解决方案（对于 Ionic 3）

就我而言，当我使用以下代码调用页面时会发生此错误

 this.navCtrl.push("Login"); // Bug

我刚刚删除了如下引号，并在我用来调用登录页面的文件顶部导入了该页面

this.navCtrl.push(登录); // 正确

由于我是初级开发人员，目前无法解释其中的区别

【讨论】：

你停止使用延迟加载我的朋友谷歌这很重要

【解决方案8】：

自从 Ionic 3.6.0 发布以来，使用 Ionic-CLI 生成的每个页面现在都是一个 Angular 模块。这意味着您必须将模块添加到文件 src/app/app.module.ts 中的导入中

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 { MyApp } from "./app.component";
import { HomePage } from "../pages/home/home"; // import the page
import {HomePageModule} from "../pages/home/home.module"; // import the module

@NgModule({
  declarations: [
    MyApp,
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    HomePageModule // declare the module
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage, // declare the page
  ],
  providers: [
    StatusBar,
    SplashScreen,
    { provide: ErrorHandler, useClass: IonicErrorHandler },
  ]
})
export class AppModule {}

【讨论】：

【解决方案9】：

要克服这个错误，你应该首先删除 app.module.ts 的所有导入，并有这样的东西：

            import { BrowserModule } from '@angular/platform-browser';
            import { HttpClientModule } from '@angular/common/http';
            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 { MyApp } from './app.component';


            @NgModule({
              declarations: [
                MyApp
              ],
              imports: [
                BrowserModule,
                HttpClientModule,
                IonicModule.forRoot(MyApp)
              ],
              bootstrap: [IonicApp],
              entryComponents: [
                MyApp
              ],
              providers: [
                StatusBar,
                SplashScreen,
                {provide: ErrorHandler, useClass: IonicErrorHandler}
              ]
            })
            export class AppModule {}

接下来编辑您的页面模块，如下所示：

            import { NgModule } from '@angular/core';
            import { IonicPageModule } from 'ionic-angular';
            import { HomePage } from './home';

            @NgModule({
              declarations: [
                HomePage,
              ],
              imports: [
                IonicPageModule.forChild(HomePage),
              ],
              entryComponents: [HomePage]
            })
            export class HomePageModule {}

然后在所有页面的组件注释之前添加IonicPage的注释：

import { IonicPage } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})

然后将您的 rootPage 类型编辑为字符串并删除页面的导入（如果您的应用组件中有任何页面）

rootPage: string = 'HomePage';

那么导航功能应该是这样的：

 /**
* Allow navigation to the HomePage for creating a new entry
*
* @public
* @method viewHome
* @return {None}
*/
 viewHome() : void
 {
  this.navCtrl.push('HomePage');
 }

您可以在此处找到此解决方案的来源：Component is part of the declaration of 2 modules

【讨论】：

【解决方案10】：

解决了 -- 组件是 2 个模块声明的一部分

移除 app 中的 pagename.module.ts 文件
从 'ionic-angular' 中删除导入 { IonicApp }；在 pagename.ts 文件中
从 pagename.ts 文件中删除 @IonicPage()

然后运行命令ionic cordova build android --prod --release 它在我的应用程序中工作

【讨论】：

【解决方案11】：

有同样的问题。只需确保删除“声明”中出现的所有模块，但 AppModule。

为我工作。

【讨论】：

【解决方案12】：

简单的修复，

转到您的app.module.ts 文件和remove/comment 与add_event 绑定的所有内容。无需将组件添加到由ionic cli 生成的App.module.ts，因为它为称为components.module.ts 的组件创建了一个单独的模块。

它具有所需的模块组件导入

【讨论】：

【解决方案13】：

正如错误所说，如果您的页面/组件已经有离子模块文件，如果不只是从其他/子页面/组件中删除它，则从根目录中删除模块 AddEvent，最后页面/组件应该只存在于如果要使用，则导入一个模块文件。

具体来说，如果在多个页面中需要，您应该添加根模块，如果在特定页面中只保留在一个页面中。

【讨论】：

【解决方案14】：

我不小心创建了 我自己的 组件，其名称与库的组件相同。

当我使用我的 IDE 为组件自动导入库时，我选择了错误的库。

因此，这个错误是在抱怨，我正在重新声明该组件。

我通过从我自己的组件代码而不是库中导入来修复。

我也可以通过不同的命名来解决：避免歧义。

【讨论】：

【解决方案15】：

在这种情况下，创建另一个共享模块，导入多个模块中正在使用的所有组件。

在共享组件中。声明那些组件。然后在 appmodule 以及您要访问的其他模块中导入共享模块。它会 100% 工作，我这样做并让它工作。

@NgModule({
    declarations: [HeaderComponent, NavigatorComponent],
    imports: [
        CommonModule, BrowserModule,
        AppRoutingModule,
        BrowserAnimationsModule,
        FormsModule,
    ] 
})
export class SharedmoduleModule { }
const routes: Routes = [
{
    path: 'Parent-child-relationship',
    children: [
         { path: '', component: HeaderComponent },
         { path: '', component: ParrentChildComponent }
    ]
}];
@NgModule({
    declarations: [ParrentChildComponent, HeaderComponent],
    imports: [ RouterModule.forRoot(routes), CommonModule, SharedmoduleModule ],
    exports: [RouterModule]
})
export class TutorialModule {
}
imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    FormsModule,
    MatInputModule,
    MatButtonModule,
    MatSelectModule,
    MatIconModule,
    SharedmoduleModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

【讨论】：

这段代码已经过角度测试并且可以完美运行

【解决方案16】：

我遇到了同样的错误，但我发现当您导入 AddEventModule 时，您无法导入 AddEvent 模块，因为在这种情况下会出现错误。

【讨论】：