Installing 3rd Party Applications with Angular-CLI

问题

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:

I installed mdbootstrap via npm install bootstrap.
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.

回答1:

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

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",

回答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

First, create a typings.d.ts file in your src/ folder. This file will be automatically included as global type definition.
Then, in src/typings.d.ts, add the following code:
```
declare module 'typeless-package';
```

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

来源：https://stackoverflow.com/questions/42031389/installing-3rd-party-applications-with-angular-cli

标签

angular

angular-cli

npm-install