Add external CSS and JS links to a component in Angular 2

Question

In order to use "Bootstrap Select" only in my.component.ts, I tried use this:

@Component({
  templateUrl: 'my.component.html',
  styleUrls: [
        'my.component.css',
         //Bootstrap Select
        'https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css'
  ]
})

I got this error :

Can't resolve './ https://cdnjs.cloudflare.com/ ...' in 'C:.....\\app\\components'

It seems that angular 2 search for bootstrap in my folder. So can I tell him that it is an external URL?

I am also need to add my js link:

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/js/bootstrap-select.min.js"></script>

Answer 1

From angular styles documentation .

Style URLs in metadata

You can load styles from external CSS files by adding a styleUrls attribute into a component's @Component decorator:

 @Component({
      selector: 'hero-details',
      template: `
        <h2>{{hero.name}}</h2>
        <hero-team [hero]=hero></hero-team>
        <ng-content></ng-content>
      `,
      styleUrls: ['app/hero-details.component.css']
    })
    export class HeroDetailsComponent {
    /* . . . */
    }

The URL is relative to the application root, which is usually the location of the index.html web page that hosts the application. The style file URL is not relative to the component file. That's why the example URL begins src/app/. To specify a URL relative to the component file, see Appendix 2.

You can also embed tags into the component's HTML template.

As with styleUrls, the link tag's href URL is relative to the application root, not the component file.

@Component({
      selector: 'hero-team',
      template: `
        <link rel="stylesheet" href="app/hero-team.component.css">
        <h3>Team</h3>
        <ul>
          <li *ngFor="let member of hero.team">
            {{member}}
          </li>
        </ul>`
    })

CSS @imports

You can also import CSS files into the CSS files using the standard CSS @import rule. For details, see @import on the MDN site.

In this case, the URL is relative to the CSS file into which you're importing.

@import 'hero-details-box.css';

---

Now. For one of your purposes you could need to change encapsulation. It is the topic here. Load external css style into Angular 2 Component Give a look. It solves you for adding an external CDN but I wanted to give full info and why is it needed. To ensure you it is the only that solves your scenario.

Also, other suggestions there up resolves you for adding script tag. I suggest just add it to your component template, as you should do directly in the html what is yet specific of your component.

Answer 2

You have to give it a relative path to your file.

starting with "./ here goes the path to your css file /my.component.css"

And for the second css file thats being called. That one goes into your index.html file like so:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.12.2/css/bootstrap-select.min.css">