angular - 使用 Angular-CLI 安装第 3 方应用程序

Question

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

具体来说，我这样做了:

1. 我通过 npm install bootstrap 安装了 mdbootstrap .
2. 我添加了 dist 中的所有文件目录到我的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基本文件？

编辑

在以正确的方式进行操作之前，我只是以旧的方式安装了我的库，直接注入(inject)到index.html中。

按照上述说明操作后，我确实在index.html 的源代码中看到了额外的插入。所以，这是有希望的。

但是当我删除所有原始内容和手动放入index.html 文件中的标签时，一切都会崩溃。我尝试在 Chrome 调试控制台中进行 jquery 选择，但失败了。我尝试在 angular-cli 捆绑文件中搜索第三方函数。就像 ngserve 命令没有安装任何东西一样。

Answer 1

不，您不需要再次包含它们。 Angular CLI 通过 webpack 为您创建这些文件。当您运行 ngserve 时，请查看您的页面源代码。您将看到 index.html 中附加了一些 JS 文件。这些是 Angular-cli.json 中包含的 JS/CSS 文件。

例如:

scripts.bundle.js
styles.bundle.js

当您运行 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",

-到-

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