没有 ActivatedRoute 的提供者 - Angular 2 RC5 [英] No provider for ActivatedRoute - Angular 2 RC5

问题描述

升级到 Angular 2 RC5(从 RC4)后，我似乎无法再将 ActivatedRoute 注入到我的组件中.

After upgrading to Angular 2 RC5 (from RC4) it seems I can no longer inject ActivatedRoute into my components.

原始例外:ActivatedRoute 没有提供程序！

ORIGINAL EXCEPTION: No provider for 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 没有提供程序声明，所以我想知道这里发生了什么?

I checked the "Tour of Heroes" example and they do the exact same thing, there is no provider declaration for ActivatedRoute so what is going on here I wonder?

推荐答案

我在 GitHub 上浏览了 Angular 2 问题，并幸运地找到了上述问题的解决方案(请参阅 此处).

I was browsing through Angular 2 issues on GitHub and found the solution to the above problem out of sheer luck (see here).

我需要在NgModule中的imports中添加routing(见上面的import)，即

I needed to add routing (see import above) to imports in NgModule, i.e.

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

似乎 Angular 2 的错误消息比以前更加混乱.

Seems Angular 2's error messages just got more confusing than they already have been.

我希望这个答案对某人有用，我已经要拔头发了.

I hope this answer is of some use to someone, I was about to pull my hair out already.

应大众要求，这里是导入的 routing 的一个片段(在我的脑海里，因为我这周不上班，如果有的话，请在评论中告诉我问题):

By popular request, here's a snippet for the imported routing (off the top of my head, as I'm off work this week, let me know in the comments if there are any issues with it):

app.routing.ts:

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

export routing = RouterModule.forRoot(routes);

并且在您的 app.module.ts 中，您将按如下方式导入:

and in your app.module.ts you'd import this as follows:

import { routing } from 'app.routing'

这篇关于没有 ActivatedRoute 的提供者 - Angular 2 RC5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！