Trouble Building Production - Module Error



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.


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.


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.


Never mind explains it all. Really wish this stuff was in the Ionic starter documentation