fix(router): eager loading with loadChildren in aot

[DzmitryShylovich]

Closes #11075

Description:
Runtime compiler is not available after aot compilation, so we need to return NgModuleFactory instead of just NgModule, because we cannot compile it at runtime.

import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileModuleNgFactory } from '../compiled/src/app/profile.module.ngfactory';

export function loadProfileModule() {
	return ProfileModuleNgFactory;
}

export const routes: Routes = [
	{ path: '', component: HomeComponent, pathMatch: 'full' },
	{ path: 'profile', loadChildren: loadProfileModule}
];

export const routing = RouterModule.forRoot(routes);

instead of

import { Routes, RouterModule, PreloadAllModules } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProfileModule } from './profile/profile.module';

export function loadProfileModule() {
	return ProfileModule;
}

export const routes: Routes = [
	{ path: '', component: HomeComponent, pathMatch: 'full' },
	{ path: 'profile', loadChildren: loadProfileModule}
];

export const routing = RouterModule.forRoot(routes);

[SamVerschueren]

I'm wondering if replacing these references can't be done by the compiler-cli at build time? This change means you can return a factory which is good, but it still requires the developer to change the code manually at the time you want to build for production. Or am I missing something here? It might not be possible though, but to me it still looks like this feature is unusable with AoT unless you do some manual steps.

[DzmitryShylovich]

@SamVerschueren it's similar to the bootstrap. does compiler rewrites bootstrapModule to bootstrapModuleFactory? nope :)
it should be handled by build tools (webpack aot plugin etc)

[DzmitryShylovich]

@SamVerschueren I don't see why it can't be done automatically. Pls file a new feature request for compiler cli.

[SamVerschueren]

@DzmitryShylovich Thanks, I did #14005. Feel free to chime in :).

[mhevery]

@samherrmann I'm wondering if replacing these references can't be done by the compiler-cli at build time? This change means you can return a factory which is good, but it still requires the developer to change the code manually at the time you want to build for production. Or am I missing something here? It might not be possible though, but to me it still looks like this feature is unusable with AoT unless you do some manual steps.

The reason is that we never change user code. We only generate new code. If we change the user code it would break dependency tracking tools such as build systems, since many of them do not allow to have two copies of a source file or rewriting the source file. So if we did that we would limit the kinds of build tools which could be used.

[SamVerschueren]

@mhevery Alright, I think I understand what you're saying. So if we have a FooModule importing BarModule, it will generate a FooModuleNgFactory which imports BarModuleNgFactory but the reference to BarModule in the code (hence the loadBarModule() function) still exists and isn't touched. Thanks for explaining this!

[DhiaEddineSaidi]

I want to lazy load an external angular module dynamically .... no ngfactory files are generated when building a my lib , and if they exist : is it write to have such files in an angular lib ?

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}