我正在创建一个提供多个UI组件的Angular组件库 . 该库将在另一个角度项目中以npm导入 . 对于我的组件的主要部分，它工作正常，除了需要第三方库css文件与图像URL链接（Leaflet） .

我的组件库遵循Nikolas LeBlanc about building a component library with Angular CLI and ng-packagr撰写的文章 .

项目结构如下：

├── src
│   ├── app
│       ├── app.component.html
│       ├── app.component.spec.ts
│       ├── app.component.ts
│       ├── app.component.scss
│       ├── app.module.ts
│   ├── component1
│       ├── component1.component.html
│       ├── component1.component.spec.ts
│       ├── component1.component.ts
│       ├── component1.component.scss
│       ├── component1.module.ts
│   ├── main.ts
│   ├── typings.d.ts
│   ├── index.html
│   ├── styles.scss
├── tsconfig.json
├── package.json
├── .angular-cli.json
├── tslint.json

Ng-packagr很好地捆绑到一个可用的npm库中用于其他项目，结构如下：

├── ui-components
│   ├── ui-components.es5.js
│   ├── ui-components.js
├── bundles
│   ├── ui-components.umd.js
├── src
│   ├── app
│       ├── app.component.d.ts
│       ├── app.moduled.d.ts
├── package.json
├── public_api.d.ts
├── ui-component.d.ts
├── ui-component.metadata.json

为了使用Leaflet库，我必须在组件sass文件中导入css文件

位置component.component.scss

@import '~leaflet/dist/leaflet.css'
@import '~leaflet.markercluster/dist/MarkerCluster.css'
@import '~leaflet.markercluster/dist/MarkerCluster.Default.css'
@import '~leaflet-draw/dist/leaflet.draw.css'

位置component.component.ts

import { Component, OnInit, Input, ViewEncapsulation } from '@angular/core';
import * as L from 'leaflet';
import 'leaflet.markercluster';
import 'leaflet-draw';
import {
  ComponentLocationInterface
} from '../interfaces/component-location.interface';

@Component({
  selector: 'component-location',
  templateUrl: './component-location.component.html',
  styleUrls: ['./component-location.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class ComponentLocationComponent implements OnInit {
  @Input() data: ComponentLocationInterface;
  controlDrawLayer: L.Control.Draw;
  leafletMap: L.Map;
  drawnItems: L.FeatureGroup;
  featureCollections: GeoJSON.FeatureCollection<any>[] = [];
  constructor() {
  }
  ...

leaflet.css和leaflet-draw.css正在使用名为images /的文件夹来导入 Map 的图标 . ng-packagr运行后，我的捆绑组件包含传单样式，但链接到images文件夹 .

ui-components.umd.js（ng-packagr捆绑文件）

.leaflet-control-layers-toggle {
      background-image: url(images/layers.png);
      width: 36px;
      height: 36px; }

当这个npm包安装在测试项目中时，我有没有图标的 Map ，因为浏览器通过http请求请求它们 .

测试项目app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ComponentLocationModule } from 'ui-components';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    ComponentLocationModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Leaflet Map

Browser requests

一个可能的解决方法是走出angular-cli和ng-packagr环境并使用带有Postcss插件的webpack将图像url转换为base64图像，但是我没有设法创建一个工作包，因为捆绑结果与我的非常不同原始项目配置 .

简而言之，我使组件工作的唯一方法是在使用组件库的项目中导入传单css文件 .

有没有办法将这些图像集成到我的角度组件库中，而不是使用此库在项目中进行依赖？

angular sass leaflet angular-cli ng-packagr