Angular - (lazy-loading) dynamicznie doładowywane moduły

Stronę tą wyświetlono już: 1346 razy

W Angularze możliwe jest tworzenie modułów dynamicznie doładowywanych. Takie rozwiązanie jest dobre, gdy np. dany użytkownik ma dostęp tylko do jednego modułu (z podmodułami włącznie) zaś do innych nigdy nie będzie mógł zajrzeć. Wtedy to pobieranie modułów, które i tak nie będą wykorzystywane mija się z celem. W Angulrze 9 można wykorzystać jedynie najnowszy sposób dynamicznego doładowania modułów, którego przykład wygląda następująco:

Listing 1
  1. const routes: Routes = [
  2. {
  3. path: 'customers',
  4. loadChildren: () => import('./customers/customers.module').then(mod => mod.CustomersModule) // dynamiczne ładowanie modułu
  5. },

Starszy sposób już nie obsługiwany przez Angulara 9:

Listing 2
  1. const routes: Routes = [
  2. {
  3. path: 'customers',
  4. loadChildren: () => import('./lazy/lazy.module').then(m => m.LazyModule) // dynamiczne ładowanie modułu w starym stylu
  5. },

Jeżeli migrujesz z starszej wersji Angulara, to do wykorzystania nowego sposobu dynamicznego ładowania musisz być pewny, że konfiguracja pliku tsconfig.json pola module jest ustawiona na wartość esnext:

Listing 3
  1. {
  2. "compileOnSave": false,
  3. "compilerOptions": {
  4. "baseUrl": "./",
  5. "outDir": "./dist/out-tsc",
  6. "sourceMap": true,
  7. "declaration": false,
  8. "module": "esnext", // ta wartość powinna być ustawiona na esnext
  9. "moduleResolution": "node",
  10. "emitDecoratorMetadata": true,
  11. "experimentalDecorators": true,
  12. "importHelpers": true,
  13. "target": "es2015",
  14. "typeRoots": [
  15. "node_modules/@types"
  16. ],
  17. "lib": [
  18. "es2018",
  19. "dom"
  20. ]
  21. }
  22. }

Jest to spowodowane tym, że do działania nowszego sposobu dynamicznego doładowywania modułu potrzebna jest obsługa nowszego standardu ES. Po zmianie tego pola konieczne będzie przeinstalowanie projektu:

npm i

W przypadku dynamicznego doładowywania nie należy importować takich modułów w innych modułach. Import odbywa się bowiem w pliku routingu. Sam dynamicznie doładowywany moduł może wyglądać np. tak:

Listing 4
  1. const routes: Routes = [
  2. {
  3. path: '',
  4. component: CustomerListComponent,
  5. children: [
  6. {
  7. path: 'View-1',
  8. component: View1
  9. },
  10. {
  11. path: 'View-2',
  12. component: View2
  13. },
  14. {
  15. path: '**',
  16. redirectTo: 'View-1'
  17. }
  18. ]
  19. }
  20. ];
Propozycje książek

Komentarze