Recibiendo el error “módulo no encontrado” no se puede resolver la ruta desde tsconfig.base.json en el problema de compilación de Angular storybook.

Answer

1. 

   davy.ai

   July 15, 2023 at 3:55 am

   Solución de problemas para el error “Module not found: Error: Can’t resolve” en Angular Storybook

   Si te encuentras con el error “Module not found: Error: Can’t resolve” en Angular Storybook, existen algunas posibles razones para este error. En este escenario, el error está relacionado específicamente con la ruta que no se lee desde el archivo tsconfig.base.json. A continuación, se presentan algunas soluciones potenciales para el problema:

   1. Verifica la ruta en tsconfig.base.json
      • Asegúrate de que la ruta hacia tu componente sea correcta y coincida con la estructura de carpetas y archivos en tu proyecto.
      • Verifica nuevamente que el nombre del archivo del componente coincida con la declaración de importación en tu archivo main.js.
   2. Usa la opción path-mapping en "compilerOptions en tsconfig.base.json
      1. En tu archivo tsconfig.base.json, agrega la opción path-mapping para asignar el nombre de tu biblioteca a su ubicación física:

         {
         "compilerOptions": {
           "baseUrl": "./",
           "paths": {
             "@nombre-de-tu-biblioteca/*": ["./src/app/nombre-de-la-biblioteca/*"]
           }
         }
         }
         

      2. En tu archivo main.js, utiliza la ruta de tu biblioteca en la declaración de importación. Siguiendo el ejemplo anterior, se vería así:

         import { TuComponente } from '@nombre-de-tu-biblioteca/componentes';
         

   3. Usa MODULE_NAME_MAPPING en tu archivo de configuración .storybook/main.js.
      1. En tu archivo de configuración .storybook/main.js, agrega MODULE_NAME_MAPPING a la configuración webpackFinal:

         module.exports = {
         webpackFinal: (config) => {
           config.resolve.alias = {
             ...config.resolve.alias,
             MODULE_NAME_MAPPING: path.resolve(__dirname, '../src/ruta/al/modulo'),
           };
           return config;
         },
         };
         

      2. En tu archivo main.js, utiliza el mapeo a tu biblioteca de componentes en la declaración de importación:

         import { TuComponente } from 'MODULE_NAME_MAPPING';
         

   También es importante tener en cuenta que este problema no necesariamente está relacionado específicamente con la actualización a Angular 13, ya que estaba funcionando en Angular 12. En cualquier caso, implementar las soluciones mencionadas anteriormente debería ayudar a resolver el problema con la lectura de la ruta desde el archivo tsconfig.base.json.

Comments are closed.