Búsqueda de sitios web

typescript - Los alias de ruta para el proyecto de biblioteca Angular no funcionan


Estoy tratando de implementar una biblioteca de Angular con elementos de interfaz de usuario. La biblioteca es un monorepo que luego se publica de esta manera

@lib/core
@lib/i18n
@lib/ui

El desarrollo se está realizando bajo Storybook.

Esta es mi estructura.

projects
    lib
        core
        i18n
        ui
tsconfig.json

Los componentes dentro del directorio ui tienen dependencias en los directorios core e i18n.

El archivo tsconfig.json principal

{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "noImplicitReturns": true,
    "noFallthroughCasesInSwitch": true,
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2015",
    "module": "esnext",
    "lib": [
      "es2018",
      "dom"
    ],
      "paths": {
        "@lib/core": ["projects/lib/core/src/*"],
        "@lib/i18n": ["projects/lib/i18n"]
    }
  },
  "angularCompilerOptions": {
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true
  }
}
  • El directorio i18n no contiene una carpeta src.

Los archivos del directorio i18n se resuelven correctamente y puedo hacer ctrl+clic en ellos (usando phpstorm) para ir a los archivos.

Los archivos de @lib/core generan estos errores durante la compilación

ERROR in /path/to/project/projects/lib/ui/src/lib/widgets/help/components/widget-button/cl-widget-button.component.ts
TS2307: Cannot find module '@lib/core' or its corresponding type declarations.

También la estructura del directorio principal

public-api.ts es mi punto de entrada que incluye todas las exportaciones

// index.ts
export * from './public-api.ts';

La razón por la que estoy usando alias de tipos es para emular las importaciones de producción donde todos los paquetes se instalarán a través de npm por separado.

Si uso la ruta relativa (../../../../path/to/core) entonces todo se construye y funciona como debería, pero en producción esta ruta no existe, por supuesto.

Lo que intenté:

  • opción rootDirs de TypeScript sin ningún éxito.
  • "@lib/core/*": ["projects/lib/core/src/*"], en las rutas sin ninguna suerte.
  • Coloca las opciones de paths en un archivo tsconfig diferente, por ejemplo dentro de ui/tsconfig.json sin ningún éxito. De hecho, en este caso el i18n también dejó de funcionar.

Estoy empezando a creer que no puedo hacer un alias de una estructura así.

¿Qué me estoy perdiendo aquí?

Respuesta #1

Puedo proporcionar mi solución

  1. En la raíz tsconfig.json pon esto:
    "paths": {
      "@lib/core": [
        "dist/lib/core", // it depends on your library name
        "dist/core"
      ],
      ...
    }
  1. Agrega el comando en package.json así
"start:storybook": "ng build lib && ng serve storybook"