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捆绑文件以获取第三方功能。它就像没有从ng服务命令安装任何东西。

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目录。这些是您在生产中运行时要指向的文件。

对编辑的回应：

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

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安装第三方应用程序

2 个答案: