Trouble Building Production - Module Error


#1

Hi,

Trying to deploy my code of my progressive app, using the following command:

npm run ionic:build --prod

Up until now using Ionic serve I have not been getting errors. But now using the above method, I am running into issues and seems to do with lazy loading. The error I am getting hit first is:

Error: Type ActionDirectoryComponent in 
            /Users/core/www/ourmgmt2-mobile/src/components/action/action-directory/action-directory.ts is part of the 
            declarations of 2 modules: AppModule in /Users/core/www/ourmgmt2-mobile/src/app/app.module.ts and 
            ActionDirectoryComponentModule in 
            /Users/core/www/ourmgmt2-mobile/src/components/action/action-directory/action-directory.module.ts! Please 
            consider moving ActionDirectoryComponent in

So I have declared my components both in app.module.ts and the component’s module file. For example action-directory.module.ts.

So my question is which one do I delete? If I am re-using my component do I delete the module file and leave all the declarations in app.module.ts?

Also when I remove the component reference in app.module.ts and keep the lazy loading component module, I get an error. How do I import a component into a page or another component?

Also do I really need to declare anything in components.module.ts?

What is the best practice here?

Thanks in advance.


#2

you should know what you had in mind when you created a new components.module.ts.

In angular you will create modules for logically groups of code and not per type.

e.g. you ActionDictionary has 2 pages, a service, a directive and this component. Than you will create an ActionDirectoryModule.
You app.module will import this module to get all the exports of the ActionDirectoryModule available.

So in your case: you created a components.module, which holds all your components then delete all components from you app.module and simply import the components.module.


#3

Thanks so much Bengtler for the response. This makes a lot of sense. On this I have two very noob questions:

  1. For components.module, do I just declare ‘ComponentsModule’ in app.module under declarations?

  2. If I had lazy module called lazy.module.ts and this was not included in components.module. What is the syntax to import that lazy component another page or component?

Thanks in advance.


#4

Never mind https://www.youtube.com/watch?v=h4qrhJFeudA explains it all. Really wish this stuff was in the Ionic starter documentation