Angular 8 - Geç yükleme modülleri: Hata TS1323: Dinamik içe aktarma yalnızca '--module' bayrağı 'commonjs' veya 'esNext' olduğunda desteklenir

Angular'ı 7'den Angular 8'e güncellediğimde, tembel yükleme modülleri için hata alıyorum

Açısal yükseltme kılavuzunda bulunan seçenekleri denedim

Aşağıdaki değişiklikleri yaptı:

Önce

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

Sonra

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

hata TS1323: Dinamik içe aktarma yalnızca '--module' bayrağı 'commonjs' veya 'esNext' olduğunda desteklenir.

Dinamik içe aktarmayı kullanıyorsunuz, bu nedenle kodunuzu esnextmodüle hedeflemek için tsconfig.json dosyanızı bu şekilde değiştirmeniz gerekiyor

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

Ayrıca tsconfig.app.json'un modül içermediğinden ve bunun gibi bir şeyi hedef yapılandırmadığından emin olun.

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

@ Tony'nin yanıtlayıcısına ekleyerek, tsconfig.app.json içinde de aynısını yapmanız gerekebilir ("module": "esnext" olarak değiştirin). Benim durumumda, tsconfig.json modül olarak esnext kullanıyordu ancak tsconfig.app.json hala es2015 kullanıyordu ve bu da bu hataya neden oldu.

@ Tony'nin cevabına deneyimlerimi eklemek istiyorum. Değiştirdikten sonra tsconfig.jsonhala bir hata gösteriyor (kırmızı alt çizgi). Sadece editörü yeniden açtıktan sonra (VSCode kullandım) kırmızı alt çizginin kaybolduğunu gördüm.

Bence bunu yapmanın doğru yolu, ayarlamaktan tsconfig.app.jsonçok ayarlamaktır tsconfig.json.

tsconfig.app.json

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

tsconfig.app.jsonAngular çalışma alanının kökünün altında bulunan uygulamaya özel Typescript yapılandırma dosyasıdır . Eğer olan bir açısal çalışma alanı oluşturmak ise, böylece var olan birden çok içinde uygulama, uygulamalarla (dolayısıyla arasında üst üste gereksiz yapılandırma özellikleri yazmak zorunda kalmadan her uygulama için ayrı olarak typescript yapılandırmasını ayarlayabilir özelliği).tsconfig.app.jsonextends

Teknik olarak hiç ihtiyacınız yok tsconfig.app.json. Bunu silerseniz, yerleştirmek zorunda kalacak "module": "esnext"in tsconfig.json. Orada tutarsanız, öncelik kazanır tsconfig.json, bu nedenle yalnızca "module":"esnext"satırı eklemeniz gerekir tsconfig.app.json.

tsconfig.json içindeki 1. adımı uygulayarak bu hatayı çözüyorum: "module": "es2015" to "module": "AMD"

2. adım: uygulama kök dizininde yeni bir tsconfig.app.json dosyası oluşturun, Tony Ngo'nun kodunu kopyalayın ve içine yapıştırın, ardından bu sorun çözülecektir.