[英]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.我正在阅读此处的 NG2 教程,但遇到了绊脚石。
When I try and import my AppRoutingModule
in my app.module.ts
file I get a ' Cannot find module './app-routing.module
' error.当我尝试在
app.module.ts
文件中导入AppRoutingModule
,出现“ Cannot find module './app-routing.module
“错误。 I have seen this post on here , amongst other solutions, but they all seem to relate to systemjs
and not webpack
.我在这里看到了这篇文章,以及其他解决方案,但它们似乎都与
systemjs
而不是webpack
。
Here is my package.json :这是我的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这是我的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):
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?有人有什么建议吗?
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
*/
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.
请检查显示带有所需文件的有效示例的plunker 。
Right before making a new angular project, the CLI prompts you to either include routing or not, like this:在创建新的 angular 项目之前,CLI 会提示您是否包含路由,如下所示:
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.确保在这样做时输入 Y,否则您的项目将不会使用路由文件制作。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.