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

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'.

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

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.

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.

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.

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.