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-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 {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);
}
}
次のように書くと、単純なタイプミスでも同じエラーがスローされます。
{ provider: MyService, useValue: myServiceMock }
これの代わりに:
{ provide: MyService, useValue: myServiceMock }
provider
とprovide
の違いに注意してください。正しいのはprovide
です。
お役に立てれば。
問題は解決しました。問題は、既存のアプリケーションに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));
この種類のプロバイダーがまだサポートされていないAngular2バージョンを使用しているようです
{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
},
AFAIRこれはRC.4またはRC.3で導入されました
代わりに試してください
@NgModule({
...,
{ provide: APP_BASE_HREF, useValue: '<%= APP_BASE %>'
})
export class AppModule {}