Angular2 Tutorial (Tour of Heroes): Cannot find module './app-routing.module'

Question

I am going through the NG2 tutorial on here, but I've hit a stumbling block.

When I try and import my AppRoutingModule in my app.module.ts file I get a 'Cannot find module './app-routing.module' error. I have seen this post on here, amongst other solutions, but they all seem to relate to systemjs and not webpack.

Here is my package.json:

{
  "name": "heroes",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "start": "ng serve",
    "lint": "tslint \"src/**/*.ts\"",
    "test": "ng test",
    "pree2e": "webdriver-manager update",
    "e2e": "protractor"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "2.0.0",
    "@angular/compiler": "2.0.0",
    "@angular/core": "2.0.0",
    "@angular/forms": "2.0.0",
    "@angular/http": "2.0.0",
    "@angular/platform-browser": "2.0.0",
    "@angular/platform-browser-dynamic": "2.0.0",
    "@angular/router": "3.0.0",
    "angular2-in-memory-web-api": "0.0.21",
    "core-js": "^2.4.1",
    "rxjs": "5.0.0-beta.12",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.6.23"
  },
  "devDependencies": {
    "@types/jasmine": "^2.2.30",
    "angular-cli": "1.0.0-beta.15",
    "codelyzer": "~0.0.26",
    "jasmine-core": "2.4.1",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "4.0.5",
    "ts-node": "1.2.1",
    "tslint": "3.13.0",
    "typescript": "2.0.2"
  }
}

Here is my app.module.ts

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

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular2-in-memory-web-api';
import { AppRoutingModule } from './app-routing.module'; //ERROR
...


@NgModule({
  declarations: [
    AppComponent,
    HeroDetailComponent,
    HeroesComponent,
    DashboardComponent,
  ],
   imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    InMemoryWebApiModule.forRoot(InMemoryDataService), //ERROR: Cannot find name 'InMemoryDataServiceInMemoryDataService

    RouterModule.forRoot([
      {
        path: '', redirectTo: '/dashboard', pathMatch: 'full'
      },
      {
        path: 'dashboard', component: DashboardComponent
      },
      {
        path: 'detail/:id', component: HeroDetailComponent
      },
      {
        path: 'heroes', component: HeroesComponent
      }
    ])
  ],
  providers: [HeroService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here is my specs (I am using angular CLI):

angular-cli: 1.0.0-beta.15
node: 4.2.6
os: linux x64 (ubuntu)

Not sure what else I can try? I guess I need to import the module somehow?

I did try and run:

npm install angular-route

But this led to:

├──UNMET PEER DEPENDENCY
@angular/[email protected]

├──UNMET PEER DEPENDENCY
@angular/[email protected]

├──UNMET PEER DEPENDENCY
@angular/[email protected]

└── [email protected]

Anyone have any suggestions?

@SefaÜmitOray I don't seem to have AppRoutingModule (not that I can see anyway), where should this file be?. I guess it's different to the RouterModule.forRoot([...]) in my app.module.ts? — benscabbia
– benscabbia, Commented Oct 14, 2016 at 12:00
Previous tutorial shows how to create RoutingModule. Check it out. angular.io/docs/ts/latest/tutorial/toh-pt5.html — Sefa
– Sefa, Commented Oct 14, 2016 at 12:04

Peter · Accepted Answer · 2016-10-14 12:13:33Z

2

Checkout the live example with all the files

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

import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';

const routes: Routes = [
  { path: '', redirectTo: '/dashboard', pathMatch: 'full' },
  { path: 'dashboard',  component: DashboardComponent },
  { path: 'detail/:id', component: HeroDetailComponent },
  { path: 'heroes',     component: HeroesComponent }
];

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


/*
Copyright 2016 Google Inc. All Rights Reserved.
Use of this source code is governed by an MIT-style license that
can be found in the LICENSE file at http://angular.io/license
*/

edited Oct 14, 2016 at 12:13

answered Oct 14, 2016 at 12:10

Peter

4,7916 gold badges46 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

jjokela Over a year ago

Peter, is the link working? For me the plunker link shows the default 'Hello Plunker' page

benscabbia Over a year ago

Same here Peter, could you fix the link pls :)

jjokela · Accepted Answer · 2016-10-14 12:10:18Z

0

According to comments, it seems that you might be missing the app-routing file altogether. Perhaps you missed the piece describing that, or sometimes the documentation might be outdated. Please check the plunker showing a working, live example with the needed files.

answered Oct 14, 2016 at 12:10

jjokela

3372 silver badges8 bronze badges

Comments

Saad Zubairi · Accepted Answer · 2021-09-14 16:27:06Z

0

Right before making a new angular project, the CLI prompts you to either include routing or not, like this:

Would you like to add Angular routing? Yes

Make sure you type in Y when it does so, or else your project won't be made with routing files.

answered Sep 14, 2021 at 16:27

Saad Zubairi

312 bronze badges

Collectives™ on Stack Overflow

Angular2 Tutorial (Tour of Heroes): Cannot find module './app-routing.module'

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related