Question

我用Angular开始了一个项目，但是我从未想过安装最新版本会给我带来一些问题。我也在使用Materialise，所以当我尝试导入＆＃39;它的Javascript文件不起作用。我不知道为什么，我从上周五开始寻找答案，但我一无所获。

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

Pd积。我不能使用CDN来实现JS。

Answer 1

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

从npm

安装MaterialiseCSS和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"
 ]

Answer 2

我认为关键是：配置上的正确位置。我们有两个地方可以潜在地粘贴脚本路径。（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"
        ]
      }
    }

之后，应该在浏览器中显示以下内容：

我希望对您有所帮助；）

Answer 3

js始终在脚本标记中写有“”。

{
  "$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": {...............

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

3 个答案: