I have a main module with submodules, originally I wanted to make that modules eager loaded, so what I did:
1st Attempt - Eager loading
import {DashboardModule} from './module/dashboard/dashboard.module';
export const _dashboardModule = () => DashboardModule;
export const routes: Routes = [
{
path: '',
children: [
{
path: 'dashboard',
loadChildren: _dashboardModule
}
]
}
];
It worked just fine for me until I start building prod build with aot compilation. In that moment I get into issue which is mentioned here: https://github.com/angular/angular-cli/issues/4192
2nd Attempt - Lazy loading
Based on ticket I linked above I start using string paths for modules e.g.
loadChildren: './path/to/module/dashboard.module#DashboardModule'
which generate separate bundle for each module. For build I used angular-cli command
ng build --output-path=../my/ouput/path --prod --aot --output-hashing none --vendor-chunk
Because my application is part of huge existing application I can't use generated index.html but I use .ftl file where I specify from where all scripts should be loaded like this:
<body>
<my-app></my-app>
<script src="<@versionedUri src="${base}/path/to/file/runtime.js"/>"></script>
<script src="<@versionedUri src="${base}/path/to/file/polyfills.js"/>"></script>
<script src="<@versionedUri src="${base}/path/to/file/styles.js"/>"></script>
<script src="<@versionedUri src="${base}/path/to/file/vendor.js"/>"></script>
<script src="<@versionedUri src="${base}/path/to/file/main.js"/>"></script>
</body>
And that's an issue if you try to lazy load because output files of my build is in different folder then my .ftl file which I use instead of index.html problem is that when you open application in browser it try to load chunks from same folder where .ftl is located and they doesn't exist there.
What my questions are:
- Is there a way to specify path for chunks files?
- Or is there some other way to eager load module without importing child routes and use them like:
children: dashboardRoutes