3

我正在创建一个提供多个 UI 组件的 Angular 组件库。这个库将在另一个 Angular 项目中与 npm 一起导入。对于我的组件的主要部分，它工作正常，除了需要带有图像 url 链接（传单）的 3rd 方库 css 文件。

我的组件库遵循 Nikolas LeBlanc 撰写的关于使用 Angular CLI 和 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.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/ 的文件夹来导入地图的图标。运行 ng-packagr 后，我的捆绑组件包含传单样式，但与图像文件夹的链接断开。

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

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

当这个 npm 包安装在测试项目中时，我的地图没有图标，因为浏览器通过 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 { }

传单地图

浏览器请求

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

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

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

4

0 回答 0