119

I recently started implementing lazy loading in my application. I was wondering whether there is any way to create a routing.module.ts while generating a new module in angular-cli application other than creating it manually?

Saiyaff Farouk
  • 5,103
  • 4
  • 24
  • 38

12 Answers12

213

I was searching about this a bit and found some article which has a very good explanation for different kind of commands.

The Ultimate Angular CLI Reference

So basically, there's no separate command to create routing.module file. But, that can be created while on the creation of the module:

ng generate module [module-name] --routing

or the shorthand version of the command:

ng g m [module-name] --routing

... will create the module and add the mappings/metadata linkings.

David Wolf
  • 1,400
  • 1
  • 9
  • 18
Saiyaff Farouk
  • 5,103
  • 4
  • 24
  • 38
  • 1
    Hi Saiyaff Farouk, the above command creates both module.ts and routing.module.ts together at the same. Is it possible to generate routing.module.ts alone since I already have one module.ts . – Dhana Jul 31 '20 at 17:14
  • 2
    @Dhana I don't think that can be possible with a command for the scenario of 'Is it possible to generate routing.module.ts alone since I already have one module.ts'. To overcome this you can try writing your own schematic. But, let me do a bit of a further research and see whether what you want is available already in any sorta forms – Saiyaff Farouk Aug 04 '20 at 21:01
  • You can generate `my-routing.module.ts` for an existing `my.module.ts` with `ng generate module my-routing --module my --flat`. Then add `RouterModule` to the new routing module as shown in [this answer](https://stackoverflow.com/questions/44990030/how-to-add-a-routing-module-to-an-existing-module-in-angular-cli-version-1-1-1/54635253). – Eric Eskildsen Dec 19 '22 at 16:10
28

Module with Routing Create CMD :-

ng g m [ModuleName] --routing
  • it's better to create only routing files in that you've forgotten while generate the module – Rohit Jan 05 '23 at 09:16
17

Late but very useful.

ng g m about --module app --route about 

The above command will generate about module with about component and add lazy load route at app module for routing about route.

Santosh
  • 3,477
  • 5
  • 37
  • 75
  • 1
    Indeed very helpful - although i faced *"Couldn't find a route declaration in /src/app/app.module.ts"* in the first place, when using your command like this. What finally helped was passing the full file name of the app's routing module: `--module app.routing.ts`. Got the hint from https://stackoverflow.com/a/69779475/12924116. – w0l-g0r Feb 11 '22 at 09:25
15

I am late to the party :) but here is how I generate a module, routing for the module and component all at one go and inside the same directory

From the src/app/ directory type in the following command to generate a module, routing and component called 'my-page'

ng g m my-page --routing=true && ng g c my-page --skip-tests=true -m=my-page

If you want the tests to be generated then do not use the skip-tests argument.

sunitkatkar
  • 1,958
  • 1
  • 14
  • 12
14

Creates both module and routing simultaneously in the same folder.

ng g m sub-folder/module-name --routing

Creates the only module.

ng g m  sub-folder/module-name

enter image description here

Amir
  • 8,821
  • 7
  • 44
  • 48
Chaman Bharti
  • 408
  • 5
  • 8
12

To create a module with routing(lazy load importing), module routing, and a component that loaded at your routing you can write by following the syntax

ng g m [myModule_name] --route [myRoute_path_name] --module [routing_module_name]

Example :

ng g m public --route public --module app 

enter image description here

Albaz
  • 905
  • 12
  • 21
6
  1. To generate component: ng g c componanentName or ng g c sub-folder/componentName
  2. To generate module or routing module use: ng g m sub-folder/moduleName --routing
Harrison O
  • 1,119
  • 15
  • 20
5

Simple command for Create a Module with routing..

 ng g m [module_name] --routing
3

You can use

// module and routing
-> ng g m name --routing

// component with module and routing
-> ng g c name && ng g m name --routing
-> ng g m name --routing && ng g c name -m=name`
Siddhartha Mukherjee
  • 2,703
  • 2
  • 24
  • 29
1
ng generate module ModulName --flat --module=app
double-beep
  • 5,031
  • 17
  • 33
  • 41
0

1-if you want generate a routing in a folder:

ng g m [modelNme] --routing

2-if you want to generate a routing in the same folder:

ng g m [modelName] --flat --routing --modele=app

3-generate a componenet with model routing:

ng g c [modelName] && ng g m [modelName] --routing
Mounir bkr
  • 1,069
  • 6
  • 6
0

You can generate a module, routing, and component all at one go like this:

ng g m vast-urls --routing=true && ng g c vast-urls --skip-tests=true -m=vast-urls
doneforaiur
  • 1,308
  • 7
  • 14
  • 21
Dev
  • 1
  • Thank you for your interest in contributing to the Stack Overflow community. This question already has quite a few answers—including one that has been extensively validated by the community. Are you certain your approach hasn’t been given previously? **If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient.** Can you kindly [edit] your answer to offer an explanation? – Jeremy Caney Jun 22 '23 at 00:44