Angular 8 - Módulos de carregamento lento: Erro TS1323: A importação dinâmica só é suportada quando o sinalizador '--module' é 'commonjs' ou 'esNext'

107

Quando atualizei o Angular de 7 para o Angular 8, obtendo um erro para módulos de carregamento lento

Eu tentei as opções, que estão lá no guia de atualização angular

Fez as alterações abaixo:

Antes

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

Depois de

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

Erro TS1323: A importação dinâmica só é suportada quando o sinalizador '--module' é 'commonjs' ou 'esNext'.

RajuPedda
fonte

Respostas:

206

Você está usando a importação dinâmica, então você precisa alterar seu tsconfig.json assim para direcionar seu código para o esnextmódulo

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

Além disso, certifique-se de verificar tsconfig.app.json não tem módulo e configuração de destino algo como este

{
  "extends": "./tsconfig.json",
  "compilerOptions": {
    "outDir": "./out-tsc/app",
    "types": []
  },
  "include": [
    "src/**/*.ts"
  ],
  "exclude": [
    "src/test.ts",
    "src/**/*.spec.ts"
  ]
}
Tony Ngo
fonte
4
ng newnão usa isso por padrão. Há uma razão?
Helzgate
2
Parece funcionar no Edge, Chrome, Firefox e IE11 quando descomentei a seção IE11 em polyfills, então estou feliz.
Helzgate
12
Tive que remover a "module": "es2015"linha do meu tsconfig.app.jsonarquivo
ranbuch de
5
@ranbuch, tive o mesmo problema mas não removi a linha, apenas mudei para "module": "esnext"também.
Alfa Bravo
ainda enfrentando o mesmo evento de problema após atualizar o arquivo tsconfig.json
Gaurav Aggarwal
25

Apenas adicionando ao anwser de @Tony, você também pode precisar fazer o mesmo (mude para "module": "esnext") no tsconfig.app.json. No meu caso, o tsconfig.json já estava usando o esnext como módulo, mas o tsconfig.app.json ainda estava usando o es2015 e isso causou esse erro.

Niz
fonte
3
Podemos evitar adicionar "módulo": "esnext" em ambos os arquivos, podemos colocá-lo em tsconfig.json, mas não em tsconfig.app.json, pois isso já está estendendo o tsconfig.json.
RajuPedda
16

Só quero acrescentar minha experiência à resposta de @Tony. Depois de mudar tsconfig.json, ainda mostrava um erro (sublinhado em vermelho). Só depois de reabrir o editor (usei o VSCode) é que vi o sublinhado vermelho desaparecer.

Tai JinYuan
fonte
Eu não tenho o arquivo tsconfig.app.json. Devo criar um?
Marcos
Sim, por favor consulte isso. stackoverflow.com/questions/36916989/…
Tai JinYuan
Foi muito útil. Obrigado :)
Praveen Kumar Palai
1
No IDEA Intelij eu tive o mesmo problema. Você precisa reabrir o projeto.
NieMaszNic
Sim. Você salvou meu dia.
Shailesh Pratapwar
12

Acho que a maneira correta de fazer isso é ajustar em tsconfig.app.jsonvez de 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é o arquivo de configuração Typescript específico para o aplicativo que fica abaixo da raiz do espaço de trabalho Angular . O tsconfig.app.jsonexiste para que, se você estiver construindo um espaço de trabalho Angular com vários aplicativos, você possa ajustar a configuração do Typescript separadamente para cada aplicativo, sem ter que escrever propriedades de configuração redundantes que se sobrepõem entre os aplicativos (daí a extendspropriedade).

Tecnicamente, você não precisa de tsconfig.app.jsonnada. Se você apagá-lo, você terá que colocar o "module": "esnext"no tsconfig.json. Se você mantiver lá, ele terá precedência tsconfig.json, então você só precisa adicionar a "module":"esnext"linha tsconfig.app.json.

Zach Gollwitzer
fonte
Sim, eu tive que adicionar o módulo: 'esnext' em ambos tsconfig.json e tsconfig.app.json
RDV
0

eu resolvo esse erro seguindo as etapas da etapa 1: "módulo": "es2015" para "módulo": "AMD" em tsconfig.json

passo 2: crie um novo arquivo tsconfig.app.json no diretório raiz do aplicativo, copie o código de Tony Ngo e cole nele, então este problema será resolvido.

Rashid Bukhari
fonte