Angular Universal CSS imports not working

Question

I'm just testing out how Angular Universal handles the imports of third party JavaScript and CSS libraries. For ease of use I tried with jQuery and Bootstrap.

I'm using the Universal Starter repo https://github.com/angular/universal-starter and installed jQuery and Bootstrap through npm.

In my app.component.ts I included jQuery like so and it works perfectly.

import { isBrowser, isNode } from 'angular2-universal'
var jQuery: any = require('jquery');

...

@Component({
  changeDetection: ChangeDetectionStrategy.Default,
  encapsulation: ViewEncapsulation.Emulated,
  selector: 'app',
  templateUrl: './app.component.html'
})
export class AppComponent implements OnInit {
  title = 'ftw';

  ngOnInit(): void {
    if (isBrowser) {
      jQuery('#universal').css({'color': '#FF0000', 'font-size': '25px'})
    }
  }
}

Though when I want to import a css file it won't work properly. I'm importing it within my app/client.ts file as follows.

...
// Angular 2
import { enableProdMode } from '@angular/core';
import { platformUniversalDynamic } from 'angular2-universal/browser';
import { bootloader } from '@angularclass/bootloader';

import { load as loadWebFont } from 'webfontloader';

import 'bootstrap/dist/css/bootstrap.css';

// enable prod for faster renders
enableProdMode();
...

The actual Bootstrap css is within my Webpack bundle but my HTML isn't styled in any way. Anybody had a similar problem with this and knows how to fix this issue?

Answer 1

In order to make import 'bootstrap/dist/css/bootstrap.css'; work, you'll need style loader, which is not installed with universal-starter repo. Sidenote: If you use bootstrap.css as is, and you want to use universal-starter, you can copy bootstrap.min.css into assets folder and add a link tag for it in index.html.

Answer 2

Go to the angular-cli.json or angular.json file at the root of your Angular CLI project folder, and find the scripts: [] property, and include the path to jQuery as follows:

"scripts": [ "../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"]

Now, to use jQuery, all you have to do is to import it in whatever component you want to use jQuery.

import * as $ from 'jquery';
(or)
declare var $: any;

import { Component, OnInit  } from '@angular/core';
import * as $ from 'jquery';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {

  ngOnInit()
  {
    $(document).ready(function(){
       // your code
    });
  }
}