Компонент є частиною декларації двох модулів

Я намагаюся створити іонний додаток 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 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 {}

і мій 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експортувати AddEventкомпонент, якщо ви хочете використовувати його поза цим модулем. На щастя, у вас це вже налаштовано, але якби це було пропущено, ви мали б помилку, якби спробували використати AddEventкомпонент в іншому компоненті вашогоAppModule

Деякі люди використовують 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 та інших модулях

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 для сторінок, які генеруються ionic-cli і працює в обох ionic serveі ionic cordova build android --prod --releaseкомандах!

Будь щасливий...

IN Angular 4. Ця помилка розглядається як проблема кешу часу керування, який виконується.

випадок: 1 ця помилка виникне, коли ви імпортуєте компонент в один модуль і знову відбудеться імпорт в підмодулі.

випадок: 2 Імпортуйте один компонент у неправильне місце та вилучіть та замініть у модулі «Правильно», який у той час вважається проблемою кешу ng. Потрібно зупинити проект і почати -знов слугувати, воно буде працювати, як очікувалося.

Якщо ваші сторінки створені за допомогою 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,
],

Цей модуль додається автоматично при запуску іонної команди. Однак це не потрібно. Тож альтернативним рішенням є видалення add-event.module.ts з проекту.

Ви можете просто спробувати це рішення (для Ionic 3)

У моєму випадку ця помилка трапляється, коли я дзвоню на сторінку, використовуючи наступний код

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

Я тільки що видалив цитати, як наведено нижче, а також імпортував цю сторінку у верхній частині файлу, який я використовував для виклику сторінки входу

this.navCtrl.push (Вхід); // Правильно

Наразі я не можу пояснити різницю, оскільки я розробник початкового рівня

З моменту випуску 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, щоб він був рядковим і видаліть імпорт сторінок (якщо в компоненті додатка є якийсь)

rootPage: string = 'HomePage';

Тоді функція навігації повинна бути такою:

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

Ви можете знайти джерело цього рішення тут: Компонент є частиною декларації двох модулів

Вирішено це - компонент є частиною декларації двох модулів

1. Видаліть файл pagename.module.ts в додатку
2. Видалити імпорт {IonicApp} з "іонно-кутовий"; у файлі pagename.ts
3. Видаліть @IonicPage () з файлу pagename.ts

І запустіть команду іонної кордової збірки android --prod - випустіть її Працюючи в моєму додатку

Була така ж проблема. Просто переконайтесь, що вилучите кожне виникнення модуля в "деклараціях", але не в AppModule.

Працювали для мене.

Просте виправлення,

Перейдіть до свого app.module.tsфайлу та remove/commentвсього, що пов’язане add_event. Немає необхідності додавати компоненти до App.module.ts, які генеруються тим, ionic cliщо він створює окремий модуль для компонентів, що називаєтьсяcomponents.module.ts .

Він має необхідний імпорт компонентів

Оскільки помилка говорить про видалення модуля AddEvent з кореня, якщо у вашій сторінці / компоненті вже є файл іонного модуля, якщо не просто видалити його з іншої / дочірньої сторінки / компонента, то в кінці сторінки / компонента має бути присутній лише один файл модуля імпортується, якщо їх використовувати.

Зокрема, ви повинні додати в кореневий модуль, якщо це потрібно на декількох сторінках, а якщо на певних сторінках зберігати його лише на одній сторінці.

Я випадково створив власний компонент з такою ж назвою , що і компонент бібліотеки.

Коли я використовував свій IDE для автоматичного імпорту бібліотеки для компонента, я вибрав неправильну бібліотеку.

Тому ця помилка скаржилася, що я знову заявив компонент.

Я виправив, імпортувавши з коду власного компонента замість бібліотеки.

Я також міг би виправити, називаючи по-іншому: уникати двозначності.

У цьому сценарії створіть інший спільний модуль, який імпортує весь компонент, який використовується в декількох модулях.

У спільному компоненті. оголосити цей компонент. А потім імпортуйте спільний модуль в додаток, а також в інший модуль, до якого ви хочете отримати доступ. Це буде працювати 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модуль, оскільки це призведе до помилки в цьому випадку.