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

我想开发一个离子2应用程序。 当我在浏览器中试用离子服务或在模拟器上启动应用程序时，一切都很好。

但是当我尝试构建它的时候，每次都出错

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

我的应用程序模块是

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 {}

我的附加事件模块是

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 中删除声明，我会得到一个错误，即在运行离子服务时，没有找到登录页面

214546 次浏览
小开
最佳答案

从 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 {}

还有,

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

小开

我也有同样的错误，但是我发现当你导入一个 AddEventModule时，你不能导入一个 AddEvent模块，因为在这种情况下它会出现一个错误。

小开

这个模块是在您运行离子命令时自动添加的。不过没必要。因此，另一种解决方案是从项目中删除 Add-event. module. ts。

小开

角度4。此错误被认为是 ng 服务运行时缓存问题。

Case: 1此错误将发生，一旦您在一个模块中导入组件，并在子模块中再次导入将发生。

案例: 2导入一个组件在错误的地方，并删除和更换在正确的模块，这时它认为作为 nng 服务缓存问题。需要停止该项目，并开始-再做五服务，它将按预期工作。

小开

你可以试试这个解决方案(对于爱奥尼亚3)

在我的例子中，当我使用下面的代码调用一个页面时，就会发生这个错误

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

我只是删除了像下面这样的引号，并且还导入了文件顶部的那个页面，我用它来调用 Login 页面

Push (Login) ;//正确

由于我是一个初级开发人员，所以我现在无法解释其中的区别

小开

解决方法很简单。查找 *.module.ts文件和注释声明。在您的情况下，找到 addevent.module.ts文件并删除/注释以下一行:

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

这个解决方案工作在离子3页，由离子生成的 cli 和工程在 ionic serve和 ionic cordova build android --prod --release命令！

开心点..。

小开

自从 Ionic 3.6.0发布以来，使用 Ionic-CLI 生成的每个页面现在都是一个角度模块。 这意味着您必须将模块添加到文件 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 {}
小开

为了超越这个错误，您应该从删除 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 类型编辑为 string 并删除页面的导入(如果应用程序组件中有导入的话)

rootPage: string = 'HomePage';

然后导航函数应该是这样的:

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

您可以在这里找到这个解决方案的来源: 组件是2个模块声明的一部分

小开

如果您的页面是使用 CLI 创建的，那么它将创建一个带有 Filename.module.ts的文件，那么您必须在 app.module.ts 文件的 import 数组中注册 Filename.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,
],
小开

简单的解决办法,

转到与 add_event绑定的 app.module.ts文件和 remove/comment文件。不需要向由 ionic cli生成的 App.module.t添加组件，因为它为称为 components.module.ts的组件创建了一个单独的模块。

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

小开

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

下面是我修复 分享和 指令的方法。

  1. 创建一个新的共享模块

共享模块

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 { }
小开

解决了这个问题—— Component 是2 module 声明的一部分

  1. 在应用程序中删除 pagename.module.ts 文件
  2. 在 pagename.ts 文件中，从“ ionic-angle”中删除导入{ IonicApp }
  3. 从 pagename.ts 文件中删除@IonicPage ()

运行命令 < strong > ionic cordova build android —— prod —— release 它在我的应用程序中工作

小开

遇到同样的问题。只要确保除了 AppModule 之外，删除“声明”中出现的每个模块。

对我有用。

小开

正如错误所说，如果你的 Page/Component 已经有了离子模块文件(如果不仅仅是从另一个/子 Page/Component 中删除的话) ，那么从 root 中删除模块 AddEvent，如果要使用的话，在结束页面/Component 应该只出现在一个导入的模块文件中。

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

小开

我不小心创建了 我自己的组件，使用 同一个名字作为库的组件。

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

因此，这个错误是抱怨，我是在重申的组件。

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

我也可以通过不同的命名来解决这个问题: 避免歧义。

小开

在这个场景中，在导入多个模块中使用的所有组件的过程中创建另一个共享模块。

在共享组件中。声明那些组件。然后导入 appmodule 中的共享模块以及您想要访问的其他模块。百分之百有效，我做到了，而且成功了。

@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 { }

提交答案