web-dev-qa-db-ja.com

ActivatedRouteのプロバイダーがありません-Angular 2 RC5

Angular 2 RC5（RC4から））にアップグレードした後、コンポーネントにActivatedRouteを注入できなくなったようです。

元の例外：ActivatedRouteのプロバイダーはありません！

関連するコードは次のとおりです。

import { Component } from '@angular/core';

import { 
  ActivatedRoute
} from '@angular/router';

declare var module: {
  id: string;
};

@Component({
  moduleId: module.id,
  selector: 'mds-app',
  templateUrl: 'app.component.html',
  styleUrls: [
      'app.component.css'
  ],
  directives: []
})
export class AppComponent { 

  constructor(private _route: ActivatedRoute) {
    this._route.params.subscribe(params => console.log(_route));
  }
}

ここに私のapp.module.ts：

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule }  from '@angular/common';
import { Routes, RouterModule }  from '@angular/router';

import { AppComponent }  from './app.component';

import { 
    routing, 
    appRoutingProviders 
} from './app.routing';

@NgModule({
  imports:      [ BrowserModule, CommonModule, RouterModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ appRoutingProviders ]
})
export class AppModule { }

「Tour of Heroes」の例をチェックしましたが、まったく同じことをしています。ActivatedRouteのプロバイダー宣言がないので、ここで何が起こっているのでしょうか。

angularangular2-routingangular2-router3
15
Thorsten Westheider

私はGitHubでAngular 2件の問題を閲覧し、幸運から上記の問題の解決策を見つけました（ here を参照）。

routing（上記のimportを参照）をimportsのNgModuleに追加する必要がありました。

@NgModule({
  imports:      [ BrowserModule, CommonModule, RouterModule, routing ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ appRoutingProviders ]
})

どうやらAngular 2のエラーメッセージは、以前よりも複雑になりました。

この答えが誰かに役立つことを願っています。すでに髪を引き抜こうとしていました。

編集：人気のあるリクエストにより、インポートされたroutingのスニペットがあります（今週休みなので、頭に浮かぶ問題があればコメントで知らせてください）：

app.routing.ts：

export routes: Routes = [
   { path: 'sales', component: SalesComponent }
];

export routing = RouterModule.forRoot(routes);

そしてあなたのapp.module.tsこれを次のようにインポートします。

import { routing } from 'app.routing'
22
Thorsten Westheider

ユニットテストでこのエラーが発生した場合は、RouterTestingModuleをインポートする必要があります

24
techguy2000

ユニットテスト中にこのエラーが発生しました。 RouterTestingModuleをインポートし、次のようにテストモジュールで使用します。

  beforeEach(
async(() => {
  TestBed.configureTestingModule({
    declarations: [],
    imports: [
      RouterTestingModule.withRoutes([{ path: 'orders/:id', component: OrdersComponent }])
    ],
    providers: []
  }).compileComponents();
})

）;

5
Cüneyt Aliustaoğlu