18

升级到 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 { }

我检查了“英雄之旅”示例，他们做了完全相同的事情，没有提供者声明，ActivatedRoute所以我想知道这里发生了什么？

4

3 回答 3

31

如果你在单元测试中得到这个错误，你需要导入 RouterTestingModule

于 2017-12-30T00:40:49.370 回答
23

我在 GitHub 上浏览了 Angular 2 问题，并完全靠运气找到了上述问题的解决方案（请参见此处）。

我需要添加routing（见import上文）到importsin 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'
于 2016-08-14T13:54:48.173 回答
7

我在单元测试期间遇到了这个错误。导入 RouterTestingModule 并在我的测试模块中使用如下：

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

);

于 2018-03-16T03:26:00.527 回答