How to Import Single Script from Node Module in Angular

Question

I would like to use Adobe Spectrum in my Angular application. Spectrum is installed as a node module using the following command:
npm install @adobe/spectrum-css

To include the design icons:

"you'll need to use the loadIcons() function. This function lives in the icons/loadIcons.js file and has the following signature: loadIcons(svgURL {String}, callback {Function});

How can the icons/loadIcons.js file from the node_module be imported and used with Angular?

Update

I have changed angular.json

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

And 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');
  }

}

It looks like loadIcons(); is working now, but getting the following error in the Chrome Dev Tools:

GET http://localhost:4200/icons/spectrum-css-icons.svg 404 (Not Found)
loadIcons.js:32 Error: loadIcons: Failed to fetch icons, server returned 404

Where should the icons directory be placed? I have them in both the project root, and under ./src.

Within the scripts section of .angular.json – Michael Kang May 04 '19 at 20:39 — Michael Kang, May 04 '19 at 20:39
So I tried that, but "loadIcons is not defined". – crayden May 04 '19 at 20:39 — crayden, May 04 '19 at 20:39

score 0 · Accepted Answer · answered May 05 '19 at 03:59

0

You must put your picture under the assets folder

Folder structure

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

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

}

answered May 05 '19 at 03:59

Chunbin Li

2,196
1
17
31

How to Import Single Script from Node Module in Angular

Update

1 Answers1