Angular 8 - Mô-đun tải chậm: Lỗi TS1323: Nhập động chỉ được hỗ trợ khi cờ '--module' là 'commonjs' hoặc 'esNext'

Khi tôi cập nhật Angular từ 7 lên Angular 8, gặp lỗi mô-đun tải chậm

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

Thực hiện các thay đổi dưới đây:

Trước

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

Sau

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

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

Bạn đang sử dụng nhập động, vì vậy bạn phải thay đổi tsconfig.json của mình như thế này để nhắm mục tiêu mã của bạn đến esnextmô-đun

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

Ngoài ra, hãy nhớ kiểm tra tsconfig.app.json không có mô-đun và cấu hình mục tiêu như thế này

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

Chỉ cần thêm vào anwser của @ Tony, bạn cũng có thể cần thực hiện 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 mô-đun nhưng tsconfig.app.json vẫn đang sử dụng es2015 và điều đó gây ra lỗi này.

Chỉ muốn thêm kinh nghiệm của tôi vào câu trả lời của @ Tony. Sau khi thay đổi tsconfig.jsonnó vẫn báo lỗi (gạch chân màu đỏ). Chỉ sau khi mở lại trình chỉnh sửa (tôi đã sử dụng VSCode), tôi mới thấy gạch chân màu đỏ biến mất.

Tôi nghĩ cách thích hợp để làm điều này là điều chỉnh tsconfig.app.jsonhơn là điều chỉnh tsconfig.json.

tsconfig.app.json

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

tsconfig.app.jsonlà tệp cấu hình Typecript cụ thể cho ứng dụng nằm bên dưới gốc của không gian làm việc Angular . Các tsconfig.app.jsontồn tại do đó nếu bạn đang xây dựng một không gian làm việc kiễu góc có nhiều ứng dụng trong nó, bạn có thể điều chỉnh cấu hình nguyên cảo riêng cho từng ứng dụng mà không cần phải viết thuộc tính cấu hình dự phòng mà chồng chéo giữa các ứng dụng (do đó extendstài sản).

Về mặt kỹ thuật, bạn không cần tsconfig.app.jsonchú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 "module":"esnext"dòng vào tsconfig.app.json.

tôi giải quyết lỗi này bằng cách thực hiện các bước sau bước 1: "module": "es2015" thành "module": "AMD" trong tsconfig.json

Bước 2: Tạo một tệp mới tsconfig.app.json trong thư mục gốc của ứng dụng, sao chép mã của Tony Ngô và dán vào, sau đó vấn đề này sẽ được giải quyết.