0
2.4K
ViewsIncluir activos al construir una biblioteca angular
Estoy creando una biblioteca que contiene una fuente de icono personalizada. Sin embargo, cuando construyo mi biblioteca usando ng build <library-name> --prod , la carpeta de activos no está incluida en la compilación, lo que significa que los íconos no aparecen cuando se usa la compilación de producción.
Probé varias soluciones, como agregar la matriz de assets en angular.json y copiar la carpeta de activos en la carpeta dist creada.
Estoy usando Angular 8 y la biblioteca se creó usando angular-cli.
Intenté incluir las fuentes de dos maneras: usando @import url( '../assets/icon_font.css' ); en uno de los archivos de estilo y agregando ../assets/icon_font.css a styleUrls en uno de los componentes que lo requieren. ( icon_font.css es el archivo css que incluye las fuentes de iconos)
Aquí está el diseño de mi directorio de la biblioteca:
- src - lib - assets - icon_font.css - font files - component that requires icons - style sheet that has @import icon_font.css - other components and classes Me gustaría que el .ttf y otros archivos de fuentes en el directorio assets/ estén disponibles en la carpeta dist exportada.
3 answers
Answer question0
Mirando otras publicaciones y problemas en github, parece que no hay forma de obligar al empaquetador a empaquetar activos junto con los archivos de compilación. Lo que terminé haciendo en cambio fue copiar la carpeta de assets a la carpeta dist manualmente antes de implementarla en npm. Después de eso, solo tendría que decirles a los usuarios que icon_font.css @import una de sus hojas de estilo.
0
Como dijiste en tu respuesta, no fue posible obligar al empaquetador a empaquetar activos junto con los archivos de compilación.
Ahora, ng-packagr lanzó una nueva versión que le permite incluir los activos junto con los archivos de compilación:
Puede copiar estos activos utilizando la opción de activos.
Edite el archivo ng-package.json en su biblioteca (o el archivo projects/<your-lib>/ng-package.json si usa un espacio de trabajo multiproyecto) para definir los activos que deben incluirse:
{ "ngPackage": { "assets": [ "CHANGELOG.md", "./styles/**/*.theme.scss" ], "lib": { ... } } }Más información aquí: https://github.com/ng-packagr/ng-packagr/blob/master/docs/copy-assets.md
0
Como ya se dijo,la biblioteca angular ahora admite activos desde la v9.x de angular.
Pero no está bien explicado ensu sitio web . Para que funcione tendrás que:
- Agregue una carpeta de activos en la raíz de su proyecto de biblioteca
- Agregue
"assets": ["./assets"],en el archivong-package.jsonde la biblioteca
{ "$schema": "../../node_modules/ng-packagr/ng-package.schema.json", "dest": "../../dist/icon", "assets": ["./assets"], // <-- Add it here "lib": { "entryFile": "src/public-api.ts" } }Recordatorio: la ruta tsconfig.lib.json no funciona en bibliotecas angulares, por lo que después de su cambio, es posible que deba editar manualmente la importación de los activos con la ruta relativa
-
ng build custom-project --prod. Luego aparece en su carpeta dist.
Entonces podrías simplemente agregar lo que quieras en esta carpeta
Consejos adicionales: Úselo dentro de su proyecto
Luego, si desea usarlo en el proyecto al que se importa, haga:
Activos, js, estilos en angular.json
Agregue esos archivos a su archivo angular.json
{ /*...*/ "assets": [ // Import every assets { "glob": "**/*", "input": "./node_modules/custom-project/assets", "output": "/assets/" } ], "styles" : [ // Only custom css "node_modules/custom-project/assets/my-css-file.css" ], "scripts" : [ "node_modules/custom-project/assets/my-js-file.js" ] }Js como parte de la aplicación.módulo
También puede agregar js directamente en el archivo de niños, incluso si no estoy seguro de si es realmente perezoso al cargar esos archivos .
ejemplo, en su archivo home.module.ts , importe
import 'custom-project/assets/my-js-file.js'