javascript - Angular 6 外部 js、css 引用不起作用-6ren

javascript - Angular 6 外部 js、css 引用不起作用

转载作者：行者123 更新时间：2023-11-30 06:21:12

我正在使用 angular6。我有一个引导管理仪表板模板。我正在尝试在 Angular 应用程序中导入该模板，但 Angular 帮助中未采用外部 js 引用如何导入以及如何在 angular 6 元素帮助中引用外部 Js/CSS!!

我尝试将所有 CSS 和 js 放在 angular.json 文件中。 “风格”:[]，“脚本”:[]是不是工作。观察到浏览器控制台没有错误。

 "styles": [
              "src/styles.css",
              "assets/css/font-awesome.min.css",
              "assets/css/metisMenu.css",
              "assets/css/typography.css",
              "assets/css/default-css.css",
              "assets/css/styles.css",
              "assets/css/responsive.css"

            ],
            "scripts": [
              "assets/js/vendor/jquery-2.2.4.min.js",
              "assets/js/metisMenu.min.js",
              "assets/js/jquery.slimscroll.min.js",
              "assets/js/jquery.slicknav.min.js",
              "assets/js/scripts.js",
              "assets/js/vendor/modernizr-2.8.3.min.js"
            ]

#Angular.json

{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "MDProject": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "targets": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/MDProject",
            "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",
              "assets/css/font-awesome.min.css",
              "assets/css/metisMenu.css",
              "assets/css/typography.css",
              "assets/css/default-css.css",
              "assets/css/styles.css",
              "assets/css/responsive.css"
            ],
            "scripts": [
              "assets/js/vendor/jquery-2.2.4.min.js",
              "assets/js/metisMenu.min.js",
              "assets/js/jquery.slimscroll.min.js",
              "assets/js/jquery.slicknav.min.js",
              "assets/js/scripts.js",
              "assets/js/vendor/modernizr-2.8.3.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "MDProject:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "MDProject:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "MDProject:build"
          }
        },
        "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"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "MDProject-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "targets": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "MDProject:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "MDProject:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "MDProject"
}

让我知道哪里做错了..

最佳答案

对 Assets 使用“ Assets ”键，对样式使用样式，对脚本使用脚本...

       "assets": [
          "src/assets",
          "src/favicon.ico"
        ],
        "styles": [
          "src/styles.css",
          "assets/css/font-awesome.min.css",
          "assets/css/metisMenu.css",
          "assets/css/typography.css",
          "assets/css/default-css.css",
          "assets/css/styles.css",
          "assets/css/responsive.css"

        ],
        "scripts": [
          "assets/js/vendor/jquery-2.2.4.min.js",
          "assets/js/metisMenu.min.js",
          "assets/js/jquery.slimscroll.min.js",
          "assets/js/jquery.slicknav.min.js",
          "assets/js/scripts.js",
          "assets/js/vendor/modernizr-2.8.3.min.js"
        ]

更新:将“targets”更改为“architect”

  {
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "MDProject": {
      "root": "",
      "sourceRoot": "src",
      "projectType": "application",
      "prefix": "app",
      "schematics": {},
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/MDProject",
            "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",
              "assets/css/font-awesome.min.css",
              "assets/css/metisMenu.css",
              "assets/css/typography.css",
              "assets/css/default-css.css",
              "assets/css/styles.css",
              "assets/css/responsive.css"
            ],
            "scripts": [
              "assets/js/vendor/jquery-2.2.4.min.js",
              "assets/js/metisMenu.min.js",
              "assets/js/jquery.slimscroll.min.js",
              "assets/js/jquery.slicknav.min.js",
              "assets/js/scripts.js",
              "assets/js/vendor/modernizr-2.8.3.min.js"
            ]
          },
          "configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "MDProject:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "MDProject:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "MDProject:build"
          }
        },
        "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"
            ]
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": [
              "src/tsconfig.app.json",
              "src/tsconfig.spec.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    },
    "MDProject-e2e": {
      "root": "e2e/",
      "projectType": "application",
      "targets": {
        "e2e": {
          "builder": "@angular-devkit/build-angular:protractor",
          "options": {
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "MDProject:serve"
          },
          "configurations": {
            "production": {
              "devServerTarget": "MDProject:serve:production"
            }
          }
        },
        "lint": {
          "builder": "@angular-devkit/build-angular:tslint",
          "options": {
            "tsConfig": "e2e/tsconfig.e2e.json",
            "exclude": [
              "**/node_modules/**"
            ]
          }
        }
      }
    }
  },
  "defaultProject": "MDProject"
}

关于javascript - Angular 6 外部 js、css 引用不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52962266/

文章推荐： javascript - 用于 LG webOS 3.0 TV App 中媒体的 Luna 服务

文章推荐：在条件下显示的 Javascript 按钮

文章推荐： java - DynamoDbMapper ScanExpression 无法映射到 Java 对象

带有通配符的 webpack 外部
如何指示 webpack 排除所有 d3 模块？ // does not work externals: { "d3-*": "d3" } 所以如果应用导入了d3-submod
Scala 外部 => 语法
这个问题在这里已经有了答案: 9年前关闭。 Possible Duplicate: What does “outer =>” really mean? 我在哪里可以找到有关信息 trait After
javascript - 外部 for 循环时的非线性性能
这是一个简单的循环，我正在尝试对性能进行基准测试。 var extremeLoop=function(n){ var time=new Date() var t=0; for(
jquery - 外部+内联样式与仅外部样式
问题+概述下面是两个片段，其中包含最初隐藏的 div，然后通过单击 button 和 jQuery 的 .show() 显示。两个 div 都具有由外部样式表应用的 display: grid; 样
javascript - 外部.js文件获取不到页面元素？
我有一个 HTML 页面和一个单独的 .js 文件，该文件包含在带有的页面中标签。这是我的 .js 文件: element = document.getElementById("test");
类的第二个实现文件中静态字段的 C++ 外部？
我在 linux 静态库项目中有 3 个文件，我想在两个类方法实现文件中使用的静态字段存在链接问题。我有 class1.h、class1main.cpp 和 class1utils.cpp。 clas
javascript - 外部单击以重置颜色？
我正在尝试将颜色背景更改为默认背景颜色，当我点击输入框外我尝试使用“null”或“none”但没有用？ window.addEventListener('click', outsideClick);
Android 文件选择器将音频文件重定向到/外部
我正在编写一个应用程序，要求用户在手机上选择各种类型的文件。我使用此代码启动文件选择器 Intent : Intent intent = new Intent(Intent.ACTION_GET_C
android - 外部-内部存储
在 android 中，不可移动(内部)的外部存储和内部存储有什么区别？我不确定在哪里保存我的数据。我只需要保存一个人可以随时提取的游戏统计数据谢谢最佳答案在许多较新的设备中，将不再有物理区别，
c++ - 外部、链接和全局变量
在 C++ 中，假设我们有这个头文件: myglobals.h #ifndef my_globals_h #define my_globals_h int monthsInYear = 12; #en
C++ 外部/多重定义
我正在尝试使用 externs 在 C++ 中连接到 Ada。这两种实现有什么区别？实现A namespace Ada { extern "C" { int getN
jQuery: 外部 html()
这个问题在这里已经有了答案: Get selected element's outer HTML (30 个答案) 关闭 2 年前。想象一下我们有这样的东西: Hello World 如果我们这样
vb6 - 外部 DLL 应该放在哪里？
假设我在模块的顶部有这个: Public Declare Function getCustomerDetails Lib "CustomerFunctions" () As Long 如果我从 VB6
javascript - 外部 Javascript 文件获取？
我目前正在使用这段代码: var wordRandomizer = { run: function (targetElem) { var markup = this.creat
svn - 如何部署 Subversion 外部？
我们正在使用 SVN 试水，并以 Beanstalk 作为主机。我们的设置如下所示: 存储库:模块模块一模块二模块 3 存储库:网站1 自定义网站代码 svn:对模块 1 的外部引用 svn:对
Kubernetes 外部 ip 负载均衡器裸机
有没有办法在负载均衡器中设置自动外部 IP 分配给像谷歌这样的服务？我在裸机上运行 Kubernetes。谢谢最佳答案使用 nodePort 类型的服务，它会将您的服务绑定(bind)到所有节
symfony - generateUrl 外部 Controller
是否有可能在 Controller 之外使用 generateUrl() 方法？我尝试在带有 $this->get('router') 的自定义存储库类中使用它，但它没有用。更新我在这里找到了一
Angular 作为 Webpack 外部
我目前正在尝试通过 Webpack 外部对象外部化 Angular 依赖项来缩短构建时间。到目前为止，我已经为 React 和其他小库实现了这一目标。如果我只是移动 '@angular/compil
gradle - 创建一个依赖于另一个(外部)插件的Gradle插件
我想创建一个自动应用其他插件的插件(外部插件)。这要求在我称为“应用插件”之前为插件设置构建脚本依赖项。但是似乎我无法在插件中添加buildscript依赖项，或者得到了: 您不能更改处于未解析状态的
r - 创建自定义几何图形来计算汇总统计数据并在绘图区域*外部*显示它们
我是R包的创建者EnvStats . 有一个我经常使用的函数，叫做 stripChart .我刚开始学习ggplot2 ，并在过去几天里仔细研究了 Hadley 的书、Winston 的书、Stack

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - Angular 6 外部 js、css 引用不起作用