Angular2 - Calling function 'UIRouterModule', function calls are not supported

Question

I'm new in Angular2.

This error I'm getting when I import UIRouterModule, referring this

ERROR in Error encountered resolving symbol values statically. Calling function 'UIRouterModule', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /site_root/src/app/app.module.ts, resolving symbol AppModule in /site_root/src/app/app.module.ts

My app.module.ts is,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { RouterModule, Routes }   from '@angular/router';
import { UIView, UIRouterModule } from "ui-router-ng2";

import { AppComponent } from './app.component';
import { ProfileComponent } from './profile/profile.component';
import { WidgetComponent } from './widget/widget.component';
import { DashboardComponent } from './dashboard/dashboard.component';
import { MyRootUIRouterConfig } from "./router.config";

import {MAIN_STATES} from "./app.states";

const appRoutes: Routes = [
  { path: '', component: DashboardComponent },
  { path: 'profile', component: ProfileComponent },
  { path: 'widget', component: WidgetComponent },
];

@NgModule({
  declarations: [
    AppComponent,
    ProfileComponent,
    WidgetComponent,
    DashboardComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    RouterModule.forRoot(appRoutes),
    UIRouterModule.forRoot({
      states: MAIN_STATES,
      otherwise: { state: 'app', params: {} },
      useHash: true,
      configClass: MyRootUIRouterConfig
    })
  ],
  providers: [],
  bootstrap: [AppComponent, UIView]
})
export class AppModule { }

Where I'm doing wrong?

eko eko · Accepted Answer · 2017-01-20T10:37:38

I think you need to change UIRouterModule.forRoot({ with UIRouterModule.forChild({

as it is written like that in the documentation.

An application should only create and import a single NgModule using forRoot(). All other modules should be created using UIRouterModule.forChild.

https://ui-router.github.io/ng2/docs/latest/classes/ng2.uiroutermodule.html

Angular2 - Calling function 'UIRouterModule', function calls are not supported

2 Answers