[英]Angular2 Tutorial (Tour of Heroes): Cannot find module './app-routing.module'
我正在閱讀此處的 NG2 教程,但遇到了絆腳石。
當我嘗試在app.module.ts
文件中導入AppRoutingModule
,出現“ Cannot find module './app-routing.module
“錯誤。 我在這里看到了這篇文章,以及其他解決方案,但它們似乎都與systemjs
而不是webpack
。
這是我的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"
}
}
這是我的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 { }
這是我的規格(我使用的是 angular CLI):
angular-cli: 1.0.0-beta.15
node: 4.2.6
os: linux x64 (ubuntu)
不知道我還能嘗試什么? 我想我需要以某種方式導入模塊?
我確實嘗試運行:
npm install angular-route
但這導致:
├──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
有人有什么建議嗎?
查看包含所有文件的 實時示例
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
*/
根據評論,您似乎完全錯過了應用程序路由文件。 也許您錯過了描述該內容的文章,或者有時文檔可能已過時。 請檢查顯示帶有所需文件的有效示例的plunker 。
在創建新的 angular 項目之前,CLI 會提示您是否包含路由,如下所示:
Would you like to add Angular routing? Yes
確保在這樣做時輸入 Y,否則您的項目將不會使用路由文件制作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.