es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Exportar Svg desde la biblioteca de Angular

04 Aug, 2023 Programación

Estoy creando una biblioteca de diseño y me gustaría incluir algunos SVG básicos en ella, para que si los usuarios no los agregan o reemplazan, se muestren como respaldo.

Creé una carpeta en mi biblioteca:

assets/
  => svg/
     => alert.svg
     => success.svg
     => trash.svg
     => ...

Luego agregué esta carpeta al archivo ng-package.json:

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "dest": "../../dist/libs/ui",
  "assets": ["src/assets"],
  "lib": {
    "entryFile": "src/index.ts"
  }
}

Después me gustaría cargar esos SVG en mi biblioteca, así que en mi carpeta de módulo hago lo siguiente:

constructor(private iconReg: SvgIconRegistryService) {
    Object.entries({
        alert: 'assets/svg/alert.svg',
        info: 'assets/svg/info.svg',
        success: 'assets/svg/success.svg',
        warning: 'assets/svg/warning.svg',
    }).forEach(([key, value]) => {
        this.iconReg.loadSvg(value, key)?.subscribe();
    });
}

Tristemente, no se encuentran las fuentes cuando se utiliza la biblioteca:

mensaje: “Falla de la respuesta de HTTP para http://localhost:4200/assets/svg/success.svg: 404 No encontrado”
nombre: “HttpErrorResponse”

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para resolver este problema, debes actualizar la ruta de los archivos SVG en tu constructor para reflejar la ruta correcta cuando la biblioteca es utilizada por otras aplicaciones. En lugar de utilizar una ruta relativa (“assets/svg/”), debes utilizar la ruta absoluta de los archivos SVG.

    Una forma de lograr esto es utilizando el método forRoot() en el módulo de tu biblioteca y pasando la URL base de tu aplicación. Aquí tienes un ejemplo de cómo hacerlo:

    En el módulo de tu biblioteca:

    @NgModule({
  imports: [
    ...
  ]
})
export class MyLibraryModule {
  static forRoot(baseHref: string): ModuleWithProviders<mylibrarymodule> {
    return {
      ngModule: MyLibraryModule,
      providers: [
        {
          provide: APP_BASE_HREF,
          useValue: baseHref,
        },
      ],
    };
  }
}

    En tu constructor:

    constructor(private iconReg: SvgIconRegistryService, @Inject(APP_BASE_HREF) private baseHref: string) {
  Object.entries({
    alert: `${this.baseHref}assets/svg/alert.svg`,
    info: `${this.baseHref}assets/svg/info.svg`,
    success: `${this.baseHref}assets/svg/success.svg`,
    warning: `${this.baseHref}assets/svg/warning.svg`,
  }).forEach(([key, value]) => {
    this.iconReg.loadSvg(value, key)?.subscribe();
  });
}

    Ahora, cuando tu biblioteca se utiliza en una aplicación, puedes llamar a MyLibraryModule.forRoot() y pasar la URL base de la aplicación. Esto asegurará que los archivos SVG se carguen correctamente sin importar dónde se implemente la aplicación.

Comments are closed.