Add external scripts and styles - mgechev/angular-seed GitHub Wiki

In this page we'll show you how you can include the scripts and styles from Bootstrap to your seed project.

1. Install bootstrap.

npm install bootstrap --save

2. Declare the bootstrap.min.css and bootstrap.min.js file as injectable.

Inside ./tools/config/project.config.ts, change additional_deps to add:

  this.NPM_DEPENDENCIES = [
      ...this.NPM_DEPENDENCIES,
    // {src: 'jquery/dist/jquery.min.js', inject: 'libs'},
    // {src: 'lodash/lodash.min.js', inject: 'libs'},
    {src: 'bootstrap/dist/js/bootstrap.min.js', inject: 'libs'},
    {src: 'bootstrap/dist/css/bootstrap.min.css', inject: true}, // inject into css section
  ];

Each entry of the additional_deps should follow this interface:

interface InjectableDependency {
  src: string;
  inject: string | boolean;
}

src property

The src property of the dependency points out its destination. For instance, in the case of bootstrap.css: bootstrap/dist/css/bootstrap.min.css. Note that the path is relative to node_modules.

inject property

In case the value of the inject property equals:

• libs, the dependency will be injected into the <!-- libs:js --> section of the index file.
• shims, the dependency will be injected into the <!-- shims:js --> section of the index file.
• true, then the dependency will be injected in <!-- inject:css --> or <!-- inject:js --> (depending on its type)