[compiler-cli] Change references from NgModule to NgModuleFactory at build-time #14005

I'm submitting a ... (check one with "x")

[ ] bug report => search github for a similar issue or PR before submitting
[x] feature request
[ ] support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question

Current behavior
From the discussion #11075 and PR #13909 (comment).

So let me wrap up these discussions. It's possible to encapsulate routes in a feature module like this.

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

The ProfileModule on its turn has child routes as well. This isn't meant for lazy loading, it's just a way of letting the profile module decide how the routing internally is done.

However, currently this feature is not usable with AoT. The reason is pointed out by @DzmitryShylovich and is that after AoT, we should return the module factory instead of the module like this.

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

Currently, this requires manual steps or another build tool to change the references from NgModule to NgModuleFactory.

Expected behavior
I guess this is a perfect fit for the compiler-cli to do instead of a manual process or another gulp/npm task.

Minimal reproduction of the problem with instructions
I created a quick example here.

1. git clone https://github.com/SamVerschueren/ng2-hello-world-routing
2. cd ng2-hello-world-routing
3. git checkout load-children
4. npm install

If you run npm start, you will notice that you can navigate from Home to Contact and back while it uses the approach mentioned in the initial post.

Now if you build it with npm run build, it will output a production bundle in the builds directory. So navigate to that directory and start a local server (http-server, lite-server, ...). Open the url and open devtools. If you click on Contact, it will fail to load and shows an error about r.create not being a function.

What is the motivation / use case for changing the behavior?
If this would be possible, it would make life of developers who are targetting for production with AoT a lot easier and would actually make this feature usuable. Currently it doesn't feel usuable because of the manual steps that has to be performed in order to use it. So either you don't use it when compiling with AoT, or you don't compile with AoT.

Please tell us about your environment:
macOS, VS Code, npm/yarn, http-server

• Angular version: 2.4.3

• Browser: all

• Language: TypeScript

• Node (for AoT issues): node --version = v6.9.1