使用 Angular-CLI 安装第 3 方应用程序 [英] Installing 3rd Party Applications with Angular-CLI

问题描述

我是 angular-cli 的新手.我想安装 npm 库 mdbootstrap.我按照此处的说明进行操作:

当你运行 ng build 时，这些文件被 webpack 打包并放入 dist 目录中.这些是您在生产中运行时会指向的文件.

对编辑的回应:

为您的脚本尝试 ../node_modules 而不是 /node_modules.另外，请确保先加载 JQuery.

-改变-

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

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.

解决方案

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

这篇关于使用 Angular-CLI 安装第 3 方应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！