The goal of this repository is to help tou improve the navigation enxperience of your Angular aplications 💥
Here are five techniques you can use to improve your application's performance:
By using Angular Router, modules will be loaded only when they are needed.
- Create modules for your routes and include a loadChildren method in them:
{ path: 'about', title: 'About', loadChildren: () => import('./about/about.module').then(m => m.AboutModule) },While the user navigates the application, all modules are loaded in the background.
- In your routing module, you need to add PreloadAllModules:
@NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })], exports: [RouterModule] })Implement the Angular PreloadingStrategy to create your own load strategy.
- In your routing module, you must add the PreloadingStrategyService:
@NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: PreloadingStrategyService })], exports: [RouterModule] })- Manage your routes with a service:
export class PreloadingStrategyService implements PreloadingStrategy { private preloadedModules: string[] = []; preload(route: Route, load: () => Observable<any>): Observable<unknown> { if (route.data && route.data['preload'] && route.path) { this.preloadedModules.push(route.path); return load(); } else { return of(null); } } }- Finally, add the preload flag to your routes:
{ path: 'about', title: 'About', loadChildren: () => import('./about/about.module').then(m => m.AboutModule), data: { preload : true } },Use the Quicklink library to prefetch modules on demand based on the elements visible in the user's viewport.
npm i ngx-quicklink- Add the QuicklinkStrategy in your routing-module:
@NgModule({ imports: [RouterModule.forRoot(routes, { preloadingStrategy: QuicklinkStrategy })], exports: [RouterModule] })Use GuessJS, a library that uses machine learning to predict which module is most likely to be loaded based on Google Analytics history.
npm i -D @angular-builders/custom-webpack npm i -D @angular-devkit/build-angular npm i -D guess-webpack npm i -D guess-parser- You should create a file with your GA key:
const { GuessPlugin } = require('guess-webpack'); const { parseRoutes } = require('guess-parser'); module.exports = { plugins: [ new GuessPlugin({ GA: 'XXXXXXXXX', runtime: { delegate: false }, routeProvider() { return parseRoutes('.'); } }), ] };- In your package.json you need to put the custom builder:
"builder": "@angular-builders/custom-webpack:browser", "options": { "customWebpackConfig": { "path": "./extend.webpack.config.js" }, },