Angular 8 - โมดูลการโหลดแบบขี้เกียจ: ข้อผิดพลาด TS1323: การนำเข้าแบบไดนามิกได้รับการสนับสนุนก็ต่อเมื่อแฟล็ก '--module' เป็น 'commonjs' หรือ 'esNext'

เมื่อฉันอัปเดต Angular จาก 7 เป็น Angular 8 ได้รับข้อผิดพลาดจากการโหลดโมดูลที่ขี้เกียจ

ฉันได้ลองใช้ตัวเลือกต่างๆซึ่งมีอยู่ในคู่มือการอัพเกรดเชิงมุม

ทำการเปลี่ยนแปลงด้านล่าง:

ก่อน

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

หลังจาก

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

ข้อผิดพลาด TS1323: การนำเข้าแบบไดนามิกได้รับการสนับสนุนเมื่อแฟล็ก '--module' เป็น 'commonjs' หรือ 'esNext' เท่านั้น

คุณกำลังใช้การนำเข้าแบบไดนามิกดังนั้นคุณต้องเปลี่ยน tsconfig.json ของคุณเช่นนี้เพื่อกำหนดเป้าหมายโค้ดของคุณไปยัง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"
    ]
  }
}

ตรวจสอบให้แน่ใจว่าได้ตรวจสอบ tsconfig.app.json ว่าไม่มีโมดูลและกำหนดค่าเป้าหมายอะไรเช่นนี้

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

เพียงเพิ่มใน anwser ของ @ Tony คุณอาจต้องทำเช่นเดียวกัน (เปลี่ยนเป็น "module": "esnext") ใน tsconfig.app.json ในกรณีของฉัน tsconfig.json ใช้ esnext เป็นโมดูลอยู่แล้ว แต่ tsconfig.app.json ยังคงใช้ es2015 และนั่นทำให้เกิดข้อผิดพลาดนี้

เพียงแค่ต้องการเพิ่มประสบการณ์ของฉันในคำตอบของ @ โทนี่ หลังจากเปลี่ยนtsconfig.jsonแล้วยังแสดงข้อผิดพลาด (ขีดเส้นใต้สีแดง) หลังจากเปิดตัวแก้ไขอีกครั้ง (ฉันใช้ VSCode) ฉันเห็นว่าขีดเส้นใต้สีแดงหายไป

ผมคิดว่าวิธีที่เหมาะสมในการทำเช่นนี้คือการปรับมากกว่าtsconfig.app.jsontsconfig.json

tsconfig.app.json

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

tsconfig.app.jsonเป็น typescript แฟ้มการกำหนดค่าเฉพาะกับแอปที่ตั้งอยู่ใต้รากของเชิงมุมพื้นที่ทำงาน tsconfig.app.jsonมีอยู่เพื่อที่ว่าถ้าคุณจะสร้างพื้นที่ทำงานเชิงมุมที่มีหลายปพลิเคชันในนั้นคุณสามารถปรับการตั้งค่า typescript แยกต่างหากสำหรับแต่ละแอปโดยไม่ต้องเขียนคุณสมบัติการกำหนดค่าซ้ำซ้อนที่ทับซ้อนระหว่างปพลิเคชัน (เพราะฉะนั้นextendsทรัพย์สิน)

ในทางเทคนิคคุณไม่จำเป็นต้องใช้tsconfig.app.jsonเลย ถ้าคุณลบมันคุณจะต้องวางใน"module": "esnext" tsconfig.jsonหากคุณเก็บไว้ที่นั่นจะมีความสำคัญเหนือกว่าtsconfig.jsonดังนั้นคุณต้องเพิ่ม"module":"esnext"บรรทัดเข้าไปtsconfig.app.jsonเท่านั้น

ฉันแก้ไขข้อผิดพลาดนี้โดยทำตามขั้นตอนที่ 1: "module": "es2015" ถึง "module": "AMD" ใน tsconfig.json

ขั้นตอนที่ 2: สร้างไฟล์ใหม่ tsconfig.app.json ในไดเรกทอรีรากของแอปคัดลอกรหัสของ Tony Ngo แล้ววางลงจากนั้นปัญหานี้จะได้รับการแก้ไข

เวอร์ชันเชิงมุมของฉันคือ 8.2 และฉันแก้ไขโดยเพียงแค่เปลี่ยน "module": "es2015" เป็น "module": "es2020"

ฉันแก้ไขปัญหานี้ได้โดยการเพิ่ม "include": ["src / ** / *. ts"] ในไฟล์ tsconfig.app.json ของฉันเท่านั้น