Angular 2 AOT 编译错误 - 创建路由时对象的新实例答案

【问题标题】：Angular 2 AOT Compilation Error - New Instance of object when create routesAngular 2 AOT 编译错误 - 创建路由时对象的新实例
【发布时间】：2017-09-05 23:16:56
【问题描述】：

我已经为我的特定目的实现了一个 RouteConfigBuilder 使用自定义变量清除路由声明。

route-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 build 时返回：

error AOT

我的声明在其他模块中是相同的，但仅在 app-routing.module.ts 和 auth-routing.module.ts 中发生。如果我删除我的 RouteConfigBuilder 实例，它会完美运行。

我尝试了多种方式来修改我实例化 RouteConfigBuilder 的方式，但到目前为止没有任何帮助。

如何在路由中实例化我的对象并且 AOT 不再显示错误？

非常感谢。

*** 添加实现 route-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;
  }
}

【问题讨论】：

你能添加RouteConfigBuilder的实现吗？你是如何注入它的？
@MadhuRanjan 添加了 RouteConfigBuilder 的实现。
您是否正在为IRouteConfigBuilder 添加提供者？

标签： angular angular2-routing angular2-aot

【解决方案1】：

不确定您的模块在您为RouteConfigBuilder 和IRouteConfigBuilder 注册提供程序的位置如何，

下面是应该工作的实现，

...
export class SomeModule{

....

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

.....

}

希望这会有所帮助！

【讨论】：