Búsqueda de sitios web

angular - typescript ¿importar desde <variable> en lugar de una cadena literal?

https://developer.mozilla.org/es/docs/Web/JavaScript/Reference/Statements/import

¿Es posible en Typescript establecer dinámicamente la ruta de origen en una variable al importar?

Por ejemplo, gira esto:

import {HomeComponent} from './dashboard/home/home.component';

A algo como esto:

let hompageComponentPath = './dashboard/home/home.component';
import * from hompageComponentPath;

Respuesta #1

Con la propuesta dinámica de import

Hay una propuesta para la importación dinámica en ECMAScript.

Desde TypeScript 2.4, las expresiones dinámicas import están disponibles. Aquí hay un ejemplo:

async function getZipFile(name: string, files: File[]): Promise<File> {
    const zipUtil = await import('./utils/create-zip-file');
    const zipContents = await zipUtil.getAsBlob(files);
    return new File(zipContents, name);
}

El import, utilizado como una función, devuelve una promesa que se puede esperar.

... Pero no con la import/export estática de ES6

No es posible hacer eso con la sintaxis import/export porque el estándar ES6 había definido explícitamente los módulos de manera estática.

Del artículo ES6 en profundidad: Módulos:

Para un lenguaje dinámico, JavaScript se ha ganado a sí mismo un sistema de módulos sorprendentemente estático.

  • Todos los tipos de import y export solo están permitidos en el nivel superior de un módulo. No hay importaciones o exportaciones condicionales, y no se puede usar import dentro del alcance de una función.
  • Todos los identificadores exportados deben ser exportados explícitamente por nombre en el código fuente. No puedes recorrer un arreglo de forma programática y exportar un montón de nombres de manera impulsada por datos.
  • Los objetos de módulo están congelados. No hay manera de introducir una nueva funcionalidad en un objeto de módulo, al estilo polyfill.
  • Todas las dependencias de un módulo deben cargarse, analizarse y enlazarse de manera anticipada, antes de que se ejecute cualquier código del módulo. No existe una sintaxis para un import que pueda cargarse de manera diferida, a demanda.
  • No hay recuperación de errores para los errores de import. Una aplicación puede tener cientos de módulos, y si algo no se carga o enlaza, nada funciona. No se puede importar en un bloque try/catch. (La ventaja aquí es que, debido a que el sistema es tan estático, webpack puede detectar esos errores por ti en tiempo de compilación.)
  • No existe un gancho que permita a un módulo ejecutar algún código antes de que se carguen sus dependencias. Esto significa que los módulos no tienen control sobre cómo se cargan sus dependencias.

Respuesta #2

Puedes usar import como una función y luego pasar cualquier cadena creada dinámicamente en lugar de un literal de cadena.

Sin embargo, esto devuelve una Promesa, así que ten en cuenta que necesita ejecutarse dentro de una función async en lugar de hacerlo en la parte superior del archivo.

p. ej.

async main(): Promise<void> { 

        const  myData = await import(`../../data/${environment.theme}/chapters`);
        
        console.log({ myData });
}

Artículos relacionados