web-dev-qa-db-ja.com

Angular2エラー「ルーターのプロバイダーがありません！ （RouterOutlet->ルーター） '

私はAngular2 alpha39とBabelを使用してES6 JSファイルをトランスパイルします。 TypeScriptを使用していません。

正しく表示されるコンポーネントを作成しました。テンプレートにrouter-outletを追加しました。アプリを実行すると、エラーメッセージが表示されます。

ルーターのプロバイダーがありません！ （RouterOutlet->ルーター）

呼び出しスタックは次のとおりです。

enter image description here

コードのスニペットは次のとおりです。

テンプレート：

.... // Removed for brevity
<div class="contenttext">
    <router-outlet></router-outlet>
</div>
.... // Removed for brevity

コンポーネントファイル：

import { Component, View, bootstrap,  OnInit } from 'angular2/angular2';
import { RouteConfig, RouterOutlet, RouterLink } from 'angular2/router';
import 'reflect-metadata';
import 'winjs';

@Component({
    selector: 'dashboard-app'
})
@View({
    templateUrl: '../js/dashboard.html',
    directives: [ ContentComponent, FamiliesComponent, RouterOutlet, RouterLink ]
})
@RouteConfig([ 
    { path: '/employees', component: EmployeesComponent, as: 'employees'} 
]) 
class DashboardAppComponent implements OnInit {
    constructor() {
    }

    onInit() {
        WinJS.UI.processAll().done(function() {
            var splitView = document.querySelector(".splitView").winControl;
            new WinJS.UI._WinKeyboard(splitView.paneElement);
        })
    }
}

bootstrap(DashboardAppComponent);
angular-routingangular
28
wonderful world

あなたが使用する必要があります：

  1. ブートストラップのROUTER_BINDINGS。
  2. あなたのindex.htmlで。
  3. 可能であれば、州を「従業員」として大文字で「従業員」として使用します。 （アルファ42では、この方法で1つの問題を解決しました）。

これがきっとあなたのお役に立てば幸いです。

- 更新 -

alpha41のリリース後：

  1. ROUTER_BINDINGSはROUTER_PROVIDERSで変更されました。
  2. ルータエイリアスはキャメルケースの方法である必要があります。
  3. router-outlerおよびrouter-linkの場合、コンポーネントアノテーションのdirectivesプロパティにROUTER_DIRECTIVESをインポートするだけです。
  4. Router-linkは、値がルート名の配列であることを想定しています。詳細については。 refer here 。

ルーティングに関する詳細については、このチュートリアルを参照してください here 。

---更新2 ---

  1. 現在（alpha-49現在）、ルーターはng.routerとしてエクスポートされています。

  2. （alpha-47によると、すべてのライフサイクルフックの名前は変更されました。）

    onActivate、onReuse、onDeactivate、canReuse、canDeactivate

    宛先：-

    routerOnActivate、routerOnReuse、routerOnDeactivate、routerCanReuse、routerCanDeactivate

---更新3 ---

  1. router-linkはrouterLinkに変更されます

  2. およびrouteconfigプロパティが次のように変更されました。

    {path: '/abc', component: ABC, as: 'abc'}から：{path: '/xyz' , component: XYZ, name: 'xyz'}

-アップデート4-

ANGULAR2 RCへの更新

RCの後で、angular2のルーティングに多くの変更が加えられました。ここで言及するポイントのいくつかは、誰かを助けるかもしれません：-

  1. angular2/routerは@angular/routerで変更されました（@angular/router-deprecatedのインポートを使用してルーティングの古い機能を使用することもできますが、現時点では@angular/routerを使用する必要があります）。

  2. @RouteConfigは@Routesで変更されました。

例えば ​​：-

@Routes([
  {path: '/crisis-center', component: CrisisListComponent},
  {path: '/heroes',        component: HeroListComponent}
])
37
Pardeep Jain

2.0.0-alpha.36 (2015-08-31)

  • routerInjectablesは_ROUTER_BINDINGS_に名前が変更されました

2.0.0-alpha.41 (2015-10-13)

  • _ROUTER_BINDINGS_は_ROUTER_PROVIDERS_に名前が変更されました

ROUTER_PROVIDERSを使用

_ROUTER_PROVIDERS_は、ルーターのブートストラップを簡素化するために使用されます。

以下が含まれます。

  • RouterRegistry-登録済みルートのコレクション
  • _LocationStrategy = PathLocationStrategy_-パスで一致

_ROUTER_PROVIDERS_は「適切な」デフォルトを提供するため、別のルートLocationStrategyが必要な場合を除いて使用する必要があります。

変更：

_bootstrap(DashboardAppComponent);
_

To：

_bootstrap(DashboardAppComponent, [
  ROUTER_PROVIDERS
]);
_

出典：

2.0.0-alpha.38 (2015-10-03)

ルートエイリアスはキャメルケースである必要があります（技術的にはPascalCase）

注：これは、Pardeepの＃3の回答ですでに言及されています

_router-link_を介してテンプレートへのルートへのリンクを含める場合、ルートのエイリアス（つまり、nameプロパティ）がPascalCaseであることを確認する必要があります。

_router-link_を使用するプランを使用する場合、ルートを次のように変更します。

_{ path: '/employees', component: EmployeesComponent, name: 'Employees'}
_

次に、次を使用してテンプレートにリンクを追加できます。

_<a [router-link]="['/Employees']">Employees Link</a>
_

RouterLinkは、ルートパスに一致するhrefを動的に挿入します。

注：issue/prを読むと、この変更は、ユーザーが_<route-link>_バインディングとルートurlを混同しないようにするために行われたようです。

出典：

ヒント：

ビューディレクティブを簡素化する場合は、_ROUTER_DIRECTIVES_を使用します

以下が含まれます。

  • RouterLink
  • RouterOutlet

更新：

近い将来、RouterOutlet/_<router-outlet>_はRouterViewport/_<router-viewport>_に名前が変更されます

出典：

更新2：

  • RouteConfigプロパティasはnameに名前が変更されました

出典：

9
Evan Plaice

Answer onDec 23rd 2016（Angular v2.4.1、Router v3.4.1-すべてのNG v2。 xx +ルーターv3.xx）

3つのアプリをWebpack StarterからSeedにAngular CLI（v1.0.0-beta.24 ）、この問題をヒットします。

NG 2 massiverouter doc page にあるもののごく一部のみが必要です：

このサンプルのように見えるapp-routing.module.tsファイル（通常はsrc/app /フォルダー内）：

import { NgModule }              from '@angular/core';
import { RouterModule, Routes }  from '@angular/router';

const appRoutes: Routes = [
  { path: '', component: YourHomePageComponent },
  { path: 'next-page',   component: NextComponent }
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}

メインモジュール（通常はsrc/app/app.module.ts）にAppRoutingModuleをインポートします。

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule  // <--- The import you need to add
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

<router-outlet></router-outlet>メインhtmlのどこか（多くの場合src/app/app.component.html）。これはルーターコンテンツが挿入される場所です。

4
Paul Lockwood

ルーターがAppModuleで定義および宣言されていることを確認してください。例（ルーティングが言及されているすべての場所を見て、残りは無視します）：

app.routing.ts

import { ModuleWithProviders }  from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { HeroesComponent }      from './heroes.component';
import {DashboardComponent} from './dashboard.component';
import {HeroDetailComponent} from './hero-detail.component';

const appRoutes: Routes = [
  {
    path: 'heroes',
    component: HeroesComponent
  },
  {
  path: 'dashboard',
  component: DashboardComponent
},
{
  path: '',
  redirectTo: '/dashboard',
  pathMatch: 'full'
},
{
  path: 'detail/:id',
  component: HeroDetailComponent
},
];

export const routing: ModuleWithProviders = RouterModule.forRoot(appRoutes);

およびapp.module.ts：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { HttpModule }    from '@angular/http';

// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';


import { AppComponent }         from './app.component';
import { DashboardComponent }   from './dashboard.component';
import { HeroesComponent }      from './heroes.component';
import { HeroDetailComponent }  from './hero-detail.component';
import { HeroService }          from './hero.service';
import { routing }              from './app.routing';
import './rxjs-extensions';
import {HeroSearchComponent} from './hero-search.component';

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,

    routing
  ],
  declarations: [
    AppComponent,
    DashboardComponent,
    HeroDetailComponent,
    HeroesComponent,
    HeroSearchComponent
  ],
  providers: [
    HeroService,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}
3
ACV

ルートを定義しないと、Routerのユーザー依存性注入はできません！次のコードのようなルートユーザーを定義するには：

const loginRoutes: Routes = [
    {path: 'foo/bar/baz', component: 'MyRootComponent'}
];

@NgModule({
    imports:      [
        BrowserModule,
        FormsModule,
        HttpModule,
        JsonpModule,
        RouterModule.forRoot(loginRoutes)
    ],
    providers:    [],
    declarations: [
        MyLoginComponent
    ],
    bootstrap:    [
        MyLoginComponent
    ]
})

export class MyLoginModule
{
}
1
Mostafa Lavaei

これにより、誰かを1時間節約できます。

ルーティングさえ使用しない場合（たとえば、一時的にルーティング設定をインポートせず、router-outletがコメントアウトされている場合）、このエラーが発生します。 ：

@Component({...}})
export class SomeComponent {
constructor(private _router: Router, private _route: ActivatedRoute) {
//may be you are not using _route/_route at the moment at all!
}
...
}
1
SalientBrain