Angular4 - Router module provider AOT

Question

This is my declaration of the router provider:

@NgModule({
    imports: [RouterModule.forRoot(RoutesFactory.buildRoutes())],
    exports: [RouterModule]
})
export class RouterModuleProvider { };

Compiling in AOT, I get this error:

Error encountered resolving symbol values statically. Calling function 'getRoutes', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol RouterModuleProvider

Here is the content of RoutesFactory.buildRoutes

static buildRoutes() {
    let returnRoutes: Routes = [
        { path: '', redirectTo: '/login', pathMatch: 'full' },
        { path: 'login', component: ViewsModule.LoginViewComponent }
    ];

    let appendRoutes = (items: MenuItem[], routes: Routes) => {
        for (let item of items) {
            let route: Route = {
                path: item.Path, component: item.Component, children: []
            };

            if (item.Children != null)
                appendRoutes(item.Children, route.children)

            routes.push(route);
        }
    };

    appendRoutes(RoutesFactory.getMenus(), returnRoutes);

    return returnRoutes;

}

RoutesFactory.getMenus() returns a static internal array of objects. (nothing loaded from backend)

Is there any way to solve this problem?

Answer 1

Unfortunately, as the error suggests, everything that is part of the metadata (inside @NgModule(...) declaration) has to be statically resolvable. This means that there cannot be any logic like you have in your buildRoutes function, only static declarations.

However, there seems to be an alternative specifically for defining routes dynamically. Please see this answer: Dynamic routing based on external data.