Angular 8 - Modul pemuatan malas: Kesalahan TS1323: Impor dinamis hanya didukung jika bendera '--module' adalah 'commonjs' atau 'esNext'

107

Ketika saya memperbarui Angular dari 7 ke Angular 8, mendapatkan kesalahan untuk modul pemuatan lambat

Saya telah mencoba opsi, yang ada di panduan peningkatan bersudut

Membuat perubahan di bawah ini:

Sebelum

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

Setelah

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

error TS1323: Impor dinamis hanya didukung jika flag '--module' adalah 'commonjs' atau 'esNext'.

javascript angular typescript module angular8 RajuPedda
sumber

Jawaban:

206

Anda menggunakan impor dinamis sehingga Anda harus mengubah tsconfig.json Anda seperti ini untuk menargetkan kode Anda ke esnextmodul

{
  "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"
    ]
  }
}

Juga pastikan untuk memeriksa tsconfig.app.json tidak memiliki modul dan konfigurasi target seperti ini

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}
Tony Ngo
sumber
4
ng newtidak menggunakan ini secara default. Apakah ada alasan?
Helzgate
2
Tampaknya berfungsi di Edge, Chrome, Firefox, dan IE11 ketika saya menghapus komentar pada bagian IE11 di polyfills jadi saya senang.
Helzgate
12
Saya harus menghapus "module": "es2015"baris dari tsconfig.app.jsonfile saya
ranbuch
5
@ anbuch, saya memiliki masalah yang sama tetapi tidak menghapus baris, saya hanya mengubahnya "module": "esnext"juga.
Alfa Bravo
masih menghadapi masalah yang sama setelah memperbarui file tsconfig.json
Gaurav Aggarwal
25

Hanya menambahkan jawaban @ Tony, Anda mungkin juga perlu melakukan hal yang sama (ubah ke "module": "esnext") di tsconfig.app.json. Dalam kasus saya, tsconfig.json sudah menggunakan esnext sebagai modul tetapi tsconfig.app.json masih menggunakan es2015 dan itu menyebabkan kesalahan ini.

Niz
sumber
3
Kita dapat menghindari penambahan "modul": "esnext" di kedua file, kita dapat meletakkannya di tsconfig.json tetapi tidak di tsconfig.app.json, karena ini sudah memperluas tsconfig.json.
RajuPedda
16

Hanya ingin menambahkan pengalaman saya ke jawaban @ Tony. Setelah diubah tsconfig.jsonmasih menunjukkan kesalahan (garis bawah merah). Hanya setelah membuka kembali editor (saya menggunakan VSCode), saya melihat garis bawah merah menghilang.

Tai JinYuan
sumber
Saya tidak memiliki file tsconfig.app.json. Haruskah saya membuatnya?
Tandai
Ya, harap lihat ini. stackoverflow.com/questions/36916989/…
Tai JinYuan
Sangat membantu. Terima kasih :)
Praveen Kumar Palai
1
Di IDEA Intelij saya memiliki masalah yang sama. Anda perlu membuka kembali proyek tersebut.
NieMaszNic
Ya. Anda menyelamatkan hari saya.
Shailesh Pratapwar
12

Saya pikir cara yang tepat untuk melakukan ini adalah dengan menyesuaikan tsconfig.app.jsondaripadatsconfig.json .

tsconfig.app.json

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

tsconfig.app.jsonadalah file konfigurasi Ketikan khusus untuk aplikasi yang berada di bawah root ruang kerja Angular . The tsconfig.app.jsonada sehingga jika Anda sedang membangun sebuah ruang kerja sudut yang memiliki beberapa aplikasi di dalamnya, Anda dapat mengatur konfigurasi Naskah yang diketik secara terpisah untuk setiap aplikasi tanpa harus menulis properti konfigurasi berlebihan yang tumpang tindih antara aplikasi (maka extendsproperti).

Secara teknis, Anda tidak perlu tsconfig.app.jsonsama sekali. Jika Anda menghapusnya, Anda harus menempatkan "module": "esnext"di tsconfig.json. Jika Anda menyimpannya di sana, ini akan didahulukan tsconfig.json, jadi Anda hanya perlu menambahkan "module":"esnext"baris tsconfig.app.json.

Zach Gollwitzer
sumber
Ya, saya harus menambahkan modul: 'esnext' di tsconfig.json dan tsconfig.app.json
RDV
0

saya mengatasi kesalahan ini dengan melakukan langkah-langkah berikut langkah 1: "modul": "es2015" ke "modul": "AMD" di tsconfig.json

langkah 2: buat file baru tsconfig.app.json di direktori root aplikasi, salin kode Tony Ngo dan tempel ke, maka masalah ini akan teratasi.

Rashid Bukhari
sumber