Angular 2 错误：无效的提供者 - 只允许提供 Provider 和 Type 的实例，得到：[object Object]答案

【问题标题】：Angular 2 Error: Invalid provider - only instances of Provider and Type are allowed, got: [object Object]Angular 2 错误：无效的提供者 - 只允许提供 Provider 和 Type 的实例，得到：[object Object]
【发布时间】：2016-12-16 21:50:51
【问题描述】：

我正在将 ui-router2 与 angular2-rc-4 集成，但我得到了

错误：无效的提供者 - 只允许提供者和类型的实例，得到：[object Object]

以下是引导代码

从“ui-router-ng2”导入 {trace，UIROUTER_PROVIDERS，UIView，UIRouterConfig，Category，UIROUTER_DIRECTIVES}；从“@angular/http”导入 {HTTP_PROVIDERS}；从“@angular/core”导入{provide, PLATFORM_DIRECTIVES}；从“@angular/common”导入{LocationStrategy、HashLocationStrategy、PathLocationStrategy、PlatformLocation}；从'@angular/platform-browser'导入{BrowserPlatformLocation}；导入'rxjs/add/operator/toPromise'; 导入'rxjs/add/operator/map'；从“@angular/common”导入 { APP_BASE_HREF }；从“@angular/forms”导入 { disableDeprecatedForms, provideForms }；从“@angular/core”导入 { enableProdMode }；从 '@angular/platform-browser-dynamic' 导入 { bootstrap }；从'./app.routes'导入{ InitialStates }；从'./app.component'导入{AppComponent}；从“./_bootstrap/router.config”导入{MyUIRouterConfig}； if ('' === 'prod') { enableProdMode(); } trace.enable(Category.TRANSITION, Category.VIEWCONFIG); 引导程序（UIView，[ disableDeprecatedForms(), 提供表格（），初始状态， { 提供：APP_BASE_HREF，使用价值：'' }, 提供（LocationStrategy，{ useClass：HashLocationStrategy }），提供（LocationStrategy，{ useClass：PathLocationStrategy }），提供（平台位置，{ useClass：BrowserPlatformLocation }）， ...UIROUTER_PROVIDERS， ...HTTP_PROVIDERS, 提供（UIRouterConfig，{ useClass：MyUIRouterConfig }），提供（PLATFORM_DIRECTIVES，{useValue：[UIROUTER_DIRECTIVES]，multi：true}） ]);

以下是我的路由器配置。

import {UIRouter} from "ui-router-ng2";
import {InitialStates} from "../app.routes";
import {Injectable, Injector} from "@angular/core";

@Injectable()
export class MyUIRouterConfig {
  constructor(private injector: Injector) {}

  configure(uiRouter: UIRouter) {
    // Register each state definition (from app.states.ts) with the StateRegistry
    InitialStates.forEach(state => uiRouter.stateRegistry.register(state));

    // Define a default behavior, for when the URL matched no routes
    uiRouter.urlRouterProvider.otherwise(() => uiRouter.stateService.go("app", null, null) && null);
  }
}

【问题讨论】：

标签： angular angular-ui-router angular2-routing

【解决方案1】：

如果你这样写，一个简单的错字也会引发同样的错误：

{ provider: MyService, useValue: myServiceMock }

而不是这个：

{ provide: MyService, useValue: myServiceMock }

注意provider 和provide 之间的区别。正确的是provide。

希望这会有所帮助。

【讨论】：

【解决方案2】：

问题已解决。如果您想将 ui-router-ng2 集成到现有应用程序中，问题是 ui-router-ng2 文档不清楚。我已经引导 AppComponent 而不是 UIView 这在文档中是不正确的。以下是代码。

import { enableProdMode, provide } from '@angular/core';
import { bootstrap } from '@angular/platform-browser-dynamic';
import { LocationStrategy, HashLocationStrategy } from "@angular/common";
import { AppComponent } from './app.component';
import {MyUIRouterConfig} from "./router.config";
import {
  UIROUTER_PROVIDERS, 
  UIView, 
  UIRouterConfig,
  UIROUTER_DIRECTIVES} from "ui-router-ng2";

if ('<%= ENV %>' === 'prod') { enableProdMode(); }

bootstrap(AppComponent, [
    ...UIROUTER_PROVIDERS,
    provide(UIRouterConfig, { useClass: MyUIRouterConfig }),
    provide(LocationStrategy, {useClass: HashLocationStrategy})
])
.catch(err => console.log(err));

【讨论】：

所以让模块作者知道Doc有错误，以便他可以更新

【解决方案3】：

听起来您正在使用尚不支持此类提供程序的 Angular2 版本

{
  provide: APP_BASE_HREF,
  useValue: '<%= APP_BASE %>'
 },

AFAIR 这是在 RC.4 或 RC.3 中引入的

请尝试一下

@NgModule({
  ..., 
  { provide: APP_BASE_HREF, useValue: '<%= APP_BASE %>'
})
export class AppModule {}

【讨论】：

我已经尝试过了，但仍然是同样的错误。当我克隆 github.com/mgechev/angular2-seed/blob/master/src/client/app/… 并在没有 ui-router-2 的情况下独立运行时，提供程序对象按预期工作
您列为提供者的所有内容是否正确导入？
您找到解决方案了吗？您从哪里导入提供功能？

【解决方案4】：

这个答案和原来的不一样，但是报错信息是一样的。

我收到此错误是因为我的测试文件 (app.component.spec.ts) 中有：

 describe('AppComponent', () => {

  let translate: TranslateService; // don't use in providers array!

  beforeEach(async() => {
    await TestBed.configureTestingModule({
      imports: [
        // ...
      ]
      // ...
      providers: [
        traslate,
      ],
      schemas: [CUSTOM_ELEMENTS_SCHEMA],
    }).compileComponents();
  });

当正确定义提供者的方式是

providers: [TranslateService],

【讨论】：