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

Question

我是 angular-cli 的新手。我想安装 npm 库 mdbootstrap。我按照这里的说明操作：Angular CLI Instructions

具体来说，我是这样做的：

我通过 npm install bootstrap 安装了 mdbootstrap。
我将 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 基本文件中？

编辑

在以正确的方式进行之前，我只是以旧方式安装我的库，直接注入 index.html.

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

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

Answer 1

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

例如：

scripts.bundle.js
styles.bundle.js

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

回复编辑：

为您的脚本尝试 ../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",

Answer 2

只需通过 npm install lib-name --save 安装您的库并将其导入您的代码。

如果库不包含类型，您可以使用 npm 安装它们：

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

如果库在@types/ 没有可用的打字，您仍然可以通过手动添加

的打字来使用它

首先，在您的 src/ 文件夹中创建一个 typings.d.ts 文件。此文件将自动包含为全局类型定义。
然后，在src/typings.d.ts中添加如下代码：
```
declare module 'typeless-package';
```

最后，在使用该库的组件或文件中，添加如下代码：

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

有详细信息here

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

Installing 3rd Party Applications with Angular-CLI

angular

angular-cli

npm-install