O componente faz parte da declaração de 2 módulos

117

Tento construir um aplicativo iônico 2. Quando tento o aplicativo no navegador com servidor iônico ou o lanço em um emulador, tudo funciona bem.

Mas quando tento construí-lo sempre que o erro

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

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

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

Eu entendo que tenho que remover uma das declarações, mas não sei como.

Se eu remover a declaração do AppModule, obtenho um erro informando que a página de login não foi encontrada durante a execução do serviço iônico

Stevetro
fonte

Respostas:

192

Remova a declaração de AppModule, mas atualize a AppModuleconfiguração para importar seu 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 {}

Além disso,

Observe que é importante que você AddEventModuleexporte o AddEventcomponente se quiser usá-lo fora desse módulo. Felizmente, você já configurou isso, mas se fosse omitido, você teria obtido um erro se tentasse usar o AddEventcomponente em outro componente do seuAppModule

snorkpete
fonte
ei, obrigado pela sua resposta, eu também tenho que alterar minhas importações para {AddEventModule} de '../pages/add-event/add-event.module' ;? Porque ambos, com e sem a importação, um erro é lançado
Stevetro
no AppModule, você deve incluir uma importação adicional para AddEventModule. Vou atualizar a resposta
snorkpete
Se eu adicionar tudo, o erro "Erro encontrado ao resolver estaticamente os valores de símbolo. Não foi possível resolver add-event.module relativo ao símbolo de resolução AddModule" é lançado
Stevetro
1
em que pasta está o arquivo 'add-event.module.ts'?
snorkpete
Na mesma pasta como AddEvents, então eu usei '' ../pages/add-event/add-event.module '; a página foi gerada por página g iônica
Stevetro
48

Algumas pessoas que usam Lazy loadingvão tropeçar nesta página.

Aqui está o que fiz para corrigir o compartilhamento de uma diretiva .

  1. crie um novo módulo compartilhado

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

Em seguida, em app.module e seus outros módulos

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

@NgModule({
   imports: [
       SharedModule
       ....
       ....
 ]
})
export class WhateverModule { }
Tom Stickel
fonte
por que não adicioná-lo diretamente ao app.module? Ou talvez para um core.module se você for importá-lo de app.module
Dani
6
Isto é perfeito! Eu tenho uma adição a ele ... Você precisará adicionar IonicPageModule.forChild (SharedModule) às Importações do ShareModule. Eu estava tendo todos os tipos de problemas estranhos até fazer isso.
Adway Lele
17

A solução é muito simples. Encontre *.module.tsarquivos e declarações de comentários. No seu caso, localize o addevent.module.tsarquivo e remova / comente uma linha abaixo:

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

Esta solução funcionou no ionic 3 para as páginas geradas pelo ionic-cli e funciona nos comandos ionic servee ionic cordova build android --prod --release!

Seja feliz...

EmRa228
fonte
5

IN Angular 4. Este erro é considerado como um problema de cache de tempo de execução do servidor.

caso: 1 este erro ocorrerá, uma vez que você importe o componente em um módulo e novamente ocorrerá a importação em submódulos.

case: 2 Importar um componente no lugar errado e removido e recolocado no módulo correto, dessa vez considerado como problema de cache de serviço. É necessário interromper o projeto e iniciar novamente o serviço. Funcionará conforme o esperado.

gnganpath
fonte
O caso 1 foi o problema no meu caso, RESOLVIDO!
Prem popatia
5

Se suas páginas são criadas usando CLI, então ele cria um arquivo com filename.module.ts, então você deve registrar seu filename.module.ts na matriz de importações no arquivo app.module.ts e não inserir essa página na matriz de declarações .

por exemplo.

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,
],
Sandeep
fonte
1

Este módulo é adicionado automaticamente quando você executa o comando iônico. No entanto, não é necessário. Portanto, uma solução alternativa é remover add-event.module.ts do projeto.

Jaime Yule
fonte
1

Você pode apenas tentar esta solução (para Ionic 3)

No meu caso, esse erro acontece quando eu chamo uma página usando o seguinte código

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

Acabei de remover as citações como a seguir e também importei aquela página no topo do arquivo que usei, chame a página de Login

this.navCtrl.push (Login); // correto

Não posso explicar a diferença neste momento, pois sou um desenvolvedor de nível iniciante

sijo vijayan
fonte
5
você parou de usar lazyloading, meu amigo, google, é importante
George
1

Desde o lançamento do Ionic 3.6.0, cada página gerada usando Ionic-CLI agora é um módulo Angular. Isso significa que você deve adicionar o módulo às suas importações no arquivosrc/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 {}
0x1ad2
fonte
1

Para superar esse erro, você deve começar removendo todas as importações de app.module.ts e ter algo assim:

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

Em seguida, edite o módulo de suas páginas, como este:

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

Em seguida, adicione a anotação do IonicPage antes da anotação do componente de todas as páginas:

import { IonicPage } from 'ionic-angular';

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

Em seguida, edite seu tipo rootPage para ser uma string e remova as importações de páginas (se houver algum no componente do seu aplicativo)

rootPage: string = 'HomePage';

Então, a função de navegação deve ser assim:

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

Você pode encontrar a fonte desta solução aqui: O componente faz parte da declaração de 2 módulos

Ouahib Abdallah
fonte
1

Resolvido - o componente faz parte da declaração de 2 módulos

  1. Remova o arquivo pagename.module.ts do aplicativo
  2. Remova import {IonicApp} de 'ionic-angular'; no arquivo pagename.ts
  3. Remova @IonicPage () do arquivo pagename.ts

E execute o comando ionic cordova build android --prod --release its Working in my app

Divya
fonte
1

Tive o mesmo problema. Apenas certifique-se de remover todas as ocorrências do módulo em "declarações", exceto AppModule.

Funcionou para mim.

David Vareka
fonte
0

Correção simples,

Vá para o seu app.module.tsarquivo e remove/commenttudo o que está vinculado add_event. Não há necessidade de adicionar componentes aos App.module.ts gerados pelo ionic cliporque ele cria um módulo separado para os componentes chamados components.module.ts.

Possui as importações de componentes do módulo necessárias

Kavinda Jayakody
fonte
0

Como o erro diz para remover o módulo AddEvent da raiz se sua página / componente já tiver arquivo de módulo iônico, se não apenas removê-lo da outra / página / componente filho, na página final / componente deve estar presente em apenas um arquivo de módulo importado se for usado.

Especificamente, você deve adicionar o módulo raiz se necessário em várias páginas e se em páginas específicas mantê-lo em apenas uma página.

Kuldeep Kumar
fonte
0

Eu acidentalmente criei meu próprio componente com o mesmo nome de um componente de biblioteca.

Quando usei meu IDE para importar automaticamente a biblioteca para o componente, escolhi a biblioteca errada.

Portanto, esse erro estava reclamando, que eu estava declarando novamente o componente.

Consertei importando do código do meu próprio componente, em vez da biblioteca.

Eu também poderia corrigir nomeando de forma diferente: evite ambigüidade.

The Red Pea
fonte
0

Neste cenário, crie outro módulo compartilhado que importe todos os componentes que estão sendo usados ​​no módulo múltiplo.

No componente compartilhado. declare esses componentes. E então importe o módulo compartilhado no appmodule, bem como em outro módulo onde você deseja acessar. Vai funcionar 100%, eu fiz isso e fiz funcionar.

@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 { }
Sarad Vishwakama
fonte
este código foi testado em angular e funcionando perfeitamente
Sarad Vishwakama
-3

Eu tive o mesmo erro, mas descobri que ao importar um AddEventModule, não é possível importar um AddEventmódulo, pois apresentaria um erro neste caso.

user8470307
fonte