Angular-cli: Due to changes in the router, route generation has been temporarily disabled.

Created on 15 Jun 2016  Â·  65Comments  Â·  Source: angular/angular-cli

When about it will be available again?

Most helpful comment

tl;dr: Whatever the ultimate decision on route generation is, I think there is ample room for some documentation improvements in the meantime to make a route-gen-less angular-cli a bit less user-hostile.

If you have time and knowledge, please consider contributing PRs to improve the documentation users encounter when attempting to generate routes.

Long version:

For now at least, should the README be update to mention that route generation is disabled, and perhaps also mention why, and what you need to do to make a route manually?

For people who aren't already familiar with setting up routes in an angular-cli project, this is the rough journey you might take:

$ npm install --global angular-cli
$ ng init foo-project
$ cd foo-project
$ ng serve

"OK that was pretty easy so how do I add a route? Hrm let's look at the README, Ctrl+F 'route'"

Generating a route
You can generate a new route [by running] ng generate route hero

"Seems easy enough, let's give it a shot"

$ ng generate route hero
Due to changes in the router, route generation has been temporarily disabled. You can find more information about the new router here: http://victorsavkin.com/post/145672529346/angular-router

"OK well that's a little inconvenient, let's go read the article"

ANGULAR ROUTER
_<snip>2500 words later...</snip>_
E2E Example

_flips desk_

_throws computer out window_


This is, of course, an incredibly frustrating experience. I'm using angular-cli because it's supposed to _help_ me structure an app _the right way_ and yet it provides absolutely no guidance on routing. If route generation is going to remain disabled for a long time, there's a couple of things that could be done to improve the ergonomics for new-ish users of this tool:

  1. The default app scaffolded out by ng init should at least demonstrate basic usage of the router, even if ng generate won't make new routes.
  2. The main README should be updated to mention that route generation is disabled, and ideally include a link to some kind of simple guide of "here's a 101 of how you set up routing in this project you just scaffolded"

I've honestly just started playing with angular-cli and it's a major bummer to run into zero guidance on routing. Maybe I'm just scrabbling away at the bottom of the learning curve and it's really not too bad, but right now angular-cli is a tool that's asking me to go along with all its style guide suggestions and then when I go "hey angular-cli what about routes" the answer is "I'm sorry Jeff, I can't do that"

Anywho, if you have any examples to help get me up and over the hump, I'd happily consume them and then build a PR to improve the docs to help get other people up over the hump as well.

All 65 comments

+1

same here

This message is correct and intended as of beta.6. The motivation for this was as follows:

We felt we wouldn't be doing our users any favors by encouraging the use of [email protected], so it would be better to offer no code generation at all.

We're working to re-add router functionality as fast as possible but I don't have a date for it.

To add on to what @filipesilva stated above...

[email protected] is brand new and the usage of it in regards to the style guide will take time to work itself out. After the style guide has adopted a recommended strategy for using the new router the CLI will evaluate to determine how best to follow the style guide recommendations for route generation. If it is determined that the CLI can add value to that part of the developer workflow we will add those features at that time.

Waiting...

+1

+1

waiting..

Let me see if I can help clarify something.

@Brocco @filipesilva Based on your comments I get the impression that it may be more on the order of weeks rather than days until we have route generation capabilities again. Do you think this would be about the right expectation? I'm not saying this to complain, I just want to have a feel for what to expect.

@jasonswett I'll try to clarify as best I can.

We have no idea if route generation will be returning let alone when.

The best practices for routing from the style guide are being put together right now. Once they are done with that we will take a look and see if the CLI can/should assist with route generation. Routes are disconnected from components now, and we want to ensure that anything that is added to the CLI will be beneficial for the users. Route definitions are rather straightforward IMO now so I would not be surprised if ng generate route is deprecated, but that is yet to be determined.

I have a somewhat different take on this... more predictive in nature:

  • It is very likely that Angular 2 will become quite broadly used, with lots of tooling available.
  • It is very likely that the most popular CLI a year from now, for Angular 2 will offer route management.
  • It is very likely that the current Google-blessed cli.angular.io in this repo will grow in to that role.
  • But open source is a surprisingly competitive environment. If the current project doesn't get there, it is likely other efforts will pop up. So don't worry too much.
  • As to how fast this happens, that is much harder to guess.

Route definitions are rather straightforward IMO

@Brocco in lieu of a generator could you provide a loose step by step for manually changing an angular-cli app to use the new routing?

Something like

  1. Replace system.config.ts with the one from here (or add somehow edit package.json)
  2. Remove the @Routes part of your myapp.component.ts
  3. Create a mycomponent.routes.ts file for each component
  4. and so on

That would be very helpful. Thanks.

I am not up to date but wasn't there a command that you all talked about ng upgrade?
Why is generation disabled, why it's not left for upgrade to fix the current code?

I'm guessing here, but I'd wager the ng upgrade will be available for angular2 final.

This brings up perhaps a good point. I'm not used to the functionality of libraries disappearing even though I haven't upgraded my library version. Wouldn't it be more "normal" to allow ng generate route to continue to function in versions <= 1.0.0-beta.6 (or whatever) and deprecate the feature in the next version?

I had written a number of tutorials that depended on ng route existing, and now those tutorials are somewhat useless since they're no longer followable. It would be nice if I could just say "this tutorial is valid for Angular CLI <= 1.0.0-beta.6" rather than have to rewrite them and have them be broken in the meantime.

Exactly! I mean we could have just used "ng route" till it's deprecation.

On 22 Jun 2016 7:27 p.m., "Jason Swett" [email protected] wrote:

This brings up perhaps a good point. I'm not used to the functionality of
libraries disappearing even though I haven't upgraded my library version.
Wouldn't it be more "normal" to allow ng generate route to continue to
function in versions <= 1.0.0-beta.6 (or whatever) and deprecate the
feature in the next version?

I had written a number of tutorials that depended on ng route existing,
and now those tutorials are somewhat useless since they're no longer
followable. It would be nice if I could just say "this tutorial is valid
for Angular CLI <= 1.0.0-beta.6" rather than have to rewrite them and have
them be broken in the meantime.

—
You are receiving this because you commented.
Reply to this email directly, view it on GitHub, or mute the thread.

have there been any updates on this?

I understand that the router is evolving quickly, and that the CLI is supposed to uphold best practices, and therefore does not want to lead people down the wrong path by letting people generate routes in a fashion that is likely to be changed soon.

But all I want to know is:
Where can I find some docs on the 3.0.0 router? Or at the 2.0.0.

If we can't automatically generate routes, I'd be happy to manually create them, but I can't seem to find any tutorials.

Could anybody point me in the right direction?

The current published angular.io Router docs cover the "3" router.

https://angular.io/docs/ts/latest/guide/router.html

@kylecordes I'm sorry, I assumed that they were wrong because they weren't working in an angular-cli app I am developing. But I just went back and checked, and the problem is that my app is not on the 3 router! My bad, it's fine now...

Any progress/updates on this?

Waiting for this.

is there an existing issue reference for the current routing style guide?

@filipesilva @Brocco any chance you can confirm whether or not you'll bring back route generation? Also the tags on this issur suggest its coming ("urgent") but based on @Brocco's comment, there is a solid chance it's not coming at all.

Excellent point @yusijs I just removed that tag, the inclusion of route generation is still being debated/discussed.

@Brocco cool beans, cheers! Looking forward to a solid decision here. Personally I'm fine either way. While I'd prefer route generation being possible, it's hardly a big inconvience adding them manually. I can also see how it can be a bit of a hassle adding it to the cli, since routes can be declared across files, and are no longer coupled with components.

Anyway, what do I know ¯_(ツ)_/¯

waiting...

From my PR https://github.com/angular/angular-cli/pull/1113#issuecomment-231451321

@hansl:

We already have someone internally working on making ng generate route works properly again. The project is limited to route configuration, and does not include guards. I'm going to put this PR on hold until we re-enable route generation and then we can discuss more about adding guards to the project as a new feature.

Cheers!

waiting... still occurs on Win10 64bit as of today 07/11/16

"Due to changes in the router, route generation has been temporarily disabled. You can find more information about the new router here: http://victorsavkin.com/post/145672529346/angular-router"

I am also waiting for this and would have preferred for the warning to exist but let me choose to currently generate the old and deprecated version of the route...

I honestly don't see why people are constantly asking. I'm sure they are aware people are waiting :3

@yusijs Thus, it becomes apparent, how much this feature is needed,..

It's hardly needed. Adding a new route takes <5 seconds. Like I mentioned above, it is convenient having it, but considering how easy adding new routes is now, I hardly think it's needed. Desired, yes. :)

Yes it is very easy to implement manually, but I'm not sure I agree with it taking less than five seconds to create a route that way.

Mind sharing your process?

In vs code, I open my routerconfig file, type ng2rcp, hit tab, routerpath, component name. I need to import the component, so maybe 8 seconds)

And the process for creating the files that go with the route configuration? That is where the main convenience of the CLI tool was for me. Not really in the config as that is quick.

Creating a routerconfig takes slightly longer, but I believe john papas ng2 plugin has router config snippet. So creating the file manually and doing ng2routeconf isnt a big process.

Dont get me wrong as I'd prefer it in as well. I just don't think it's as important as others do I guess.

tl;dr: Whatever the ultimate decision on route generation is, I think there is ample room for some documentation improvements in the meantime to make a route-gen-less angular-cli a bit less user-hostile.

If you have time and knowledge, please consider contributing PRs to improve the documentation users encounter when attempting to generate routes.

Long version:

For now at least, should the README be update to mention that route generation is disabled, and perhaps also mention why, and what you need to do to make a route manually?

For people who aren't already familiar with setting up routes in an angular-cli project, this is the rough journey you might take:

$ npm install --global angular-cli
$ ng init foo-project
$ cd foo-project
$ ng serve

"OK that was pretty easy so how do I add a route? Hrm let's look at the README, Ctrl+F 'route'"

Generating a route
You can generate a new route [by running] ng generate route hero

"Seems easy enough, let's give it a shot"

$ ng generate route hero
Due to changes in the router, route generation has been temporarily disabled. You can find more information about the new router here: http://victorsavkin.com/post/145672529346/angular-router

"OK well that's a little inconvenient, let's go read the article"

ANGULAR ROUTER
_<snip>2500 words later...</snip>_
E2E Example

_flips desk_

_throws computer out window_


This is, of course, an incredibly frustrating experience. I'm using angular-cli because it's supposed to _help_ me structure an app _the right way_ and yet it provides absolutely no guidance on routing. If route generation is going to remain disabled for a long time, there's a couple of things that could be done to improve the ergonomics for new-ish users of this tool:

  1. The default app scaffolded out by ng init should at least demonstrate basic usage of the router, even if ng generate won't make new routes.
  2. The main README should be updated to mention that route generation is disabled, and ideally include a link to some kind of simple guide of "here's a 101 of how you set up routing in this project you just scaffolded"

I've honestly just started playing with angular-cli and it's a major bummer to run into zero guidance on routing. Maybe I'm just scrabbling away at the bottom of the learning curve and it's really not too bad, but right now angular-cli is a tool that's asking me to go along with all its style guide suggestions and then when I go "hey angular-cli what about routes" the answer is "I'm sorry Jeff, I can't do that"

Anywho, if you have any examples to help get me up and over the hump, I'd happily consume them and then build a PR to improve the docs to help get other people up over the hump as well.

Those are very valid points. I found the new router easy, but I started off with a.. simpler article at thoughtram: http://blog.thoughtram.io/angular/2016/06/14/routing-in-angular-2-revisited.html

Victors blog post is amazing, but it goes so deep it's not even funny. Pascal's post is a bit easier on my brain.

Moreover - I agree the readme should be updated - maybe something for @filipesilva or @brocco to look into?

So a couple of things that's going on in this issue:

  1. Saying "waiting" does nothing to contribute to the discussion. If you have nothing else to add, you can now add emojis to posts so use those to votes on.
  2. @jffry you make some good points and I will clarify the README today.
  3. we know the amount of frustrations in missing a key component of a CLI, but you don't need the generate action in the CLI for routing to work in your apps. You can generate your own files and the build system will handle it.

We have someone internally working on this, but we want to do it right. We're working on a better framework than just the "string search and replace" we had before (using ASTs instead, for example), and because of it it's taking a bit more time. The route generation will come back in a few weeks, it's not a matter of "if".

Thanks everyone for your patience. Please remember that this is beta and, well, a bit more in flux than what we expected. The change in Router was unfortunate, but in the future we will have a stronger (and faster and better) final release because of this work. So it's a pain for the better, trust me.

Cheers!

I make it short: any generator without the ability to create routes is USELESS!

A route means at least

  1. Create a directory containing all the necessary files:
  2. Add a Component and give it a name (configurable over cli-parameter, route and component may have completely different names)
  3. Add an appropriate template file
  4. Add an appropriate stylesheet file
  5. Add predefined test-spec files (E2E/Unittest/..)
  6. (Additional/Optional) Add a Service/Model (configurable over cli-parameter)
  7. Last but not least: Register route providers (if it is not already done -> Bootstrapping), create/import route rules or update them etc. etc,..

You have to do all of them manually, that is too much work!

John Papa's great NG2-Snippets unfortunately do not help here,..

1-6 are still done by the cli?

@jffry @yusijs the official docs also have updated chapters for the new router, and they're being kept up to date with each release:

@filipesilva I'm aware, I was answering @webia1 :)

Currently starting with a big AngularJS 2 application (100+ unique pages)

So i need to create 100 routes ;)

What is the approach the Angular CLI is doing?

Put the routes per route-component or a routes.ts file?

Right now Angular CLI isn't generating routes. I don't exactly how it will implement routes when route generation comes back.

The official Angular docs I've seen seem to want you to put your routes all in one file specifically dedicated to routes.

I've pasted below a route file from an app I'm working on in case it's helpful to see an example.

// src/app/app.routes.ts

import { provideRouter, RouterConfig } from '@angular/router';
import { BookListComponent } from './book-list';
import { NewBookComponent } from './new-book';
import { EditBookComponent } from './edit-book';

const routes: RouterConfig = [
  { path: '', component: BookListComponent },
  { path: 'new-book', component: NewBookComponent },
  { path: 'edit-book/:id', component: EditBookComponent }
];

export const appRouterProviders = [
  provideRouter(routes)
];

(Any further discussion is probably more appropriately had in some other place.)

Guideline should be put on readme file, for how to use route without generator for temporarily.

when route generator will be available again?

Any updates on this? Is this feature currently available in master and/or are you planning on enabling it for the next version of CLI that will be switching to RC6? I'm trying to figure out if I should wait some more, if I should just follow the guidelines in your doc and start redoing my deprecated router routes manually or if I should switch to master in case rc6 support and route generation are already enabled there.

Shedding some light on this route generation business would be highly appreciated!

Current status on master: adding of routes is still a manual process. But when you generate a module via ng generate module some-feature you can specify the option of routing via --routing which will generating a routing file where you can specify the routes you wish to include within the module.

Thanks for the update, @Brocco !

Hi, @Brocco, @radoslavpetranov,
I am 1-week-new to angular, after reading
But when you generate a module via ng generate module some-feature you can specify the option of routing via --routing which will generating a routing file where you can specify the routes you wish to include within the module.

I still have no idea how to do routing, I tried this, but no magic,
ng generate module some-feature --routing

can you give an real case example, thanks

@EasonPai

ng generate module some-feature --routing 

is correct. If you change to the directory some-feature, you see the files:

some-feature-routing.module.ts   
some-feature.component.css       
some-feature.component.html      
some-feature.component.spec.ts   
some-feature.component.ts        
some-feature.module.ts           

and in the file some-feature-routing.module.ts you will see the routing information:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})
export class SomeFeatureRoutingModule { }

You see this information in every module, instead of modifying a central file for routing like in Angular2-Seed from MGechev. That's a kind of "using a sledge-hammer to crack a nut",..

I wonder, why not learning from one another??

@Brocco can we please remove the route generator completely? Or change the message to say use ng generate route --module instead?

Cheers,

Current status of route generation:

You can generate routing modules on new app creation and on module generation using the flag --routing. As of now, generation of individual routes will not be supported.

@Brocco we probably should change this message into something that explains this instead.

Something along the lines of:

To generate a route, use ng generate module with the --routing flag
You can then add your individual routes to the moduleName-routing.module.ts file

Happy to send a PR if the copy is OK, or to use alternative suggested copy.

Cheers,

@Meligy A PR with that update would be great!

@Brocco shouldn't be the online documentation updated about that?

https://cli.angular.io/reference.pdf

  • Interestingly, the route blueprint has been deleted (although the alias r is not cleaned up).
  • The docs in readme need updating.
  • The PDF is very outdated. It'd make sense for cli.angular.io to link to the readme instead.

any status on this PR? @Meligy ?

@RaphHaddad I have updated the README in #3983 and the PR has been approved, so it should be merged soon.

For now, you can review the updated docs here: https://github.com/Meligy/angular-cli/blob/b391ef8811b0e6c0a3b549708764f814bf860d12/README.md#generating-a-route

@RaphHaddad actually it's already cherry picked into master, you can review the newest README from the official repository here https://github.com/angular/angular-cli#generating-a-route

Should we use https://angular.io/docs/ts/latest/guide/router.html or https://github.com/angular/angular-cli#generating-a-route
I'm a bit confused on how it works. I'm learning how to use Angular2 and I find so many different ways... Which one is the lastest or best practice ?

please give us some idea of a release date - thanks

@ValerianMenin If I'm not mistaken, cli is using the ff https://angular.io/docs/ts/latest/guide/router.html#!#routing-module

Specific route generation is not on the roadmap going forward, you can get started with routing by specifying --routing on new project generations and when generating modules. This will provide a routing module to be used to define your routes.

I am locking this thread, if you have issues with what is currently being generated please open a new issue.

Was this page helpful?
0 / 5 - 0 ratings