Angular 8 - Leniwe ładowanie modułów: Błąd TS1323: Import dynamiczny jest obsługiwany tylko wtedy, gdy flaga „--module” to „commonjs” lub „esNext”

Kiedy zaktualizowałem Angular z 7 do Angular 8, otrzymałem błąd z powodu leniwego ładowania modułów

Wypróbowałem opcje, które są dostępne w przewodniku aktualizacji kątowej

Wprowadzono poniższe zmiany:

Przed

    loadChildren: '../feature/path/sample- 
                         tage.module#SameTagModule'

Po

   loadChildren: () => import('../feature/path/sample- 
                      tags.module').then(m => m.CreateLinksModule)

błąd TS1323: Import dynamiczny jest obsługiwany tylko wtedy, gdy flaga „--module” ma wartość „commonjs” lub „esNext”.

Używasz dynamicznego importu, więc musisz zmienić plik tsconfig.json w ten sposób, aby skierować kod do esnextmodułu

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "module": "esnext", // add this line
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "importHelpers": true,
    "target": "es2015",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2018",
      "dom"
    ]
  }
}

Upewnij się również, że sprawdziłeś tsconfig.app.json nie masz modułu i konfiguracji docelowej, coś takiego

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}

Po prostu dodając do anwser @ Tony'ego, może być konieczne zrobienie tego samego (zmiana na "module": "esnext") w tsconfig.app.json. W moim przypadku tsconfig.json używał już esnext jako modułu, ale tsconfig.app.json nadal używał es2015 i to spowodowało ten błąd.

Chcę tylko dodać moje doświadczenie do odpowiedzi @ Tony'ego. Po zmianie tsconfig.jsonnadal pokazywał błąd (czerwone podkreślenie). Dopiero po ponownym otwarciu edytora (użyłem VSCode) zauważyłem, że czerwone podkreślenie zniknęło.

Myślę, że właściwym sposobem na to jest tsconfig.app.jsonraczej dostosowanie niż tsconfig.json.

tsconfig.app.json

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "baseUrl": "./",
    "module": "esnext",
    "types": []
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

tsconfig.app.jsonto plik konfiguracyjny Typescript specyficzny dla aplikacji, który znajduje się poniżej katalogu głównego obszaru roboczego Angular . tsconfig.app.jsonIstnieje więc, że jeśli budujemy kątowym roboczy zawierający wiele aplikacji w nim, można dostosować konfigurację maszynopis oddzielnie dla każdej aplikacji bez konieczności pisania zbędnych właściwości konfiguracyjne, które pokrywają się między aplikacjami (stąd extendswłasności).

Technicznie wcale nie potrzebujesz tsconfig.app.json. Jeśli go usuniesz, będziesz musiał umieścić "module": "esnext"w tsconfig.json. Jeśli go tam zatrzymasz, będzie miał pierwszeństwo przed tsconfig.json, więc musisz tylko dodać "module":"esnext"linię tsconfig.app.json.

rozwiązuję ten błąd, wykonując następujące kroki krok 1: „moduł”: „es2015” do „moduł”: „AMD” w tsconfig.json

krok 2: utwórz nowy plik tsconfig.app.json w katalogu głównym aplikacji, skopiuj kod Tony Ngo i wklej do niego, wtedy ten problem zostanie rozwiązany.