Popover with custom component in production


#1

Hi,
I have generated a custom component viz. HintComponent with CLI ionic g component hint
I have used the generated component to present a popver in my (lazy loaded custom) page like:

......
constructor(hintCtrl: PopoverController){}
someFunction(){
    let hintPresenter = this.hintCtrl.create(HintComponent);
    hintPresenter.present({ ev: evt });
    hintPresenter.onDidDismiss((data) => {
       console.log(data);
    })
}

This works fine in browser as well as in device in a debug mode i.e. when i use the following CLI:

ionic serve;
ionic cordova run android -l  -c -s

But things get messy when I try to deploy prod version on a device using following command:
ionic cordova run android --prod --release

Following is the error that appears on the command prompt:

[01:57:33]  ngc started ...
Error: Type HintComponent in E:/KHYATI-APP/kidsGame/src/components/hint/hint.ts is part of the declarations of 2 modules: ComponentsMo
dule in E:/KHYATI-APP/kidsGame/src/components/components.module.ts and AppModule in E:/KHYATI-APP/kidsGame/src/app/app.module.ts! Plea
se consider moving HintComponent in E:/KHYATI-APP/kidsGame/src/components/hint/hint.ts to a higher module that imports ComponentsModul
e in E:/KHYATI-APP/kidsGame/src/components/components.module.ts and AppModule in E:/KHYATI-APP/kidsGame/src/app/app.module.ts. You can
 also create a new NgModule that exports and includes HintComponent in E:/KHYATI-APP/kidsGame/src/components/hint/hint.ts then import
that NgModule in ComponentsModule in E:/KHYATI-APP/kidsGame/src/components/components.module.ts and AppModule in E:/KHYATI-APP/kidsGam
e/src/app/app.module.ts.
    at Error (native)

Now I understand that my custom component has to be included in component.modules.ts which is to be imported in app.module.ts

What I got the examples are directly using the custom component in html file whereas I need to use it in my ts file

I tried checking the ionic github here
But it seems that they have the component in the same page as they are invoking it from
I would like my component to be invoked from various places in my app

Request your help in understanding in correcting the my problem
I feel that I missing something silly

Thanks in advance
Dhaval


#2

“Has to” is overstating things. That’s the official Ionic advice (which I personally disagree with).

Then I would recommend giving up on lazy loading entirely, because it will result in duplicate copies of your component’s code in every lazily-loaded page that uses it.


#3

I tried removing the lazy loading of the page and not bringing into picture component.module.ts but the result is the same.
While things still work on browser and when in debug mode on actual device
But as soon as i try to do it for production I get the said error.

I am trying to push github link of my sample source code (where i have simulated the same issue)

Following is the screen paste of the error that i see on console:

PS E:\KHYATI-APP\EXAMPLES\popoverHelp> ionic cordova run android --prod --release
[INFO] Running app-scripts build: --prod --platform android --target cordova

[03:30:56]  build prod started ...
[03:30:56]  clean started ...
[03:30:56]  clean finished in 75 ms
[03:30:56]  copy started ...
[03:30:57]  deeplinks started ...
[03:30:57]  deeplinks finished in 247 ms
[03:30:57]  ngc started ...
Error: Type HintComponent in E:/KHYATI-APP/EXAMPLES/popoverHelp/src/components/hint/hint.ts is part of the declarations of 2 modules:
AppModule in E:/KHYATI-APP/EXAMPLES/popoverHelp/src/app/app.module.ts and ComponentsModule in E:/KHYATI-APP/EXAMPLES/popoverHelp/src/c
omponents/components.module.ts! Please consider moving HintComponent in E:/KHYATI-APP/EXAMPLES/popoverHelp/src/components/hint/hint.ts
 to a higher module that imports AppModule in E:/KHYATI-APP/EXAMPLES/popoverHelp/src/app/app.module.ts and ComponentsModule in E:/KHYA
TI-APP/EXAMPLES/popoverHelp/src/components/components.module.ts. You can also create a new NgModule that exports and includes HintComp
onent in E:/KHYATI-APP/EXAMPLES/popoverHelp/src/components/hint/hint.ts then import that NgModule in AppModule in E:/KHYATI-APP/EXAMPL
ES/popoverHelp/src/app/app.module.ts and ComponentsModule in E:/KHYATI-APP/EXAMPLES/popoverHelp/src/components/components.module.ts.
    at Error (native)
    at syntaxError (E:\KHYATI-APP\EXAMPLES\popoverHelp\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34)
    at CompileMetadataResolver._addTypeToModule (E:\KHYATI-APP\EXAMPLES\popoverHelp\node_modules\@angular\compiler\bundles\compiler.um
d.js:15728:31)
    at E:\KHYATI-APP\EXAMPLES\popoverHelp\node_modules\@angular\compiler\bundles\compiler.umd.js:15616:27
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (E:\KHYATI-APP\EXAMPLES\popoverHelp\node_modules\@angular\compiler\bundles\compiler
.umd.js:15607:54)
    at addNgModule (E:\KHYATI-APP\EXAMPLES\popoverHelp\node_modules\@angular\compiler\bundles\compiler.umd.js:24403:58)
    at E:\KHYATI-APP\EXAMPLES\popoverHelp\node_modules\@angular\compiler\bundles\compiler.umd.js:24414:14
    at Array.forEach (native)
    at _createNgModules (E:\KHYATI-APP\EXAMPLES\popoverHelp\node_modules\@angular\compiler\bundles\compiler.umd.js:24413:26)
PS E:\KHYATI-APP\EXAMPLES\popoverHelp>

Thanks


Custom component - failing in --prod mode
#4

Well My Bad I did not read simple ENGLISH in the error

in E:/KHYATI-APP/EXAMPLES/popoverHelp/src/app/app.module.ts and ComponentsModule in E:/KHYATI-APP/EXAMPLES/popoverHelp/src/c
omponents/components.module.ts!

:wink:
I have removed the references from components.module.ts and page.module.ts for the component and custom page respectively.

Will update the results here later in the day

But then the expectation is that this should come when one is trying to debug the app on a real device and expecting the app to behave as it would in production scenario (except producing logs)

Thanks


#5

Those files shouldn’t exist any more if you’re ditching lazy loading. The only module should be the app module, so there’s no way this error can persist.