Angular2 Routing - Unexpected module 't' declared by the module 't'?

Question

Angular

I work with Angular-Cli
When connecting the routing module, it gives an error.

Error: Unexpected module 't' declared by the module 't'
    at d (http://localhost:3000/vendor.9f9d39469610e1f39817.bundle.js:2094:1654)
    at e [as constructor] (http://localhost:3000/vendor.9f9d39469610e1f39817.bundle.js:1637:402)
    at new e (http://localhost:3000/vendor.9f9d39469610e1f39817.bundle.js:64:736)
    at http://localhost:3000/vendor.9f9d39469610e1f39817.bundle.js:310:7887
    at Array.forEach (native)
    at t.getNgModuleMetadata (http://localhost:3000/vendor.9f9d39469610e1f39817.bundle.js:310:7568)
    at t._loadModules (http://localhost:3000/vendor.9f9d39469610e1f39817.bundle.js:1084:2223)
    at t._compileModuleAndComponents (http://localhost:3000/vendor.9f9d39469610e1f39817.bundle.js:1084:1779)
    at t.compileModuleAsync (http://localhost:3000/vendor.9f9d39469610e1f39817.bundle.js:1084:1210)
    at e._bootstrapModuleWithZone (http://localhost:3000/vendor.9f9d39469610e1f39817.bundle.js:760:2534)
    at e.bootstrapModule (http://localhost:3000/vendor.9f9d39469610e1f39817.bundle.js:760:2173)
    at Object.392 (http://localhost:3000/main.ef0a4010deeb90b47def.bundle.js:1:7862)
    at r (http://localhost:3000/inline.a4db910a4e903180f2a5.bundle.js:1:101)
    at Object.730 (http://localhost:3000/main.ef0a4010deeb90b47def.bundle.js:1:24902)
    at r (http://localhost:3000/inline.a4db910a4e903180f2a5.bundle.js:1:101)

Can't find an error. I leave the code of 2 modules:
app.module.ts

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

import { DataService } from './services/data.service';


import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ToastComponent } from './shared/toast/toast.component';
import { ListCat01Component } from './list-cat01/list-cat01.component';


import { SaleComponent } from './sale/sale.component';
import { SaleResearchComponent } from './sale/sale-research/sale-research.component';
import { SalePlanningComponent } from './sale/sale-planning/sale-planning.component';
import { SaleTasksComponent } from './sale/sale-tasks/sale-tasks.component';
import { SaleBusinessComponent } from './sale/sale-business/sale-business.component';
import { Template01Component } from './template01/template01.component';
import { Logo01Component } from './template01/logo01/logo01.component';
import { Menu01Component } from './template01/menu01/menu01.component';
import { SaleMenu01Component } from './sale/sale-menu01/sale-menu01.component';

import { AppRoutingModule } from './app-routing.module';

@NgModule({
    declarations: [
        AppRoutingModule,
        AppComponent,
        HomeComponent,
        AboutComponent,
        ToastComponent,
        ListCat01Component,
        Logo01Component,
        SaleComponent,
        SaleResearchComponent,
        SalePlanningComponent,
        SaleTasksComponent,
        SaleBusinessComponent,
        Template01Component,
        Menu01Component,
        SaleMenu01Component
    ],
    imports: [
        BrowserModule,
        FormsModule,
        ReactiveFormsModule,
        HttpModule
    ],
    providers: [
        DataService,
        ToastComponent
    ],
    schemas: [CUSTOM_ELEMENTS_SCHEMA],
    bootstrap: [AppComponent]
})

export class AppModule {
}

app-routing.module.ts

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

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { SaleComponent } from './sale/sale.component';
import { SaleResearchComponent } from './sale/sale-research/sale-research.component';
import { SalePlanningComponent } from './sale/sale-planning/sale-planning.component';
import { SaleTasksComponent } from './sale/sale-tasks/sale-tasks.component';
import { SaleBusinessComponent } from './sale/sale-business/sale-business.component';

const appRoutes:Routes = <Routes>([
    {path: '', component: HomeComponent},
    {path: 'about', component: AboutComponent},
    {path: 'sale',
        component: SaleComponent,
        children: [
            {path: '', component: SaleComponent},
            {path: 'sale/research', component: SaleResearchComponent},
            {path: 'sale/planning', component: SalePlanningComponent},
            {path: 'sale/tasks', component: SaleTasksComponent},
            {path: 'sale/business', component: SaleBusinessComponent}
        ]},

]);

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

export class AppRoutingModule {

}

Thank you!

Answer 1

Try changing import { Routes, RouterModule } from '@angular/router';
on import { RouterModule, Routes } from '@angular/router';