I am integrating ui-router2 with angular2-rc-4 but i am getting
Error: Invalid provider - only instances of Provider and Type are allowed, got: [object Object]
Following is the bootstraping code
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}) ]);
Following is my router config.
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);
}
}
The same error is thrown for a simple typo, if you write this:
{ provider: MyService, useValue: myServiceMock }
Instead of this:
{ provide: MyService, useValue: myServiceMock }
Note the difference between provider
and provide
. The correct is provide
.
Hope this helps.
The issue got resolved. The problem was ui-router-ng2 documentation was not clear if you want to integrate ui-router-ng2 in your existing application. I have bootsraped AppComponent
instead of UIView
which was incorrect in documentation.
Following is the code.
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));
Sounds like you are using an Angular2 version where this kind of provider is not yet supported
{
provide: APP_BASE_HREF,
useValue: '<%= APP_BASE %>'
},
AFAIR this was introduced in RC.4 or RC.3
Please try instead
@NgModule({
...,
{ provide: APP_BASE_HREF, useValue: '<%= APP_BASE %>'
})
export class AppModule {}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With