Angular 8 - Módulos de carga diferida: Error TS1323: la importación dinámica solo se admite cuando el indicador '--module' es 'commonjs' o 'esNext'

Cuando actualicé Angular de 7 a Angular 8, obteniendo un error para los módulos de carga diferida

He probado las opciones, que están en la guía de actualización angular.

Hizo los siguientes cambios:

antes de

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

Después

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

error TS1323: la importación dinámica solo se admite cuando el indicador '--module' es 'commonjs' o 'esNext'.

Está utilizando la importación dinámica, por lo que debe cambiar su tsconfig.json de esta manera para apuntar su código al 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"
    ]
  }
}

También asegúrese de verificar que tsconfig.app.json no tenga el módulo y la configuración de destino algo como esto

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

Simplemente agregando al anwser de @ Tony, es posible que también deba hacer lo mismo (cambiar a "módulo": "esnext") en tsconfig.app.json. En mi caso, tsconfig.json ya estaba usando esnext como módulo, pero tsconfig.app.json todavía usaba es2015 y eso causó este error.

Solo quiero agregar mi experiencia a la respuesta de @ Tony. Después de cambiar tsconfig.json, todavía mostraba un error (subrayado en rojo). Solo después de volver a abrir el editor (usé VSCode) vi desaparecer el subrayado rojo.

Creo que la forma correcta de hacer esto es ajustarse en tsconfig.app.jsonlugar de hacerlo tsconfig.json.

tsconfig.app.json

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

tsconfig.app.jsones el archivo de configuración de TypeScript específico de la aplicación que se encuentra debajo de la raíz del espacio de trabajo de Angular . El tsconfig.app.jsonexiste por lo que si usted está construyendo un espacio de trabajo angular que tiene múltiples aplicaciones en ella, puede ajustar la configuración de imprenta por separado para cada aplicación sin tener que escribir las propiedades de configuración redundante que se superponen entre las aplicaciones (de ahí su extendspropiedad).

Técnicamente, no necesitas tsconfig.app.jsonnada. Si lo elimina, tendrá que colocar el archivo "module": "esnext"in tsconfig.json. Si lo mantiene allí, tendrá prioridad sobre tsconfig.json, por lo que solo necesita agregar la "module":"esnext"línea tsconfig.app.json.

Resuelvo este error siguiendo los pasos del paso 1: "módulo": "es2015" a "módulo": "AMD" en tsconfig.json

paso 2: cree un nuevo archivo tsconfig.app.json en el directorio raíz de la aplicación, copie el código de Tony Ngo y péguelo, luego este problema se resolverá.