首页 文章

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

提问于
浏览 次
4

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

错误：无效的提供程序 - 仅允许Provider和Type的实例，得到：[object Object]

以下是引导代码

import {trace, UIROUTER_PROVIDERS, UIView, UIRouterConfig, Category, UIROUTER_DIRECTIVES} from "ui-router-ng2";
    import {HTTP_PROVIDERS} from "@angular/http";
    import {provide, PLATFORM_DIRECTIVES} from "@angular/core";
    import {LocationStrategy, HashLocationStrategy, PathLocationStrategy, PlatformLocation} from "@angular/common";
    import {BrowserPlatformLocation} from '@angular/platform-browser';
    import 'rxjs/add/operator/toPromise';
    import 'rxjs/add/operator/map';

    import { APP_BASE_HREF } from '@angular/common';
    import { disableDeprecatedForms, provideForms } from '@angular/forms';
    import { enableProdMode } from '@angular/core';
    import { bootstrap } from '@angular/platform-browser-dynamic';

    import { InitialStates } from './app.routes';
    import { AppComponent } from './app.component';
    import {MyUIRouterConfig} from "./_bootstrap/router.config";

    if ('' === 'prod') { enableProdMode(); }

    trace.enable(Category.TRANSITION, Category.VIEWCONFIG);

    bootstrap(UIView, [
        disableDeprecatedForms(),
        provideForms(),
        InitialStates,
        {
          provide: APP_BASE_HREF,
          useValue: ''
         },


         provide(LocationStrategy, { useClass: HashLocationStrategy }),

         provide(LocationStrategy, { useClass: PathLocationStrategy }),
         provide(PlatformLocation, { useClass: BrowserPlatformLocation }),

        ...UIROUTER_PROVIDERS,
        ...HTTP_PROVIDERS,

        provide(UIRouterConfig, { useClass: MyUIRouterConfig }),

        provide(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

3 回答

  • 1

    问题得到了解决 . 问题是如果你想在你现有的应用程序中集成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));
    回复于
  • 1

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

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

    AFAIR在RC.4或RC.3中引入

    请尝试改为

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

    对于一个简单的拼写错误，抛出相同的错误，如果你写这个：

    { provider: MyService, useValue: myServiceMock }

    而不是这个：

    { provide: MyService, useValue: myServiceMock }

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

    希望这可以帮助 .

    回复于

相关问题