1

How do I include node_modules without System.config with AngularJS 2 projects generated with ng?

Attempts (in src/index.html):

<link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="dist/css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="bootstrap.min.css">

Project setup:

npm install -g angular2-cli
ng init
npm install
npm install --save bootstrap@4.0.0-alpha.5
npm start

Note: [by default] there is neither systemjs.config.js nor any reference to System.config in the file-tree anymore…

EDIT: Would be great if all my included node_modules are also pushed into the one bundle (e.g.: from ng build -prod).

A T
  • 13,008
  • 21
  • 97
  • 158
  • 1
    From their [README on github](https://github.com/angular/angular-cli): "We changed the build system between beta.10 and beta.14, from SystemJS to Webpack" - it looks like this question needs to be re-tagged.. – artem Dec 01 '16 at 06:37
  • Done. Retagged, including [tag:systemjs] still though because it is relevant. – A T Dec 01 '16 at 06:38

1 Answers1

1

To include node_module assets such as css with your build, you need to list it in angular-cli.json like this:

{
  "apps": [
    {
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css"
      ]
    }
  ]
}

Also checkout Global Library Installation from the angular-cli readme.

When you run ng build -prod the cli will bundle the listed files.

adriancarriger
  • 2,970
  • 3
  • 19
  • 26
  • +1 & accepted: perfect, that worked. BTW: I did try something similar earlier today, but I think I only tried `node_modules/bootstrap/dist/css/bootstrap.css` – A T Dec 01 '16 at 08:09