Dynamic Routing with AOT

[sam-rusty]

I'm working on a app where i need to have a logic in routing to decide which page should be the home page, it works fine with JIT but with AOT. Here is how my code looks like

       let subdomain = environment.production ? window.location.host.replace('www.', '').split('.')[0] : 'sahiwal';
       let districts = {sahiwal:'121', faisalabad:'122'}
        export const routes: Routes = [
            {
                path: '',
                component: MasterComponent,
                children: [
                    {
                        path: districts[subdomain] ? '' : 'home',
                        loadChildren: './home.module#HomeModule',
                        data: {title: 'سجاگ'}
                    }, {
                        path: subdomain === domain ? '' : 'main',
                        loadChildren: './main.page.module#MainPageModule',
                        data: {title: 'سجاگ'}
                    },
                    {
                        path: 'news',
                        loadChildren: './news.module#NewsModule',
                        data: {title: 'خبر سجاگ'}
                    }, {
                        path: subdomain === 'features' ? '' : 'features',
                        loadChildren: './archive.module#ArchiveModule',
                        data: {title: 'خبر سجاگ'}
                    }
            }
        ];

Versions

@angular/cli: 1.0.0
node: 6.9.1
os: darwin x64
@angular/common: 4.0.1
@angular/compiler: 4.0.1
@angular/animations: 4.0.1
@angular/core: 4.0.1
@angular/forms: 4.0.1
@angular/http: 4.0.1
@angular/platform-browser: 4.0.1
@angular/platform-browser-dynamic: 4.0.1
@angular/platform-server: 4.0.1
@angular/router: 4.0.1
@angular/cli: 1.0.0
@angular/compiler-cli: 4.0.1

[deebloo]

For AOT your routes need to be statically analyzable. I'd your need dynamic values in your routes can you use route params instead?

[sam-rusty]

Thanks @deebloo, if you look at my example code i'm getting subdomain from the url and then in routes loading relevant lazy module. somehow i need to do this in routes.
its a funny question but let me ask you, is there not any way to compile only routes with JIT and all other in AOT? I don't think its possible but let me know what you think?

[deebloo]

You can't do that in the routes. It looks like the only concern here is the actual name of the routes? and no it is not possible

[sam-rusty]

Okay thank you so much @deebloo, i'm gonna close this issue.

[hheexx]

I am having the same problem.

I save routes in my format that I need because of route localization.
Then I have a function that translates my format to the array of routes router understands.

Looks it can't work with AOT like that.

Any workaround?

[crizstian]

@iridiumsoft

Does lazy loading working well for you ?

how is your configuration i am having problems with lazy loading

[markoddi]

I cant get my routes working in AOT either. Works fine in JIT with ng serve

[markoddi]

These are my routes that only don't work in AOT:

import { Route} from '@angular/router';
import { HomeComponent } from './home.component';

export const HomeRoutes: Route[] = [
{
path: '',
component: HomeComponent
},
{
path: 'home',
component: HomeComponent
}
];

[yy7054wyq5]

So if use dynamic routes must close AOT...

[lpikora]

This can be solved by providing routes definition to ROUTES using function factory... (tested on Angular 4.1.2)

Modify your AppModule (app.module.ts):

change RouterModul.forRoot in imports array

imports: [
RouterModule.forRoot(routes)
...

to

RouterModule.forRoot([])

add this two providers in providers array:

... ANALYZE_FOR_ENTRY_COMPONENTS
} from '@angular/core';
...  ROUTES,
} from '@angular/router';
...
providers: [
{provide: ANALYZE_FOR_ENTRY_COMPONENTS, multi: true, useValue: routes},
{provide: ROUTES, multi: true, useFactory: getRoutes},
...

define factory function (at top of the app.module.ts file):

export function getRoutes() {
  return routes;
}

maybe you need also create new file eg: app.routes.ts and put your routes definitions there

export const routes: Routes = [
            {
                path: '',
...

and import it in AppModule (app.module.ts).

import { routes } from './app.routes';

[DanielKucal]

Similar problem here... I have dynamic yet synchronous routes that have to be possible to turn off in config file. I couldn't filter them right in definition due to "function calls are not supported" error and I finally did it in my module constructor by operating on router.config... The routes are added properly and work in JiT and I think they was also working in AoT last time, but now they do not. Any workaround or better solution to make it work in AoT compilation?

Edit: My problem was caused by code minification, not strictly by AoT compiler. I compared component names to find specific route and it found other one with the same name in AoT. After fixing that, my dynamically filtered routes work as expected.

[raujonas]

@DanielKucal What do you mean by you found another route with the same name in AoT? Can you please explain this to me? I have the same problem, dynamic routes from file are throwing an exception .. Thank you for you help!

[DanielKucal]

@raujonas, if I remember that correctly I was comparing class names (which are being replaced during minification). The solution was to add a static field to classes and compare it while matching the routes instead.

[liujingbreak]

Bad news in 2018, {provide: ROUTES, multi: true, useFactory: getRoutes} does not work today.

fix(compiler-cli): ngtools should accept useFactory (lazy routes)