refactor: migration to lazy-loaded routes

Author: autowp

src/app/about/about-routing.module.ts

@@ -1,5 +1,10 @@
 import {Routes} from '@angular/router';
 
-import {AboutComponent} from './about.component';
-
-export const routes: Routes = [{component: AboutComponent, path: '', pathMatch: 'full', title: $localize`About us`}];
+export const routes: Routes = [
+  {
+    loadComponent: () => import('./about.component').then((m) => m.AboutComponent),
+    path: '',
+    pathMatch: 'full',
+    title: $localize`About us`,
+  },
+];

src/app/account/account-routing.module.ts

@@ -1,45 +1,38 @@
 import {Routes} from '@angular/router';
 
 import {authGuard} from '../auth.guard';
-import {AccountAccessComponent} from './access/access.component';
-import {AccountComponent} from './account.component';
-import {AccountAccountsComponent} from './accounts/accounts.component';
-import {AccountContactsComponent} from './contacts/contacts.component';
-import {AccountDeleteComponent} from './delete/delete.component';
-import {AccountDeletedComponent} from './delete/deleted/deleted.component';
-import {AccountEmailComponent} from './email/email.component';
-import {AccountInboxPicturesComponent} from './inbox-pictures/inbox-pictures.component';
-import {AccountMessagesComponent} from './messages/messages.component';
-import {AccountProfileComponent} from './profile/profile.component';
-import {AccountSpecsConflictsComponent} from './specs-conflicts/specs-conflicts.component';
 
 export const routes: Routes = [
   {
     children: [
       {
         canActivate: [authGuard],
-        component: AccountAccessComponent,
+        loadComponent: () => import('./access/access.component').then((m) => m.AccountAccessComponent),
         path: 'access',
         title: $localize`Access Control`,
       },
       {
         canActivate: [authGuard],
-        component: AccountAccountsComponent,
+        loadComponent: () => import('./accounts/accounts.component').then((m) => m.AccountAccountsComponent),
         path: 'accounts',
         title: $localize`My accounts`,
       },
       {
         canActivate: [authGuard],
-        component: AccountContactsComponent,
+        loadComponent: () => import('./contacts/contacts.component').then((m) => m.AccountContactsComponent),
         path: 'contacts',
         title: $localize`Contacts`,
       },
       {
         children: [
-          {component: AccountDeletedComponent, path: 'deleted', title: $localize`Account deleted`},
+          {
+            loadComponent: () => import('./delete/deleted/deleted.component').then((m) => m.AccountDeletedComponent),
+            path: 'deleted',
+            title: $localize`Account deleted`,
+          },
           {
             canActivate: [authGuard],
-            component: AccountDeleteComponent,
+            loadComponent: () => import('./delete/delete.component').then((m) => m.AccountDeleteComponent),
             path: '',
           },
         ],
@@ -48,35 +41,37 @@ export const routes: Routes = [
       },
       {
         canActivate: [authGuard],
-        component: AccountEmailComponent,
+        loadComponent: () => import('./email/email.component').then((m) => m.AccountEmailComponent),
         path: 'email',
         title: $localize`My e-mail`,
       },
       {
         canActivate: [authGuard],
-        component: AccountInboxPicturesComponent,
+        loadComponent: () =>
+          import('./inbox-pictures/inbox-pictures.component').then((m) => m.AccountInboxPicturesComponent),
         path: 'inbox-pictures',
         title: $localize`Unmoderated`,
       },
       {
         canActivate: [authGuard],
-        component: AccountMessagesComponent,
+        loadComponent: () => import('./messages/messages.component').then((m) => m.AccountMessagesComponent),
         path: 'messages',
       },
       {
         canActivate: [authGuard],
-        component: AccountProfileComponent,
+        loadComponent: () => import('./profile/profile.component').then((m) => m.AccountProfileComponent),
         path: 'profile',
         title: $localize`Profile`,
       },
       {
         canActivate: [authGuard],
-        component: AccountSpecsConflictsComponent,
+        loadComponent: () =>
+          import('./specs-conflicts/specs-conflicts.component').then((m) => m.AccountSpecsConflictsComponent),
         path: 'specs-conflicts',
         title: $localize`Conflicts`,
       },
     ],
-    component: AccountComponent,
+    loadComponent: () => import('./account.component').then((m) => m.AccountComponent),
     path: '',
     title: $localize`Account`,
   },

src/app/app-routing.module.ts

@@ -1,8 +1,5 @@
 import {Routes} from '@angular/router';
 
-import {LoginComponent} from './login/login.component';
-import {PageNotFoundComponent} from './not-found.component';
-
 export const appRoutes: Routes = [
   {loadChildren: () => import('./about/about-routing.module').then((m) => m.routes), path: 'about'},
   {
@@ -95,8 +92,8 @@ export const appRoutes: Routes = [
   },
   {loadChildren: () => import('./voting/voting-routing.module').then((m) => m.routes), path: 'voting'},
   {loadChildren: () => import('./index/index-routing.module').then((m) => m.routes), path: ''},
-  {component: PageNotFoundComponent, path: 'error-404'},
-  {component: LoginComponent, path: 'login'},
+  {loadComponent: () => import('./not-found.component').then((m) => m.PageNotFoundComponent), path: 'error-404'},
+  {loadComponent: () => import('./login/login.component').then((m) => m.LoginComponent), path: 'login'},
   {
     loadChildren: () => import('./catalogue/catalogue-routing.module').then((m) => m.routes),
     // matcher: cataloguePathMatcher,

src/app/articles/articles-routing.module.ts

@@ -1,9 +1,14 @@
 import {Routes} from '@angular/router';
 
-import {ArticlesArticleComponent} from './article/article.component';
-import {ListComponent} from './list/list.component';
-
 export const routes: Routes = [
-  {component: ArticlesArticleComponent, path: ':catname'},
-  {component: ListComponent, path: '', pathMatch: 'full', title: $localize`Articles`},
+  {
+    loadComponent: () => import('./article/article.component').then((m) => m.ArticlesArticleComponent),
+    path: ':catname',
+  },
+  {
+    loadComponent: () => import('./list/list.component').then((m) => m.ListComponent),
+    path: '',
+    pathMatch: 'full',
+    title: $localize`Articles`,
+  },
 ];

src/app/brands/brands-routing.module.ts

@@ -1,5 +1,10 @@
 import {Routes} from '@angular/router';
 
-import {BrandsComponent} from './brands.component';
-
-export const routes: Routes = [{component: BrandsComponent, path: '', pathMatch: 'full', title: $localize`All brands`}];
+export const routes: Routes = [
+  {
+    loadComponent: () => import('./brands.component').then((m) => m.BrandsComponent),
+    path: '',
+    pathMatch: 'full',
+    title: $localize`All brands`,
+  },
+];

src/app/cars/cars-routing.module.ts

@@ -1,32 +1,31 @@
 import {Routes} from '@angular/router';
 
-import {CarsAttrsChangeLogComponent} from './attrs-change-log/attrs-change-log.component';
-import {CarsDatelessComponent} from './dateless/dateless.component';
-import {CarsEngineSelectComponent} from './specifications-editor/engine/select/select.component';
-import {CarsSpecificationsEditorComponent} from './specifications-editor/specifications-editor.component';
-import {CarsSpecsAdminComponent} from './specs-admin/specs-admin.component';
-
 export const routes: Routes = [
   {
-    component: CarsAttrsChangeLogComponent,
+    loadComponent: () =>
+      import('./attrs-change-log/attrs-change-log.component').then((m) => m.CarsAttrsChangeLogComponent),
     path: 'attrs-change-log',
     title: $localize`History`,
   },
   {
-    component: CarsDatelessComponent,
+    loadComponent: () => import('./dateless/dateless.component').then((m) => m.CarsDatelessComponent),
     path: 'dateless',
     title: $localize`Dateless`,
   },
   {
-    component: CarsEngineSelectComponent,
+    loadComponent: () =>
+      import('./specifications-editor/engine/select/select.component').then((m) => m.CarsEngineSelectComponent),
     path: 'select-engine',
   },
   {
-    component: CarsSpecificationsEditorComponent,
+    loadComponent: () =>
+      import('./specifications-editor/specifications-editor.component').then(
+        (m) => m.CarsSpecificationsEditorComponent,
+      ),
     path: 'specifications-editor',
   },
   {
-    component: CarsSpecsAdminComponent,
+    loadComponent: () => import('./specs-admin/specs-admin.component').then((m) => m.CarsSpecsAdminComponent),
     path: 'specs-admin',
     title: $localize`Specifications Admin`,
   },