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

Question

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

23

我开始使用Angular进行一个项目，但是我从没想到安装最新版本会带来一些问题。我还在使用Materialize，所以当我试图“导入”它的Javascript文件时，它无法工作。我不知道为什么，自从上周五我一直在寻找答案，但是我什么都没有找到。

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

附注：我不能使用CDN来获取materialize JS。

- Ricardo Luna

你正在使用CLI吗？ - Rohit.007

是的，我正在使用CLI。我尝试将它导入到索引中，但没有成功。 - Ricardo Luna

你可以在 angular-cli.json 文件中添加 "scripts": [ "../node_modules/jquery/dist/jquery.js" ],。 - Rohit.007

你也可以通过另一种方式将Materialize添加到你的项目中。请查看以下链接：https://www.npmjs.com/package/angular2-materialize - Rohit.007

没错，@RicardoLuna，angular-cli.json是用于之前版本的Angular。 - baao

显示剩余7条评论

3个回答

3

我认为关键是：正确的配置位置。在我们可能粘贴脚本路径的两个位置中，（Angular CLI: 6.1.5）

第一个位置是：(项目 => 你的应用名称 => 架构师 => 构建)

"build": {
      "builder": "@angular-devkit/build-angular:browser",
      "options": {
        "outputPath": "dist/<your app name>",
        "index": "src/index.html",
        "main": "src/main.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.app.json",
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/styles.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js"
        ]
      },
      "configurations": { ... }
    }

第二个是：(项目 => 您的应用名称 => 架构 => 测试) - 错误位置。

"test": {
      "builder": "@angular-devkit/build-angular:karma",
      "options": {
        "main": "src/test.ts",
        "polyfills": "src/polyfills.ts",
        "tsConfig": "src/tsconfig.spec.json",
        "karmaConfig": "src/karma.conf.js",
        "styles": [
          "src/styles.css"
        ],
        "scripts": [
        ],
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ]
      }
    }

然后您的浏览器应该会看到类似这样的内容：

希望这可以帮到您；）

- riwex

0

JavaScript 通常使用 script 标签来编写，引号使用双引号。

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "Vhls": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/Vhls",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "node_modules/videogular2/fonts/videogular.css",
              "src/styles.scss"
            ],
            "scripts": [
              "src/assets/js/hls.min.js"
            ]
          },
          "configurations": {...............

- Rahi Verma

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Vikas · Accepted Answer

从Angular 6开始，CLI项目使用angular.json而不是.angular-cli.json进行构建和项目配置。这意味着您正在使用Angular 6。
自版本6起，文件位置已更改为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和scripts选项：

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

附注
附加信息: 在TypeScript中导入JavaScript库时出错