angular2ルートは：私は<code>RouterModule</code>が実行中<code>undefined</code>であることが判明調査したときに、私は<code>TypeError: Cannot read property 'forRoot' of undefined(…)</code> を取得していますプロパティ 'forRoot'

Question

angular2のrc.5

を読み取ることができません。続き

は私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

ソースpackage.json 後、私の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 

です上記の回答から依存関係をコピーしました。

{ 
    "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 2

私は正確に同じ問題を抱えていたと私はここで

アンギュラ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 3

ウェブパックに問題がありました。私は2つのjsファイルを持っていました：vendor.jsとapp.jsです。 CommonsChunkPluginを使用して、必要なベンダーライブラリをロードしています。エントリポイントの1つと同じ名前オプションを設定しました。私は一つのことを変更しました

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

：：これは私の以前の設定だったfilenameオプションを追加し、それが動作するように開始しました：

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

これが同じ場合であれば、私は知らないが、それは私の問題を解決しました。

Answer 4

私は同じ問題を抱えていました。 多分それはうまいですが、私の場合は、ブラウザのキャッシュをクリアした後に問題が解決されました。

Answer 5

Visual Studio 2015の.NET Core Webアプリケーションで同じ問題が発生しました。rc4からrc5にパッケージをアップグレードしました。npm installを実行し、ブラウザをリフレッシュした後にこのエラーが発生しました。私は結局、更新されたパッケージをnode_modulesからwwwrootのlibフォルダにコピーするのを忘れてしまったことに気付きました（私はこれを行うgulpタスクを持っています）。 libsを更新するためにタスクを実行した後、すべてが正常に戻りました。これが誰かを助けることを望みます。私は、Visual Studioの下で実行していますが、私は、次の手順のすべてをしなければならなかった

Answer 6

：

1. は私のビンを削除し、OBJ、フォルダが
2. コピー私の一気スクリプトを実行
3. NPMをインストールnode_modules 。
4. ブラウザのキャッシュをクリア