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

问题描述

我是angular-cli的新手.我想安装npm库mdbootstrap.我在这里按照说明进行操作: 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:

1. 我通过npm install bootstrap安装了mdbootstrap.
2. 我将dist目录中的所有文件都添加到了angular-cli.json.

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补充:

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

我的问题: 我是否还必须通过脚本<link>和<script>标签将所有这些文件包括到index.html基本文件中?

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

编辑

在以正确的方式进行操作之前，我只是以旧的方式安装了库，然后直接将其注入到index.html中.

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

按照上述说明进行操作后，确实在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.

但是，当我删除所有我自己的原件和标签时，我手动将其放入index.html文件中，那么一切都会中断.我尝试在Chrome调试控制台中选择一个jquery，但失败了.我尝试在angular-cli捆绑文件中搜索3rd-party函数.就像ng serve命令没有安装任何东西.

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.

推荐答案

否，您无需再次添加它们. Angular CLI通过webpack为您创建这些文件.当您运行ng serve时，请查看页面源.您会看到index.html附加了一些JS文件.这些是Angular-cli.json中包含的JS/CSS文件.

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.

例如:

scripts.bundle.js
styles.bundle.js

当您运行ng build时，这些文件将被webpack捆绑并放置在dist目录中.这些是在生产环境中运行时要指向的文件.

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.

回复

尝试使用../node_modules而不是/node_modules编写脚本.另外，请确保先加载JQuery.

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

-更改-

"/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安装第三方应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！