Angular 8 - 느린 모듈 로딩: 오류 TS1323: '--module' 플래그가 'commonjs' 또는 'esNext'인 경우에만 동적 가져오기가 지원됩니다.

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: 동적 Import는 '--module' 플래그가 'commonjs' 또는 'esNext'인 경우에만 지원됩니다.

동적 Import를 사용 중이므로 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"
  ]
}

@Tony의 답변에 제 경험을 더하고 싶습니다.변경 후tsconfig.json여전히 오류(빨간색 밑줄)가 표시되었습니다.편집기를 다시 연 후에야(VShode 사용) 빨간색 밑줄이 사라졌습니다.

@Tony의 anwser에 추가하는 것만으로 tsconfig.app.json에서도 같은 작업을 수행해야 할 수 있습니다('module: esnext'로 변경).제 경우 tsconfig.json은 이미 esnext를 모듈로 사용하고 있었지만 tsconfig.app.json은 여전히 es2015를 사용하고 있기 때문에 이 오류가 발생했습니다.

이렇게 하는 것이 가장 적절한 방법이라고 생각합니다.tsconfig.app.json보다는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는 Angular 워크스페이스 루트 아래에 있는 앱 고유의 Typescript 설정 파일입니다.그tsconfig.app.json여러 개의 앱이 포함된 Angular 워크스페이스를 구축하는 경우 앱 간에 중복되는 다중 구성 속성을 쓸 필요 없이 각 앱에 대해 유형 스크립트 구성을 개별적으로 조정할 수 있습니다(따라서extends속성).

엄밀히 말하면,tsconfig.app.json조금도.삭제 시, 이 파일을 저장해 둘 필요가 있습니다."module": "esnext"에tsconfig.json거기에 보관해 두면, 우선합니다.tsconfig.json이 때문에, 필요한 것은,"module":"esnext"줄을 서다tsconfig.app.json.

이 문제는 tsconfig.app.json 파일에 ["src/*/*.ts"]를 추가하여 해결했습니다.

아래 명령을 사용하여 각도 버전을 업데이트하십시오.에러가 사라집니다.

ng update @angular/core @angular/cli --next

그런 다음 tsconfig.json 파일에서 대상과 모듈을 변경합니다.

"target": "esnext",
"module": "esnext",

스텝 1: "module": "es2015"에서 "module": tsconfig.json의 "AMD"를 실행하여 이 오류를 해결합니다.

스텝 2: 앱 루트 디렉토리에 새로운 파일 tsconfig.app.json을 만들고 Tony Ngo 코드를 복사하여 붙여넣으면 이 문제가 해결됩니다.

각도 버전이 8.2이고, "module"을 "es2015"에서 "module"로 변경하여 수정했습니다: "es2020"

Ionic 프레임워크와 VSCode를 사용하는 경우 Typescript IDE 버전(> 4)을 업데이트해야 합니다.

각도 13에서 이 문제가 발생했는데 일부 서비스에서는 이 문제가 발생했지만 다른 서비스에서는 발생하지 않았습니다. 차이점은 다음과 같습니다.

@import { Injectable } from '@angular/core/';

이것은 angular 9에서 문제없이 완벽하게 컴파일 되었지만, 수정은 마지막에 /를 제거해서 가 되는 것이었다.'

@import { Injectable } from '@angular/core';

언급URL : https://stackoverflow.com/questions/56375703/angular-8-lazy-loading-modules-error-ts1323-dynamic-import-is-only-supporte