Question

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

路由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 { }

当我运行时，构建正在返回：

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;
  }
}

Answer 1

不确定您的模块在RouteConfigBuilder和IRouteConfigBuilder，

注册提供商的位置

以下是应该有效的实施，

...
export class SomeModule{

....

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

.....

}

希望这有帮助!!

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

1 个答案: