Add external scripts and styles

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)