Angular 2 AOT Compilation Error - New Instance of object when create routes

Question

I've implemented a RouteConfigBuilder for my specific purpose clear the routes declarations with custom variables.

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

}

And in my routing-module declarations:

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

When I run ng build is returning:

error AOT

My declarations is the same in other modules but only in app-routing.module.ts and auth-routing.module.ts it's happen. If I remove my instance of RouteConfigBuilder it's working perfectly.

I tried in many ways to modify how I instantiate my RouteConfigBuilder and until now nothing helps me.

How do I do to instantiate my object in routes and AOT not show errors again?

Thanks a lot.

*** Adding implementation 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;
  }
}

Can you add implementation of `RouteConfigBuilder` and how are you injecting it? — Madhu Ranjan, Apr 13 '17 at 16:58
@MadhuRanjan Added the implementation of RouteConfigBuilder. — Eron Alves, Apr 17 '17 at 18:42

score 0 · Answer 1 · answered Apr 17 '17 at 19:20

Not sure how your Module looks like where you are registering providers for RouteConfigBuilder and IRouteConfigBuilder,

Below is the implementation which should work,

...
export class SomeModule{

....

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

.....

}

Hope this helps!!

Angular 2 AOT Compilation Error - New Instance of object when create routes

1 Answers1