Question

我目前正在开发一个Angular（Angular 4.2.5）项目，并且能够添加一些第三方模块。但是，在大多数情况下，如果第三方模块要求我包含脚本（如.js文件），我必须将其添加到我的index.html文件中。

例如，这是我的index.html for Bootstrap：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

我的CSS文件也是如此，但最近发现我可以将它们导入到我的style.css中。以下是该文件中用于引导程序的示例：

@import '~bootstrap/dist/css/bootstrap.min.css';

现在，当我查看在线时，我发现我应该能够将相关脚本的路径添加到我的angular-cli.json文件中，但每次我这样做时，第三方组件都会失败。只有当我将该组件的[script]标签添加到index.html中时才有效。

我已经尝试了几个在线指南，但似乎都没有。我确定我在某个地方错过了一些小设置以确保我使用了列出的angular-cli.json路径，但我似乎无法找到它。

您需要的一些细节：

@ angular / cli：1.2.0
node：6.10.0
os：win32 x64
@ angular / animations：4.2.5
@ angular / common：4.2.5
@ angular / compiler：4.2.5
@ angular / core：4.2.5
@ angular / forms：4.2.5
@ angular / http：4.2.5
@ angular / material：2.0.0-beta.7
@ angular / platform-browser：4.2.5
@ angular / platform-browser-dynamic：4.2.5
@ angular / router：4.2.5
@ angular / compiler-cli：4.2.5

[编辑07/08/2017] 为了清楚起见，我在angular-cli.json中确实有以下内容，但除非我将它包含在我的index.html中，否则它仍然无效。

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "ang2-crm",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "styles.css"
      ],
      "scripts": [
        "../node_modules/bootstrap/dist/bootstrap.min.js"
      ],
      "environments": {
        "source": "environments/environment.ts",
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ],

Answer 1

您可以使用链接通过styles.css或index.html导入它们。此外，您可以在scripts: []

下的angular-cli.json中导入脚本

Answer 2

您可以在.angular-cli.jaon脚本数组中添加所有脚本，在样式数组中添加css文件。

例如，如果要添加jquery.min.js。： -

按npm install jquery --save
然后在脚本数组中添加条目： -

脚本：[../节点模块/ jquery的/ DIST / jquery.min.js]

如何在Angular项目中使用第三方JS模块？

2 个答案: