web-dev-qa-db-ja.com

Angular 2エラー：無効なプロバイダー-プロバイダーとタイプのインスタンスのみが許可されています、取得：[オブジェクトオブジェクト]

Ui-router2をangular2-rc-4と統合していますが、

エラー：無効なプロバイダー-プロバイダーとタイプのインスタンスのみが許可されています、取得：[オブジェクトオブジェクト]

以下はブートストラップコードです

 
 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-b​​rowser'; 
 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-b​​rowser-dynamic'; 
 
 import {InitialStates} from './app .routes '; 
 import {AppComponent} from' ./app.component';
 import {MyUIRouterCo nfig} from "./_bootstrap/router.config";

 if（ '' === 'prod'）{enableProdMode（）; } 
 
 trace.enable（Category.TRANSITION、Category.VIEWCONFIG）; 
 
 bootstrap（UIView、
 disableDeprecatedForms（）、
 prepareForms（）、
 InitialStates、
 {
 serve：APP_BASE_HREF、
 useValue： '' 
}、
 
 
 prepare（LocationStrategy、{useClass：HashLocationStrategy}）、
 
 prepare（LocationStrategy、{useClass：PathLocationStrategy}）、
 serve（PlatformLocation 、{useClass：BrowserPlatformLocation}）、
 
 ... UIROUTER_PROVIDERS、
 ... HTTP_PROVIDERS、
 
 serve（UIRouterConfig、{useClass： MyUIRouterConfig}）、
 
 prepare（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);
  }
}
angularangular-ui-routerangular2-routing
9
Shamsher

次のように書くと、単純なタイプミスでも同じエラーがスローされます。

{ provider: MyService, useValue: myServiceMock }

これの代わりに：

{ provide: MyService, useValue: myServiceMock }

providerとprovideの違いに注意してください。正しいのはprovideです。

お役に立てれば。

7
György Balássy

問題は解決しました。問題は、既存のアプリケーションに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
Shamsher

この種類のプロバイダーがまだサポートされていないAngular2バージョンを使用しているようです

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

AFAIRこれはRC.4またはRC.3で導入されました

代わりに試してください

@NgModule({
  ..., 
  { provide: APP_BASE_HREF, useValue: '<%= APP_BASE %>'
})
export class AppModule {}
1
Günter Zöchbauer