Thành phần là một phần của việc khai báo 2 mô-đun

Tôi cố gắng xây dựng một ứng dụng ion 2. Khi tôi dùng thử ứng dụng trong trình duyệt có phục vụ ion hoặc khởi chạy nó trên trình giả lập, mọi thứ đều hoạt động tốt.

Nhưng khi tôi cố gắng xây dựng nó mỗi khi có lỗi

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 của tôi là

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

và add-event.module.ts của tôi là

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

Tôi hiểu rằng tôi phải xóa một trong những tuyên bố, nhưng tôi không biết làm thế nào.

Nếu tôi xóa khai báo khỏi AppModule, tôi gặp phải lỗi Không tìm thấy Trang đăng nhập, trong khi chạy phục vụ ion

Xóa khai báo khỏi AppModule, nhưng cập nhật AppModulecấu hình để nhập của bạn 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 {}

Cũng thế,

Lưu ý rằng điều quan trọng là bạn AddEventModulexuất AddEventthành phần nếu bạn muốn sử dụng nó bên ngoài mô-đun đó. May mắn thay, bạn đã có cấu hình đó, nhưng nếu nó bị bỏ qua, bạn sẽ gặp lỗi nếu bạn cố sử dụng AddEventthành phần này trong một thành phần khác của bạnAppModule

Một số người sử dụng Lazy loading đang sẽ vấp ngã trên trang này.

Đây là những gì tôi đã làm để sửa chữa chia sẻ một chỉ thị .

1. tạo một mô-đun chia sẻ mới

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

Sau đó, trong app.module và (các) mô-đun khác của bạn

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

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

Giải pháp rất đơn giản. Tìm *.module.tstập tin và khai báo bình luận. Trong trường hợp của bạn, tìm addevent.module.tstập tin và xóa / bình luận một dòng dưới đây:

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

Giải pháp này hoạt động trong ion 3 cho các trang được tạo bởi ionic-cli và hoạt động ở cả hai ionic servevàionic cordova build android --prod --release các lệnh!

Hãy hạnh phúc...

IN Angular 4. Lỗi này được coi là ng phục vụ vấn đề bộ đệm thời gian chạy.

trường hợp: 1 lỗi này sẽ xảy ra, một khi bạn nhập thành phần trong một mô-đun và nhập lại trong mô-đun phụ sẽ xảy ra.

trường hợp: 2 Nhập một Thành phần sai vị trí và xóa và thay thế trong mô-đun Chính xác, Thời điểm đó nó được coi là ng phục vụ vấn đề bộ đệm. Cần dừng dự án và bắt đầu lại làm, nó sẽ hoạt động như mong đợi.

Nếu các trang của bạn được tạo bằng cách sử dụng CLI thì nó sẽ tạo một tệp có filename.module.ts thì bạn phải đăng ký filename.module.ts trong mảng nhập trong tệp app.module.ts và không chèn trang đó vào mảng khai báo .

ví dụ.

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,
],

Mô-đun này được thêm tự động khi bạn chạy lệnh ion. Tuy nhiên nó không cần thiết. Vì vậy, một giải pháp thay thế là loại bỏ add-event.module.ts khỏi dự án.

Bạn có thể thử giải pháp này (đối với Ionic 3)

Trong trường hợp của tôi, lỗi này xảy ra khi tôi gọi một trang bằng cách sử dụng mã sau đây

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

Tôi vừa xóa các trích dẫn như sau và cũng đã nhập trang đó vào đầu tệp mà tôi đã sử dụng gọi trang Đăng nhập

this .navCtrl.push (Đăng nhập); // Chính xác

Tôi không thể giải thích sự khác biệt tại thời điểm này vì tôi là nhà phát triển cấp độ mới bắt đầu

Do bản phát hành Ionic 3.6.0, mỗi trang được tạo bằng Ionic-CLI giờ đây là một mô-đun Angular. Điều này có nghĩa là bạn đã thêm mô-đun vào bản nhập của mình trong tệpsrc/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 {}

Để khắc phục lỗi này, bạn nên bắt đầu bằng cách xóa tất cả các bản nhập của app.module.ts và có một cái gì đó như thế này:

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

Tiếp theo chỉnh sửa mô-đun trang của bạn, như thế này:

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

Sau đó thêm chú thích của IonicPage trước khi chú thích thành phần của tất cả các trang:

import { IonicPage } from 'ionic-angular';

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

Sau đó chỉnh sửa loại rootPage của bạn thành chuỗi và loại bỏ việc nhập các trang (nếu có bất kỳ thành phần nào trong ứng dụng của bạn)

rootPage: string = 'HomePage';

Sau đó, chức năng điều hướng sẽ như thế này:

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

Bạn có thể tìm thấy nguồn của giải pháp này tại đây: Thành phần là một phần của việc khai báo 2 mô-đun

Đã giải quyết nó - Thành phần là một phần của việc khai báo 2 mô-đun

1. Xóa tệp pagename.module.ts trong ứng dụng
2. Xóa nhập {IonicApp} khỏi 'ionic-angular'; trong tập tin pagename.ts
3. Xóa @IonicPage () khỏi tệp pagename.ts

Và chạy lệnh ionic cordova build android --prod - hãy giải phóng nó Hoạt động trong ứng dụng của tôi

Có vấn đề tương tự. Chỉ cần đảm bảo xóa mọi lần xuất hiện của mô-đun trong "khai báo" nhưng AppModule.

Đã làm cho tôi.

Sửa chữa đơn giản,

Đi đến app.module.tstập tin của bạn và remove/commenttất cả mọi thứ liên kết với add_event. Không cần thêm các thành phần vào App.module.ts được tạo bởi ionic clivì nó tạo ra một mô-đun riêng cho các thành phần được gọi làcomponents.module.ts .

Nó có nhập khẩu thành phần mô-đun cần thiết

Vì lỗi nói để xóa mô-đun AddEvent khỏi root nếu Trang / Thành phần của bạn đã có tệp mô-đun ion nếu không chỉ xóa nó khỏi trang / thành phần / trang con khác, ở trang cuối / thành phần chỉ có trong một tệp mô-đun Nhập khẩu nếu được sử dụng.

Cụ thể, bạn nên thêm vào mô-đun gốc nếu được yêu cầu trong nhiều trang và nếu trong các trang cụ thể chỉ giữ nó trong một trang.

Tôi vô tình tạo ra thành phần của riêng mình có cùng tên với thành phần của thư viện.

Khi tôi sử dụng IDE của mình để tự động nhập thư viện cho thành phần, tôi đã chọn thư viện sai.

Do đó, lỗi này đã được khiếu nại, rằng tôi đã khai báo lại thành phần.

Tôi đã sửa bằng cách nhập từ mã thành phần của riêng tôi, thay vì thư viện.

Tôi cũng có thể sửa bằng cách đặt tên khác: tránh sự mơ hồ.

Trong kịch bản này, tạo một mô-đun chia sẻ khác trong đó nhập tất cả thành phần đang được sử dụng trong nhiều mô-đun.

Trong thành phần dùng chung. khai báo các thành phần đó. Và sau đó nhập mô-đun chia sẻ trong appmodule cũng như trong mô-đun khác nơi bạn muốn truy cập. Nó sẽ hoạt động 100%, tôi đã làm điều này và làm cho nó hoạt động.

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

Tôi có cùng một lỗi nhưng tôi phát hiện ra rằng khi bạn nhập một AddEventModule, bạn không thể nhập một AddEventmô-đun vì nó sẽ xuất hiện một lỗi trong trường hợp này.