2

I am new to angular-cli. I want to install the npm library mdbootstrap. I followed the instructions here: Angular CLI Instructions

Specifically, I did this:

  1. I installed mdbootstrap via npm install bootstrap.
  2. I added all of the files in the dist directory to my angular-cli.json.

angular-cli.json additions:

"styles": [
  "../node_modules/mdbootstrap/css/bootstrap.min.css",
  "../node_modules/mdbootstrap/css/mdb.min.css",
  "../node_modules/mdbootstrap/css/style.css"
],
"scripts": [
  "/node_modules/mdbootstrap/dist/js/bootstrap.min.js",
  "/node_modules/mdbootstrap/dist/js/jquery-3.1.1.min.js",
  "/node_modules/mdbootstrap/dist/js/mdb.min.js",
  "/node_modules/mdbootstrap/dist/js/tether.min.js",
],

My Question: Do I have to also include all of these files, via script <link> and <script> tags, to the index.html base file?

EDIT

Before doing it the correct way, I just installed my libraries the old way, injected straight into index.html.

After following the instructions above, I do see an extra insertion in the source code of the index.html. So, that is promising.

But when I remove all of my original and tags I manually put in the index.html file, everything breaks. I tried making a jquery selection in the Chrome debug console, and it failed. I tried searching the angular-cli bundled files for 3rd-party functions. It's like nothing got installed from the ng serve command.

Jerry Huckins
  • 498
  • 3
  • 7
  • 22

2 Answers2

4

No you do not need to include them again. Angular CLI creates these files for you via webpack. When you run ng serve look at your page source. You will see there are some JS files appended to your index.html. These are the JS/CSS files which where included in your angular-cli.json.

For example:

scripts.bundle.js
styles.bundle.js

enter image description here

And when you run ng build these files are bundled by webpack and placed into the dist directory. These are the files you would point to when running in production.

Response to Edit:

Try ../node_modules instead of /node_modules for your scripts. Also, make sure to load JQuery first.

-Change-

"/node_modules/mdbootstrap/dist/js/bootstrap.min.js",
"/node_modules/mdbootstrap/dist/js/jquery-3.1.1.min.js",

-to-

"../node_modules/mdbootstrap/dist/js/jquery-3.1.1.min.js",
"../node_modules/mdbootstrap/dist/js/bootstrap.min.js",
khollenbeck
  • 16,028
  • 18
  • 66
  • 101
  • This is added, just before my ` – Jerry Huckins Feb 03 '17 at 19:25
  • But when I remove all of the `` and ` – Jerry Huckins Feb 03 '17 at 19:31
  • Yeah that is correct. Angular CLI loads them at the bottom of the document. So scripts.bundle is all the files you declared in the scripts array. And styles.bunle takes all the styles you declared in the styles array and appends them to the page as – khollenbeck Feb 03 '17 at 19:32
  • Do a search for one of your third party functions in scripts.bunlde you should find them in there. Ideally you should be able to load all third party JS/CSS via angular-cli.json. You should not have to manually add anything to index.html. – khollenbeck Feb 03 '17 at 19:34
  • I want to add jquery-ui datepicker into my angularcli project. In jquery-ui.css, i has a css class which the background-image attr refer to a image file path. Does the styles.bundle.js included this jquery-ui images and what is the correct way to do? .ui-widget-header .ui-icon { background-image: url(images/ui-icons_444444_256x240.png); } – Huy Truong Feb 10 '18 at 09:34
  • @HuyTruong, I would suggest asking a new question with your issue. – khollenbeck Feb 12 '18 at 14:27
2

Simply install your library via npm install lib-name --save and import it in your code.

If the library does not include typings, you can install them using npm:

npm install d3 --save
npm install @types/d3 --save-dev

If the library doesn't have typings available at @types/, you can still use it by manually adding typings for

  1. First, create a typings.d.ts file in your src/ folder. This file will be automatically included as global type definition.

  2. Then, in src/typings.d.ts, add the following code:

    declare module 'typeless-package';

  3. Finally, in the component or file that uses the library, add the following code:

    import * as typelessPackage from 'typeless-package';
typelessPackage.method();

Detailed information available here

Aravind
  • 40,391
  • 16
  • 91
  • 110
  • What if I forgot to append `--save` to my `npm install` commands? – Jerry Huckins Feb 03 '17 at 19:24
  • 1
    the module dependencies are not added to your **package.json** so you should manually install it again when you are trying to reinstall for some reason by deleting the node_modules folder – Aravind Feb 03 '17 at 19:26
  • If you have already installed it, it will not hurt to rerun `npm install` it with `--save`. – Jim L Feb 03 '17 at 19:40
  • @Aravind Sorry I don't know more, but in your example is "typeless-package" literal, or is that the name of the npm package? For example, I'm trying to use the amazon-product-api library. – Jed Grant Jul 14 '18 at 23:15