angular2 路由类型错误：无法读取属性"forRoot"

angular2 rc.5

我得到了TypeError: Cannot read property 'forRoot' of undefined(…)当我调查时，我发现RouterModule在执行过程中是undefined。

下面是我的app. routes .ts

import {Routes, RouterModule } from '@angular/router';
//const routes: Routes = [];
import {HelloComponent} from './hello.component';
import {IncComponent} from './inc.component';
import {AdditionComponent} from './addition.component';
import {RomanComponent} from './roman.component';
let routes: Routes = [
    {
        path: 'hello',
        component: HelloComponent
    },
    {
        path: '',
        redirectTo: '/hello',
        pathMatch: 'full'
    },
    {
        path: 'increment',
        component: IncComponent
    },{
        path: 'adder',
        component: AdditionComponent
    },{
        path: 'roman',
        component: RomanComponent
    }
];

export const routing = RouterModule.forRoot(routes); // error on this line

下面是我的app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
import {routing} from './app.routes';
import {HelloComponent} from './hello.component';
import {IncComponent} from './inc.component';
import {AdditionComponent} from './addition.component';
import {RomanComponent} from './roman.component';
@NgModule({
    imports:[
        BrowserModule,
        routing
    ],
    declarations: [
        AppComponent,
        HelloComponent,
        IncComponent,
        AdditionComponent,
        RomanComponent
    ],
    bootstrap:    [ AppComponent ]
})
export class AppModule { }

和main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
    //import { HTTP_PROVIDERS } from '@angular/http';
    import { AppModule } from './app.module';
    platformBrowserDynamic().bootstrapModule(AppModule);

我也遇到了同样的问题。也许这是陈词滥调，但在我的情况下，问题是解决后，我清除了浏览器缓存

我在Visual Studio 2015的。net Core web应用程序中工作时遇到了同样的问题。我将软件包从rc4升级到rc5，执行了npm install操作，在刷新浏览器后看到了这个错误。我最终意识到我忘记将更新的包从node_modules复制到wwwroot中的lib文件夹中(我有一个gulp任务来完成这个任务)。在运行更新库的任务之后，一切都恢复正常。

我在Visual Studio下运行，但我必须做以下所有步骤:

npm安装
运行我的gulp脚本，复制

source package.json我已经从上面的答案中复制了依赖项。

{
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}

我也遇到了同样的问题，这是因为我使用的是过时的Angular 2版本。

这是最新的(正如我们所说的)软件包版本。Json文件:

{
  "dependencies": {
    "@angular/common": "2.0.0-rc.5",
    "@angular/compiler": "2.0.0-rc.5",
    "@angular/core": "2.0.0-rc.5",
    "@angular/forms": "0.3.0",
    "@angular/http": "2.0.0-rc.5",
    "@angular/platform-browser": "2.0.0-rc.5",
    "@angular/platform-browser-dynamic": "2.0.0-rc.5",
    "@angular/router": "3.0.0-rc.1",
    "@angular/router-deprecated": "2.0.0-rc.2",
    "@angular/upgrade": "2.0.0-rc.5",
    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.15",
    "bootstrap": "^3.3.6"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "lite-server": "^2.2.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}

更新你的包。使用最新版本的Json文件，再次运行NPM install，它应该可以工作了。

您可以在这里获得最新版本

对我来说，这是webpack的问题-我有2个js文件:vendor.js和app.js。我使用CommonsChunkPlugin来加载所需的供应商库。我将名称选项设置为与其中一个入口点相同。这是我之前的配置:

new webpack.optimize.CommonsChunkPlugin({
    name: 'common'
})

我只改变了一件事:添加了filename选项，它开始工作了:

new webpack.optimize.CommonsChunkPlugin({
    name: 'common',
    filename: "vendor.js"
})

我不知道这是不是同样的情况，但它解决了我的问题。

相关内容

最新更新

热门标签：