javascript - Angular 8 - Tải module lười biếng: Lỗi TS1323: Import động chỉ được hỗ trợ khi cờ '--module' là 'commonjs' hoặc 'esNext'

Khi tôi cập nhật Angular từ phiên bản 7 lên Angular 8, nhận được lỗi cho các module tải lười

Tôi đã thử các tùy chọn, có trong hướng dẫn nâng cấp Angular

Đã thực hiện các thay đổi sau:

Trước

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

Sau

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

lỗi TS1323: Import động chỉ được hỗ trợ khi cờ '--module' là 'commonjs' hoặc 'esNext'.

Câu trả lời #1

Bạn đang sử dụng import động nên bạn phải thay đổi tsconfig.json của mình như thế này để hướng mã của bạn đến module esnext

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

Cũng đảm bảo kiểm tra tsconfig.app.json không có cấu hình module và target giống như thế này

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

Câu trả lời #2

Chỉ muốn chia sẻ kinh nghiệm của tôi với câu trả lời của @Tony. Sau khi thay đổi tsconfig.json nó vẫn hiển thị lỗi (gạch chân đỏ). Chỉ sau khi mở lại trình soạn thảo (tôi dùng VSCode) tôi mới thấy gạch chân đỏ biến mất.

Câu trả lời #3

Chỉ muốn bổ sung vào câu trả lời của @Tony, bạn cũng có thể cần làm tương tự (thay đổi thành "module": "esnext") trong tsconfig.app.json. Trong trường hợp của tôi, tsconfig.json đã sử dụng esnext làm module nhưng tsconfig.app.json vẫn sử dụng es2015 và điều đó gây ra lỗi này.

Câu trả lời #4

Tôi nghĩ cách đúng để làm việc này là điều chỉnh tsconfig.app.json thay vì tsconfig.json.

tsconfig.app.json

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

tsconfig.app.json là tệp cấu hình Typescript riêng cho app nằm dưới thư mục gốc của workspace Angular. tsconfig.app.json tồn tại để nếu bạn xây dựng một workspace Angular có nhiều ứng dụng bên trong, bạn có thể điều chỉnh cấu hình Typescript riêng cho từng ứng dụng mà không phải viết lại các thuộc tính cấu hình trùng lặp giữa các ứng dụng (do đó có thuộc tính extends).

Về mặt kỹ thuật, bạn không cần tsconfig.app.json chút nào. Nếu bạn xóa nó, bạn sẽ phải đặt "module": "esnext" trong tsconfig.json. Nếu bạn giữ nó ở đó, nó sẽ được ưu tiên hơn tsconfig.json, vì vậy bạn chỉ cần thêm dòng "module":"esnext" trong tsconfig.app.json.