组件是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

我的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中删除声明，我会在运行离子服务时发现找不到登录页面的错误

从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，则必须将CC_4导出AddEvent组件。幸运的是，您已经有了配置的，但是如果省略了，如果您尝试在AppModule

有些使用Lazy loading的人会偶然发现此页面。

这是我为修复共享 a 指令。。

创建一个新的共享模块

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

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

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

该解决方案在离子3的离子3中起作用，用于由Ionic-CLI生成的页面，并在ionic serve和ionic cordova build android --prod --release命令中起作用！

快乐...

如果您的页面是通过使用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,
],

在角4中。此错误被视为NG服务运行时间缓存问题。

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

案例：2在错误的位置导入一个组件，然后在正确的模块中删除并替换，该时间将其视为NG服务缓存问题。需要停止项目并再次开始使用NG服务，它将按预期工作。

解决了它 - 组件是声明2个模块

remove pagename.module.ts文件
从'ionic-angular'中删除导入{ionicapp};在pagename.ts文件
从pagename.ts文件删除@ionicpage((

并运行命令离子Cordova构建Android - Prod -Release 它在我的应用程序

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

您可以尝试此解决方案(对于离子3(

在我的情况下，当我使用以下代码调用页面

时发生此错误

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

我刚刚删除了以下引号，还将该页面导入我使用的文件顶部的页面

this.navctrl.push(login(;//正确

我目前无法解释区别现在，使用离子-CLI是一个角模块。这意味着您将模块添加到文件中的导入中

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

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

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');
 }

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

也有相同的问题。只需确保删除"声明"中的每一次模块，但是AppModule。

为我工作。

简单修复

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

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

由于错误所说的话，如果您的页面/组件已经具有离子模块文件，请从根中删除模块addevent，如果不只是从其他/子页面/组件中删除它如果要使用的话，则仅在导入的一个模块文件中存在页面/组件。

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

我意外创建了我自己的组件，相同名称作为库的组件。

当我使用我的IDE自动对组件的库自动填充库时，我选择了错误的库。

因此，此错误是在抱怨的， i是重新定义的组件。

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

我也可以通过不同的命名来解决：避免模棱两可。

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

在共享组件中。声明这些组件。然后在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 { }

我有相同的错误，但是我发现当您导入AddEventModule时，您无法导入AddEvent模块，因为在这种情况下会出现错误。/p>

您可以尝试此解决方案(对于离子3(

相关内容

最新更新

热门标签：