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

Posted 2023-02-27

【中文标题】Angular 2 错误：无效的提供者 - 只允许提供 Provider 和 Type 的实例，得到：[object Object]

【英文标题】：Angular 2 Error: Invalid provider - only instances of Provider and Type are allowed, got: [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-b​​rowser'导入BrowserPlatformLocation； 导入'rxjs/add/operator/toPromise'; 导入'rxjs/add/operator/map'； 从“@angular/common”导入 APP_BASE_HREF ； 从“@angular/forms”导入 disableDeprecatedForms, provideForms ； 从“@angular/core”导入 enableProdMode ； 从 '@angular/platform-b​​rowser-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);
  

【参考方案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],