A way to generate a page without a module, and link it to the relative module.

[Newbie012]

I had my hands on Ionic CLI today, and I usually build my apps with Angular CLI. I heard Ionic CLI integrates well with the Angular CLI (or to be more accurate, using angular CLI) so I thought why not give it a try.

Usually, when I start an app, I structure it like so (in a nutshell):

• App folder contains all of the modules
• Each module (that is not a Core/Shared Module) has pages and dummy components.

I read that there's an option to generate a page, which is simply a component, with a Page suffix instead of Component suffix, and it generates along the way a module for the page, and lastly, it links the generated module to the app routing.

IMO (and people are free to argue about it), the generate page does much more than just creating a new page, and that limits me to build my app with my own structure. I might have 1 module with multiple pages (e.g AuthModule with login, register, and a profile page).

So my alternative is to use the traditional way by creating a new component and not a page. But then, to keep the style guide of Ionic, I would like to have a Page suffix and not a Component suffix. Plus, I would like to link the generated component (which would be a page) to the relative module (e.g AuthModule) and not the AppModule, since I've already linked my AuthModule to AppModule.

[imhoffd]

@Newbie012 Okay so to fulfill this feature request, we'd need to add --without-module (Do not create a module for this page) to the page schematic. I think that's it, right? The schematics should locate the nearest applicable module to link the page to, but you can also use --module to specify a specific one.

cc @mhartington

[Newbie012]

@dwieeb Yeah, pretty much it :)

[JibranYousuf]

I tried generating page without module using --without-module but it still created with the module, then I searched and came across --no-module, which worked perfectly.

[imhoffd]

Yeah, I think this issue has been resolved. --no-module should be the option you're looking for.

[ciekawy]

hmm --no-module does not seem to work for me with recent ionic/angular

ionic generate page --no-module  modules/messages/message-thread-detail --prefix seaas --no-module   --module modules/messages/messages.module.ts --dry-run
> ng generate page modules/messages/message-thread-detail --module=modules/messages/messages.module.ts --prefix=seaas --dry-run
CREATE src/app/modules/messages/message-thread-detail/message-thread-detail-routing.module.ts (401 bytes)
CREATE src/app/modules/messages/message-thread-detail/message-thread-detail.module.ts (567 bytes)
CREATE src/app/modules/messages/message-thread-detail/message-thread-detail.page.scss (0 bytes)
CREATE src/app/modules/messages/message-thread-detail/message-thread-detail.page.html (140 bytes)
CREATE src/app/modules/messages/message-thread-detail/message-thread-detail.page.spec.ts (740 bytes)
CREATE src/app/modules/messages/message-thread-detail/message-thread-detail.page.ts (316 bytes)
UPDATE src/app/modules/messages/messages.module.ts (1030 bytes)

NOTE: The "dryRun" flag means no changes were made.

Ionic:

   Ionic CLI                     : 5.4.13
   Ionic Framework               : @ionic/angular 4.11.7
   @angular-devkit/build-angular : 0.803.21
   @angular-devkit/schematics    : 8.3.21
   @angular/cli                  : 8.3.21
   @ionic/angular-toolkit        : 2.1.1

Cordova:

   Cordova CLI       : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms : android 8.1.0, browser 5.0.4, ios 5.1.1
   Cordova Plugins   : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 4.1.0, (and 19 other plugins)

Utility:

   cordova-res (update available: 0.8.1) : 0.6.0
   native-run (update available: 0.3.0)  : 0.2.8

System:

   Android SDK Tools : 26.1.1 (/usr/local/share/android-sdk)
   ios-deploy        : 1.9.4
   ios-sim           : 8.0.2
   NodeJS            : v11.15.0 (/Users/szymon/.nvm/versions/node/v11.15.0/bin/node)
   npm               : 6.10.1
   OS                : macOS Mojave
   Xcode             : Xcode 11.2.1 Build version 11B500

[nmehlei]

I noticed the same behavior like @ciekawy, even with --no-module there are additional files created with a ".module.ts" and "-routing.module.ts" ending. Is this a bug? It does not seem logical to let it generate a module with an option "--no-module". @dwieeb Should this issue be re-opened?

[imhoffd]

Yeah, I think we wanted to align it with what the component schematic was doing. I created a PR to add a --create-module option (which defaults to true).

[mhartington]

👋 Hey folks, question.

Are we looking to not generate a module for a page, or are we looking to auto-generate a route for said module?

Technically, pages/components are the same thing, just angular components. Pages only differ because they include routing logic and modify the root route module to add a new path.

Reading over, I wonder if instead of not creating a module, we just have an option to skip the import process

ionic g page foo --skip-import

Creates

foo/
| - foo.module.ts
| - foo.page.ts
| - foo.page.html
| - foo.page.css

This would not generate a foo entry in app.routing.module.ts

[clemkake]

Hello Team, is there a solution for this so far?