Is there a way to determine the string for loadChildren dynamically?

[alexanderbaran]

I appreciate the work you have done on angular-router-loader. I have a problem and I would like to ask of you advice on how to solve it.

There is a situation where I have strings like: '../profile/profile.module#ProfileModule?sync=true' for the loadChildren in my app, but in order for the AOT to work, I have to replace ../ with ./. So I would either determine the sting for loadChildren dynamically which I can't right now because I get error: http://stackoverflow.com/questions/43658470/why-cant-i-dynamically-determine-the-string-for-loadchildren-in-angular?noredirect=1#comment74364609_43658470

Or have to restructure my project in a way that would break "structure logic". Right now I have a structure like this:

project-folder/src/app/app.module.ts
project-folder/src/app/app.routing-module.ts
project-folder/src/app/main/main.module.ts
project-folder/src/app/main/main.routing-module.ts
project-folder/src/app/profile/profile.module.ts
project-folder/src/app/settings/settings.module.ts

My main-routing.module.ts looks like this:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { MainComponent } from './main.component';

const mainRoutes: Routes = [
    {
        path: '',
        component: MainComponent,
        children: [
            // Need to change ../ to ./ for AOT to work.
            { path: 'profile', loadChildren: '../profile/profile.module#ProfileModule?sync=true'},
            { path: 'settings', loadChildren: '../settings/settings.module#SettingsModule?sync=true'},
            { path: 'messages', loadChildren: '../messages/messages.module#MessagesModule?sync=true'},
            { path: '', loadChildren: '../home/home.module#HomeModule?sync=true'}
        ]
    },
    { path: '**', redirectTo: '/' }
];

@NgModule({
    imports: [
        RouterModule.forChild(mainRoutes)
    ],
    exports: [
        RouterModule
    ]
})
export class MainRoutingModule { }

As you can see I have relative path here where I go back a folder. This is how I how to do in dev mode and production mode. But in AOT mode I have to replace the ../ with ./. And I am not able to dynamically set the string right now so I have to manually change this before I do AOT. Do you have a suggestion of what I can do? Do I have to move the main.module.ts into the same folder as app.module.ts in order for the paths to align?

By the way I am using angular2-router-loader, not angular-router-loader

[Brandon Roberts]

@alexanderbaran you need to switch to angular-router-loader. It has better support for determining the relative path when using JIT or AOT.

[alexanderbaran]

I have switched to the newer angular-router-loader now but I can't make it work. Is there a way you could help me to make it work? I would gladly give you compensatation for your time.

[alexanderbaran]

If you are interested in helping me please add me on skype: alexelias84. I would be very grateful

[alexanderbaran]

This is the error I get:

ERROR in ./aot/src/app/app.module.ngfactory.ts
Module not found: Error: Can't resolve '..\profile\profile.module.ngfactory' in 'D:\Temp\project-web\aot\src\app'
 @ ./aot/src/app/app.module.ngfactory.ts 370:71-119
 @ ./src/app/main.aot.ts

ERROR in ./aot/src/app/app.module.ngfactory.ts
Module not found: Error: Can't resolve '..\settings\settings.module.ngfactory' in 'D:\Temp\project-web\aot\src\app'
 @ ./aot/src/app/app.module.ngfactory.ts 374:71-121
 @ ./src/app/main.aot.ts

ERROR in ./aot/src/app/app.module.ngfactory.ts
Module not found: Error: Can't resolve '..\messages\messages.module.ngfactory' in 'D:\Temp\project-web\aot\src\app'
 @ ./aot/src/app/app.module.ngfactory.ts 378:71-121
 @ ./src/app/main.aot.ts

ERROR in ./aot/src/app/app.module.ngfactory.ts
Module not found: Error: Can't resolve '..\home\home.module.ngfactory' in 'D:\Temp\project-web\aot\src\app'
 @ ./aot/src/app/app.module.ngfactory.ts 382:71-113
 @ ./src/app/main.aot.ts

It only works if I change the ../ to ./ so angular-router-loader does not handle relative paths like this very well. I can't have ./ because then the development breaks. Development needs ../ because that is the correct path if you look at my project structure.

[alexanderbaran]

I solved the issue. I had to use loadChildren on main.module too and not directly import it on app.module.ts. Everything works now.

[Brandon Roberts]

Glad you got it figured out