Angular2 教程（英雄之旅）：找不到模块“./app-routing.module”

Question

我正在阅读此处的 NG2 教程，但遇到了障碍。

\n\n

当我尝试将我的文件导入AppRoutingModule到我的文件中时app.module.ts，出现“ Cannot find module \'./app-routing.module\”错误。我在这里看到了这篇文章以及其他解决方案，但它们似乎都与 相关systemjs，但不相关 webpack。

\n\n

这是我的package.json：

\n\n

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

\n\n

这是我的app.module.ts

\n\n

import { BrowserModule } from \'@angular/platform-browser\';\nimport { NgModule } from \'@angular/core\';\nimport { FormsModule } from \'@angular/forms\';\nimport { HttpModule } from \'@angular/http\';\nimport { RouterModule }   from \'@angular/router\';\n\n// Imports for loading & configuring the in-memory web api\nimport { InMemoryWebApiModule } from \'angular2-in-memory-web-api\';\nimport { AppRoutingModule } from \'./app-routing.module\'; //ERROR\n...\n\n\n@NgModule({\n  declarations: [\n    AppComponent,\n    HeroDetailComponent,\n    HeroesComponent,\n    DashboardComponent,\n  ],\n   imports: [\n    BrowserModule,\n    FormsModule,\n    HttpModule,\n    AppRoutingModule,\n    InMemoryWebApiModule.forRoot(InMemoryDataService), //ERROR: Cannot find name \'InMemoryDataServiceInMemoryDataService\n\n    RouterModule.forRoot([\n      {\n        path: \'\', redirectTo: \'/dashboard\', pathMatch: \'full\'\n      },\n      {\n        path: \'dashboard\', component: DashboardComponent\n      },\n      {\n        path: \'detail/:id\', component: HeroDetailComponent\n      },\n      {\n        path: \'heroes\', component: HeroesComponent\n      }\n    ])\n  ],\n  providers: [HeroService],\n  bootstrap: [AppComponent]\n})\nexport class AppModule { }\n

\n\n

这是我的规格（我使用的是 Angular CLI）：

\n\n

angular-cli: 1.0.0-beta.15\nnode: 4.2.6\nos: linux x64 (ubuntu)\n

\n\n

不确定我还能尝试什么？我想我需要以某种方式导入模块？

\n\n

我确实尝试运行：

\n\n

npm install angular-route \n

\n\n

但这导致了：

\n\n

\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80UNMET PEER DEPENDENCY\n@angular/common@2.0.0\n\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80UNMET PEER DEPENDENCY\n@angular/core@2.0.0\n\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80UNMET PEER DEPENDENCY\n@angular/platform-browser@2.0.0\n\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 angular-route@1.5.8  \n

\n\n

有人有什么建议吗？

\n

Answer 1

查看包含所有文件的实时示例

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