Question

我正在创建一个提供多个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 /的文件夹来导入地图的图标。运行ng-packagr之后，我的捆绑组件包含传单样式，但链接到images文件夹。

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 { }

Leaflet Map

Browser requests

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

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

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

AngularCLI + ng-packagr：使用带有css依赖关系的第三方库，如Leaflet，用于角度组件库

0 个答案: