2017-04-10 49 views
0

我爲了特定目的實現了RouteConfigBuilder,用自定義變量清除了路由聲明。Angular 2 AOT編譯錯誤 - 創建路由時的對象的新實例

路由builder.type.ts

export class RouteBuilder { 
    private routeConfigBuilders: RouteConfigBuilder[] = []; 
    private currentRouteConfig: RouteConfigBuilder; 

    public add(routeConfigBuilder: IRouteConfigBuilder): RouteBuilder { 
    this.routeConfigBuilders.push(RouteConfigBuilder.get(routeConfigBuilder)); 
    return this; 
    } 

    public build(): Routes { 
    const routes: Routes = []; 
    let routeConfig: IRouteConfig; 

    for (const routeConfigBuilder of this.routeConfigBuilders) { 
     routeConfig = routeConfigBuilder.build(); 
     routes.push(this.routeConfigToRoute(routeConfig)); 
    } 

    return routes; 
    } 

    private routeConfigToRoute(routeConfig: IRouteConfig): Route { 
    const route: Route = {}; 

    for (const prop in routeConfig) { 
     if (routeConfig[prop] 
     || ((typeof routeConfig[prop] === 'string') 
      && (routeConfig[prop] === '')) 
    ) { 

     if ((prop === 'loadChildren') 
      && !((typeof routeConfig[prop] === 'string')) 
     ) { 
      route[prop] =() => routeConfig[prop]; 
     } else if (prop === 'addChildrenCallback') { 
      route['children'] = routeConfig[prop]().build(); 
     } else { 
      route[prop] = routeConfig[prop]; 
     } 
     } 
    } 

    return route; 
    } 

} 

在我的路由模塊聲明:

export function appRoutes() { 
    return new RouteBuilder() 
    // always first 
    .add({ 
     path: '', 
     redirectTo: 'dashboard', 
     pathMatch: 'full' 
    }) 

    .add({ 
     path: '', 
     loadChildren: AuthModule 
    }) 

    .add({ 
     path: '', 
     loadChildren: FeaturesModule, 
     canActivate: [AuthGuard] 
    }) 

    // always last 
    .add({ 
     path: '**', 
     component: PageNotFoundComponent 
    }) 

    .build(); 
} 


@NgModule({ 
    imports: [ 
    RouterModule.forRoot(appRoutes()) 
    ], 
    exports: [ 
    RouterModule 
    ] 
}) 
export class AppRoutingModule { } 

當我運行NG構建將返回:

error AOT

我的聲明在其他模塊中是相同的,但只在app-routing.module.ts和au中th-routing.module.ts發生了。 如果我刪除了我的RouteConfigBuilder實例,它的工作完美。

我嘗試了很多方式來修改我如何實例化我的RouteConfigBuilder,直到現在沒有什麼可以幫助我。

如何在路由中實例化我的對象,並且AOT不再顯示錯誤?

非常感謝。

***添加實現路由config.type.ts

import { Type } from '@angular/core'; 


interface IRouteInfo { 
    title: string; 
    withoutNavigate?: boolean; 
} 

interface IRouteData { 
    info: IRouteInfo; 
} 

export interface IRouteConfig { 
    path: string; 
    component?: Type<any>; 
    loadChildren?: Type<any>; 
    data?: IRouteData; 
    addChildrenCallback?: Function; 
    redirectTo?: string; 
    pathMatch?: string; 
    canActivate?: any[]; 
} 

export interface IRouteConfigBuilder { 
    path: string; 
    component?: Type<any>; 
    loadChildren?: any; 
    title?: string; 
    withoutNavigate?: boolean; 
    addChildrenCallback?: Function; 
    redirectTo?: string; 
    pathMatch?: string; 
    canActivate?: any[]; 
} 

export class RouteConfigBuilder { 
    private routeConfigBuilder: IRouteConfigBuilder; 

    public static get(routeConfigBuilder: IRouteConfigBuilder) { 
    return new RouteConfigBuilder(routeConfigBuilder); 
    } 

    constructor(routeConfigBuilder: IRouteConfigBuilder) { 
    this.routeConfigBuilder = routeConfigBuilder; 
    } 

    public build(): IRouteConfig { 
    const routeConfig: IRouteConfig = { 
     path: this.routeConfigBuilder.path, 
     component: this.routeConfigBuilder.component, 
     loadChildren: this.routeConfigBuilder.loadChildren, 
     addChildrenCallback: this.routeConfigBuilder.addChildrenCallback, 
     redirectTo: this.routeConfigBuilder.redirectTo, 
     pathMatch: this.routeConfigBuilder.pathMatch, 
     canActivate: this.routeConfigBuilder.canActivate 
    }; 

    if (this.canBuildData()) { 
     routeConfig.data = { 
     info: { 
      title: this.routeConfigBuilder.title, 
      withoutNavigate: this.routeConfigBuilder.withoutNavigate 
     } 
     }; 
    } 

    return routeConfig; 
    } 

    private canBuildData(): boolean { 
    return (this.routeConfigBuilder.title || this.routeConfigBuilder.withoutNavigate) ? true : false; 
    } 
} 
+0

你可以添加'RouteConfigBuilder'的實現嗎?你如何注入它? –

+0

@MadhuRanjan添加了RouteConfigBuilder的實現。 –

+0

你是否在爲'IRouteConfigBuilder'添加提供者? –

回答

0

不知道你的模塊看起來像你在哪裏註冊提供商RouteConfigBuilderIRouteConfigBuilder

下面是在執行中應工作,

... 
export class SomeModule{ 

.... 

    static forRoot(routeConfig): ModuleWithProviders { 
     return { 
      ngModule: SomeModule, 
      providers: [ 
       { provide: IRouteConfigBuilder, useValue: routeConfig }, 
       RouteConfigBuilder 
      ], 
     }; 
    } 

..... 

} 

希望這可以幫助!