成分是2个模块中的声明的一部分

问题描述 投票:83回答:15

我尝试建立离子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 creat 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 {}

和我的外接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删除声明,我得到了登录页面没有找到错误,在运行离子服务

angular build ionic2 declaration ionic3
15个回答
164
投票

AppModule取出声明,但更新AppModul配置导入您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组件,如果你想使用它的是模块外。幸运的是,你已经配置了的,但如果省略,你已经得到了一个错误,如果你试图在你的AddEvent的另一个组件使用AppModule组件


0
投票

简单的修复,

转到您app.module.ts文件,并remove/commentadd_event结合一切。没有必要将组件添加到其由App.module.t生成,因为它创建称为ionic cli部件的独立模块的components.module.tss的。

它具有所需要的模块组件进口


0
投票

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

  1. 在删除应用程序pagename.module.ts文件
  2. 从“离子 - 角”删除进口{IonicApp};在pagename.ts文件
  3. 从pagename.ts文件中删除@IonicPage()

并运行命令离子科尔多瓦构建Android --prod --release其工作在我的应用


0
投票

有同样的问题。只是要删除“声明”,但的AppModule模块的每次出现。

为我工作。


0
投票

由于错误说,以去除根模块的addEvent如果你的页面/组件已经有离子模块文件如果不只是从另一个/子页/组件删除它,在最后页/组件应该出现在只有一个模块文件进口如果使用。

具体来说,您应该如果需要在多个页面,并且如果特定页面保持在只有一个页面在根模块添加。


0
投票

我不小心创建了自己的组件具有相同的名称为库的组成部分。

当我用我的IDE来自动导入库的组成部分,我选择了错误的库。

因此,这种错误抱怨,我再次声明组件。

我固定从我自己的组件的代码输入,而不是库。

我还可以通过不同的命名修复:避免歧义。


0
投票
in this scenario.

create another shared module in that import all the component which is being used in multiple module. 

in shared component. declare those component.

and then import sharedmodule in appmodule as well as in other module where you want to access. it will work 100% , I did this and got it working.

@NgModule({
declarations: [HeaderComponent,NavigatorComponent],
imports: [
CommonModule, BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
FormsModule,
]
})
export class SharedmoduleModule { }
const routes: Routes = [
{
path: 'Parrent-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 { }

-3
投票

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


35
投票

有些人使用Lazy loading会碰到这个页面绊倒。

这是我做过什么来解决共享指令。

  1. 创建新的共享模块

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和你的其他模块(S)

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

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

14
投票

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

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

该解决方案在离子3工作了,通过离子-CLI生成并在这两个ionic serveionic cordova build android --prod --release命令作品的网页!

要开心...


5
投票

- 在角度4.被认为是这个错误的NG发球运行时的缓存问题。

案例:1将出现此错误,一旦你在一个模块中导入组件,并再次在子模块将出现导入。

案例:2导入一个组件在错误的地点和移除,正确的模块替换中,那个时候考虑为NG服务缓存问题。需要停止项目并启动待办事宜再次纳克服务,符合市场预期它将工作。


5
投票

如果使用CLI创建您的网页,然后它会创建filename.module.ts,那么你必须在app.module.ts文件导入阵列注册您的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,
],

1
投票

当您运行离子命令该模块会自动添加。但是它不是necessery。因此,另一种解决方案是从项目中删除加载项event.module.ts。


1
投票

你可能只是尝试此解决方案(用于离子3)

就我而言,当我使用下面的代码调用一个页面此错误发生

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

我只是删除了引号像下面还引进上,我使用的呼叫登录页面文件的顶部该页

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

我不能在这个时候解释不同,因为我是一个初学者的水平开发


1
投票

由于离子3.6.0版本现在使用离子-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 {}

1
投票

要超越这个错误,你应该通过删除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

© www.soinside.com 2019 - 2024. All rights reserved.