如何从Angular的Node模块中导入单个脚本

Question

我想在我的Angular应用程序中使用Adobe Spectrum。使用以下命令将Spectrum安装为节点模块：
npm install @adobe/spectrum-css

致include the design icons：

  

”，您需要使用loadIcons（）函数。该函数位于icons / loadIcons.js文件中，并具有以下签名：   loadIcons(svgURL {String}, callback {Function});

如何将node_module中的icons / loadIcons.js文件导入并与Angular一起使用？

更新

我更改了angular.json

"scripts": [
  "./src/assets/spectrum/dist/icons/loadIcons.js"
]

还有app.component.ts

import { Component, OnInit } from '@angular/core';

declare function loadIcons(svgURL: string): any;
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'client';

  ngOnInit() {
    loadIcons('icons/spectrum-css-icons.svg');
  }

}

看起来像loadIcons（）;现在可以使用，但是在Chrome开发工具中出现以下错误：

  

获取http://localhost:4200/icons/spectrum-css-icons.svg 404（未找到）
  loadIcons.js：32错误：loadIcons：无法获取图标，服务器返回了404

应该在哪里放置图标目录？我在项目根目录和./src下都有它们。

Answer 1

您必须将图片放在assets folder

下

文件夹结构

src
 - assets
  - icons
   - spectrum-css-icons.svg

---

export class AppComponent {
      ngOnInit() {
        loadIcons('assets/icons/spectrum-css-icons.svg');
      }

}