gudthing gudthing - 1 month ago 77
AngularJS Question

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

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/common@2.0.0

├──UNMET PEER DEPENDENCY
@angular/core@2.0.0

├──UNMET PEER DEPENDENCY
@angular/platform-browser@2.0.0

└── angular-route@1.5.8


Anyone have any suggestions?

Answer

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
*/