Modularize routes module in Angular 2

Question

I am trying to modularize my routing module like these below:

app.modules.ts

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

import { AppComponent } from './main/app.component';
import { MaterialModule } from '@angular/material';
import { RouterModule, Routes } from '@angular/router';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { AppRoute } from './app.routes';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    MaterialModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoute
  ],
  providers: [
    UserService
  ],
  bootstrap: [ AppComponent ],
})
export class AppModule { }

app.routes.ts

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

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
]

@NgModule({
    imports: [
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoute { }

This method runs fine, but I keep thinking that I have specify component imports such as that page-not-found on both files. Is there any way to modularize component imports into a separate files, so that I can include that file in both modules and routes? I've experimented with these:

app.routes.ts

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

import { AppComponent } from './main/app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
]

@NgModule({
    declarations: [
        AppComponent,
        PageNotFoundComponent
    ],
    imports: [
        MaterialModule,
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoute { }

and remove redundant declaration from app.modules.ts, but It seems angular can't find ngIf and md-icon.

My goal here is to minimize number of files that user has to edit to suit their need when this skeleton cloned. I am creating a skeleton for my future projects, and I want to minimize files that I have to edit. If possible, I don't want to touch app.modules.ts, and only edit app.routes.ts and app.config.ts. Or better yet, only edit app.config.ts, and put const appRoutes into app.config.ts. Is that even possible? What is the best way to minimize editing so that we don't need to do a lot of tampering of unnecessary files.

Thank you for helping

Answer 1

The reason why you're getting the error about Angular not finding NgIf is because NgIf is declared in Angular's @angular/common module, and you're not importing that module in your app.routes.ts file. (Not sure why you're getting an issue with md-icon - you're importing MaterialModule in app.routes.ts so it should be available....)

But, getting back to the over arching concept, the point of creating an app.routes routing module is to separate routing concerns out of the main app.module. So, the responsibility is split where the declarations of the various components happens in the AppModule and the routing definitions happens in the AppRoutingModule. Because of that separation (declare in one module, apply to routes in another), you almost, by definition, will always end up with two imports of any given routed component - one to declare which module it belongs to, and another to define how it can be routed to.

I wouldn't do this myself, but if the double imports bother you that much, then the only real solution is to combine the two modules into one, which may actually not be so bad for apps with straightforward routing.

As an aside though - one of the great benefits of Typescript is the tooling support that it provides. I, myself, use WebStorm, and i honestly never really type (or even see) those import statements. WebStorm has tooling to automatically add/remove/adjust the imports as you reference various classes, so it's not something I manage at all. (WebStorm also collapses the imports by default so they aren't even visible unless you explicitly expand them).

I suspect that other Typescript-aware editors and IDEs have similar tooling so that managing those imports are a non-issue.