时间戳

首页 > 解决方案 > 如何在 Angular 6 中使用外部 JS 文件

javascript - 如何在 Angular 6 中使用外部 JS 文件

问题描述

我用 Angular 开始了一个项目，但我从没想过安装它的最新版本会给我带来一些问题。我也在使用 Materialize，所以当我尝试“导入”它的 Javascript 文件时它不起作用。我不知道为什么，从上周五开始我一直在寻找答案，但我什么也没找到。

我已经更改了 angular.json 文件并在其中引用了我的 JS 位置，但这还不够。

PD 我不能使用 CDN 来实现 JS。

标签： javascriptangular

解决方案

Angular 6 以后的 CLI 项目使用angular.json而不是.angular-cli.json用于构建和项目配置。这意味着您使用的是 Angular 6。
从 v6 开始，文件的位置已更改为angular.json. 由于不再有前导点，因此默认情况下文件不再隐藏，处于同一级别。这也意味着 angular.json 中的文件路径不应包含前导点和斜线，即您应该提供绝对路径

从 npm 安装 MaterializeCSS 和 angular2-materialize

 npm install materialize-css --save 
 npm install angular2-materialize --save 
 npm install jquery@^2.2.4 --save
 npm install hammerjs --save

安装所有必需的依赖项后，将它们添加到样式和脚本数组angular.json

"styles": [
             
      "src/styles.css",
      "node_modules/materialize-css/dist/css/materialize.css"
],
"scripts": [
      "node_modules/jquery/dist/jquery.js",
       "node_modules/hammerjs/hammer.js",
       "node_modules/materialize-css/dist/js/materialize.js"
 ]

对于 Angular 版本 11+

配置

angular.json 配置中的样式和脚本选项现在允许直接引用包：

之前："styles": ["../node_modules/bootstrap/dist/css/bootstrap.css"]
之后："styles": ["bootstrap/dist/css/bootstrap.css"]

PS
Additonal Info：Error import javascript library in typescript

推荐阅读