Error: Type PdfViewerComponent is part of the declarations of 2 modules

Ionic Framework ionic-v3
1

i have a lazy loading components ionic project. i have import

import { PdfViewerComponent } from ‘ng2-pdf-viewer’;
@NgModule({
declarations: [
PdfViewerComponent
]

})
export class Page1Module {}
in page1.module.ts and page2.module.ts.
i have received this error Error: Type PdfViewerComponent is part of the declarations of 2 modules

i don’t know how to fix it! any suggestions PLease!

2

Probably the same as here. Post your app.module.ts and both page modules here.

3

here’s my app.module.ts

import { NgModule , ErrorHandler } from ‘@angular/core’;
import { IonicApp, IonicModule , IonicErrorHandler } from ‘ionic-angular’;
import { PdfViewerComponent } from ‘ng2-pdf-viewer’;
import { APP_CONFIG, AppConfig } from ‘./app.config’;
import { IonAlphaScrollModule } from ‘ionic2-alpha-scroll’;
import { BrowserModule } from ‘@angular/platform-browser’;
import { HttpModule } from ‘@angular/http’;
import { IonicStorageModule } from ‘@ionic/storage’;
import { DynamicComponentModule } from ‘ng-dynamic’;
import { FormsModule } from ‘@angular/forms’;
import { PipesModule } from ‘…/pipes/pipes.module’;
import { SplashScreen } from ‘@ionic-native/splash-screen’;

import { MyApp } from ‘./app.component’;

@NgModule({
declarations: [
MyApp
],
imports: [
BrowserModule,
HttpModule,
IonicModule.forRoot(MyApp),
IonAlphaScrollModule,
DynamicComponentModule,
FormsModule,
IonicStorageModule.forRoot(),
PipesModule
],
bootstrap: [IonicApp],
entryComponents: [
MyApp
],
providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, { provide: APP_CONFIG, useValue: AppConfig },SplashScreen]
})
export class AppModule {}

first page Copiefacture.module.ts

import { NgModule } from ‘@angular/core’;
import { IonicPageModule } from ‘ionic-angular’;
import { Copiefacture } from ‘./copie-facture’;
import { PdfViewerComponent } from ‘ng2-pdf-viewer’;

@NgModule({
declarations: [
Copiefacture,
PdfViewerComponent
],
imports: [
IonicPageModule.forChild(Copiefacture)
],

})
export class CopiefactureModule {}

second page doc-utils-view.module.ts

import { NgModule } from ‘@angular/core’;
import { IonicPageModule } from ‘ionic-angular’;
import { DocUtilsView } from ‘./doc-utils-view’;
import { PdfViewerComponent } from ‘ng2-pdf-viewer’;

@NgModule({
declarations: [
DocUtilsView,
PdfViewerComponent
],
imports: [
IonicPageModule.forChild(DocUtilsView)
],
})
export class DocUtilsViewModule {}

4

Try the following:

app.module.ts
Leave the import of PdfViewerComponent and add the component in imports: []:

...
FormsModule,
IonicStorageModule.forRoot(),
PipesModule,
PdfViewerComponent 
],
...

both pages
Remove importation and declaration for both page modules, but add new importation in top of page1.page.ts and page2.page.ts. Then use as you would use before.

5

i got an error Cannot find name ‘PdfViewerComponent’. in app.module.ts

6

Here’s how your app.module.ts should be, based on what I said. Keep in mind that this is a try and not the the final solution:



    import { NgModule , ErrorHandler } from ‘@angular/core’;
    import { IonicApp, IonicModule , IonicErrorHandler } from ‘ionic-angular’;
    import { PdfViewerComponent } from ‘ng2-pdf-viewer’;
    import { APP_CONFIG, AppConfig } from ‘./app.config’;
    import { IonAlphaScrollModule } from ‘ionic2-alpha-scroll’;
    import { BrowserModule } from ‘@angular/platform-browser’;
    import { HttpModule } from ‘@angular/http’;
    import { IonicStorageModule } from ‘@ionic/storage’;
    import { DynamicComponentModule } from ‘ng-dynamic’;
    import { FormsModule } from ‘@angular/forms’;
    import { PipesModule } from ‘…/pipes/pipes.module’;
    import { SplashScreen } from ‘@ionic-native/splash-screen’;

    import { MyApp } from ‘./app.component’;

    @NgModule({
    declarations: [
    MyApp
    ],
    imports: [
    BrowserModule,
    HttpModule,
    IonicModule.forRoot(MyApp),
    IonAlphaScrollModule,
    DynamicComponentModule,
    FormsModule,
    IonicStorageModule.forRoot(),
    PipesModule,
    PdfViewerComponent 
    ],
    bootstrap: [IonicApp],
    entryComponents: [
    MyApp
    ],
    providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}, { provide: APP_CONFIG, useValue: AppConfig },SplashScreen]
    })
    export class AppModule {}
7

i have put the same and i have got another error this time:

Error: Unexpected directive ‘PdfViewerComponent’ imported by the module ‘AppModule’. Please add a @NgModule annotation.

8

The docs illustrate how this should be done properly.

2 Likes
9

Okay, looking for the documentation I see that there is an error in the imported module name: change PdfViewerComponent to PdfViewerModule . In importation and in imports array.

1 Like
10

thank you both for your responds. You were absolutely right.
the solution is:
in app.module.ts

import { PdfViewerModule } from ‘ng2-pdf-viewer’;
imports: [
BrowserModule,
…
PdfViewerModule
],

in page.module.ts

import { PdfViewerModule } from ‘ng2-pdf-viewer’;
imports: [
IonicPageModule.forChild(Page),
PdfViewerModule
],