Menu
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:
children: dashboardRoutes
425
Create a feature module with routinglink Because the new module is meant to be lazy-loaded, the command does not add a reference to it in the application's root module file, app.module.ts . Instead, it adds the declared route, customers to the routes array declared in the module provided as the --module option.
define where we want to load our component in the template with the ng-template tag, define its view query through ViewChild decorator, which gives us access to the DOM and defines the container to which the component will be added, finally, dynamic import the component and add it to the container.
The compiled source of the lazy-loaded module is written to a separate file, called a chunk. This essentially splits the codebase (or the JavaScript bundles) into separate chunks by their respective loadChildren router configuration. A lazy loaded module is included in a chunk.
Lazy loading is an approach to limit the modules that are loaded to the ones that the user currently needs. This can improve your application's performance and reduce the initial bundle size. By default, Angular uses eager loading to load modules.
The path where lazy-loaded chunks (and all other .js scripts) are generated is designated in the angular.json file, @ (projects: <projectName>: architect: options:) outputPath: <your-output-path> ...
I'm having trouble myself, getting the Angular app to look for the chunk at this location, it seems to be looking for it at the root (baseUrl).
I'm in a similar situation as OP, embedded the Angular app in a .NET MVC5 application, so rather than using the Angular-generated index.html, the file "serving" the app is the MVC Home/Index view. My Index.cshtml file looks very similar to OP's .ftl file... my quandary is how to tell the Angular app to look for the chunk at the outputPath location?
168
I have a similar situation, and what helped was adding deploy url to my angular.json. The comment by Hermant Jain helped. I am just adding this answer to specify where to add this setting in angular.json.
Follow this path in angular.json:
Projects -> Your Project -> Architect -> Build -> Options-> deployUrl
The other way around without specifying this is to pass this as a parameter as follows:
ng build --watch --deploy-url /dist/
This way, my chunks are loading from myWeb/dist/
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
