New page Created Module.ts file

ionic g component mycomponent gave me a module.ts file as well… No idea what it does.

The about leftover in the creation of the page: ionic g page myPage

ionic ver: 3.3.0

I am new to ionic. I have the same problem ionic g page myPage. However if I try to remove the myPage.module.ts my application doesn’t work. Is there any documentation to explain the purpose of this? So far I have just left the file in.

If you want to remove the myPage.module,ts you need to add it to your app.module.ts

1 Like

Thanks for your quick reply. I had the myPage.ts file path within app.module.ts but it was still causing a problem. I looked at the error more carefully I left the @ionicPage in the myPage.ts.:disappointed_relieved:

1 Like

According to the conversations, I understand as ‘each page module.ts file is needed for lazy loading’.

Am I right?

It is used for deep linking https://ionicframework.com/docs/api/navigation/IonicPage/

2 Likes

When working with a new page, you have 3 choices:

  1. ionic 2 way: add page component/class(eg AboutPage) to @NgModule’s declarations array and entryComponents array in the app.module.ts file. But when you use --prod to build the project, the about.module.ts file will be auto included, so there will be an error complaining duplicate component declarations. To fix this, you must delete the about.module.ts file.
  2. angular 4 NgModule way: ionic 3 cli generate page with a .module.ts file, which makes the page an angular 4 ngmodule (checkout https://angular.io/guide/ngmodule). You need to add the page module(eg AboutPageModule) to @NgModule’s imports array in the app.module.ts file.
  3. ionic 3 lazy loading way: you do nothing with the app.module.ts file, but need to change this.navCtrl.push(AboutPage); to this.navCtrl.push(“AboutPage”); . That is change class to classname STRING .
12 Likes

I would pump the brakes on “highly recommended”, until this and friends are resolved.

I don’t know what problem you encountered. I guest it is something about bundle and module dependency. I use shared module to solve module dependency problem. Hope this will help: https://angular.io/guide/ngmodule#shared-modules

All components that are used by more than one lazily loaded page caused duplicated code that massively bloated my app bundle. I consider that a showstopper that causes me to recommend lazy loading only for apps that have completely unrelated pages that do not share components.

That is why “core module” and “Shared modules” are introduced after “Lazy-loading modules” in that document. For they are the final solution.

Until somebody can demonstrate that app-scripts #867 is fixed, I refuse to recommend lazy page loading unconditionally.

I look into the https://github.com/rapropos/ionic-lazy-sandbox and understand the problem now. Let me do more research on this. I will remove the recommendation first.

Any news about the advantage of using the individual module?

2 Likes

I saw from 3.5.3 the cli stopping generating .module.ts file. And recently 3.6.0 add back the .module.ts, and also components/components.module.ts. https://github.com/ionic-team/ionic/releases/tag/v3.6.0

Does this mean that the webpack’s bug has been fixed?

Not as far as I can see.

Should I copy paste the auto-generated ionic code in the about.ts file then? Or just delete it?

Dont’ do anything. Just navigate throw pages with: this.navCtrl.push("AboutPage");
That means you type the class Name of the about.ts file (“AboutPage”) as a string and thats it. No Imports. Nothing.

If you don’t need the module file, you can append the --no-module option to the command:

ionic generate page Detail --no-module

From: https://ionicframework.com/docs/cli/generate/