Angular-cli: Question: How is app-routing.module.ts intended to be used?

[daBishMan]

Please provide us with the following information:

OS?

Windows 10

Versions.

Please run ng --version.
1.0.0-beta 16

Repro steps.

Create a new project.

My question around app.routing.module.ts; when you create a new project using beta 16 you get this new module, yet this module is not used anywhere (that I can determine), and the README indicates that routing is not supported currently.

What is the purpose of this module and how is the CLI is intended to use this module, and if we want to upgrade our current application created using beta 15 version?

[gelliott181]

I too would like clarification on this. Currently I use an app.routing.ts file and am wondering if this is a new paradigm which replaced my current structure.

[ritz078]

@daBishMan @gelliott181 Not too much change in the code. earlier app.routing.ts was just a file which got imported in app.module.ts just like a module which was confusing. Now you can see that app-routing.module.ts is also a module just removing that confusion.

Why rename the file ? (My idea)
Just to not hurt people who were using the older app.routing.ts. Totally overriding it would have made it hard for people. with new file, copy paste is easier.

[daBishMan]

I follow so far if you do not mind can you elaborate on how you would add that to the application since it does not seem to be used anywhere? Additionally, can you elaborate on how you would extend the routing for feature modules, would this pattern cause anything to change?

[intellix]

1) Add your routes to the array inside app-routing.module.ts
2) Add it as an import inside app.module.ts

It did used to just export RouterModule.fromRoot(routes) but I guess they turned it into a module to allow you to add routing-specific logic to the routing module down the line.

[coryrylan]

Also for anyone coming across this thread check out the Style Guide docs. It covers naming conventions and file organization techniques such as this one https://angular.io/styleguide

[xatzistnr]

@intellix i do this but i still get Uncaught (in promise): Error: Cannot match any routes:
i have 1 route only

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import {DashboardComponent} from "./dashboard/dashboard.component";

const routes: Routes = [
  {path: 'dashboard', component: DashboardComponent},

];

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

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import {MenumanagerRoutingModule} from './app-routing.module';
@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    DashboardComponent
  ],
  imports: [
    MenumanagerRoutingModule,
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

[xatzistnr]

oh figured it out in the end. the routing worked fine. It just didn't catch anything in the root path.
added this in the routes constant
`{path: '', redirectTo: 'dashboard', pathMatch : 'full'},

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}