Question

angular2 rc.5

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

以下是我的app.route.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);

Answer 1

我遇到了同样的问题。也许这是老生常谈，但在我的情况下，问题在我清除了浏览器缓存后得到了解决。

Answer 2

我在Visual Studio 2015中的.NET Core Web应用程序中遇到了同样的问题。我将我的软件包从rc4升级到rc5，做了npm install并在刷新浏览器后看到了这个错误。我终于意识到我忘了将更新的软件包从node_modules复制到wwwroot里面的我的lib文件夹（我有一个gulp任务来完成这个）。在运行任务以更新库后，一切都恢复正常。希望这有助于某人。

Answer 3

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

删除我的bin，obj，node_modules文件夹
npm install
运行我的gulp脚本，复制.js文件
清除浏览器缓存

Answer 4

来源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"
  }
}

Answer 5

我遇到了完全相同的问题，因为我有一个过时的Angular 2版本。

这是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"
  }
}

使用最新版本更新package.json文件，再次运行npm install，它应该可以正常工作。

您可以获取最新版本here。

Answer 6

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

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

我只更改了一件事：添加了filename选项，它开始有效：

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

我不知道这是否是同一个案例，但它解决了我的问题。

angular2 routes TypeError：无法读取属性'forRoot'

6 个答案: