Kanav Kanav - 1 year ago 169
AngularJS Question

Load css from a CDN in an Angular 2 Component

As the title says, i want to include external css in an Angular 2 component. Here's how i am doing it now:

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

selector: 'app-auth',
templateUrl: './auth.component.html',
styleUrls: [
export class AuthComponent implements OnInit {

constructor() { }

ngOnInit() {


The first two URLs don't work. I'm getting an error:

ncaught Error: Cannot find module "./https://fonts.googleapis.com/css?family=Dosis:400,500,600,700"

I can make it work by including it directly into the HTML, but i don't think that's the right way to do it.

Edit: I even tried using
encapsulation: ViewEncapsulation.None,
that didn't help.

Answer Source

You should load only local styles in the array of styleUrls. Therefore, in auth.component.css, import your desired external stylesheets:

@import "https://fonts.googleapis.com/css?family=Dosis:400,500,600,700";
@import "http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css";
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download