外部 JavaScript 文件在 Angular 2 中不起作用答案

【问题标题】：external JavaScript File not working in angular 2外部 JavaScript 文件在 Angular 2 中不起作用
【发布时间】：2017-12-19 09:21:35
【问题描述】：

我正在使用 Angular 2 框架构建一个 Web 应用程序，并且我想使用一个外部模板。尝试将其转换为 angular2 SPA。

我需要运行一些脚本 (custom.js)。所有 CSS 和 JavaScript 文件都添加到 Index.html 中。

除外部 js 外，一切正常。 JavaScript 无法正常工作。但是 CSS 文件正在工作。 Material 组件和 modals 其他 JavaScript 功能在 Angular 组件文件中没有任何作用。

【问题讨论】：

在你的html中的angular js上面添加external js文件
angular1.0 材料设计不适用于 angular2。有谷歌发布的新材料组件与 angular4 最兼容。这是网址：- material.angular.io

标签： javascript html css angular2-template

【解决方案1】：

在您的 .angular-cli.json 文件中，您需要在应用的脚本属性下添加外部 js 文件。

    {
        // other app config
        apps:[
            {
                // Your app config
                "scripts":[
                    "path/to/your/custom.js"
                ]
            }
         ]
    }

如果你想在组件中使用脚本，你应该在组件类之前声明它。

declare var customLibraryName: any;

有关详细信息，请参阅Angular Cli Wiki。

【讨论】：

您好，感谢@JosephDragovich 的快速回复。老实说，我是 Javascript 和 Angular 2 的新手。根据您的建议，我将代码更新如下：“scripts”：[“./src/assets/Js/jquery-2.2.4.min.js”， “./src/assets/Js/bootstrap.min.js”、“./src/assets/Js/jquery-ui.min.js”、“./src/assets/Js/jquery-plugin-collection.js ", "./src/assets/Js/custom.js" ]，什么都不做

【解决方案2】：

感谢@JosephDragovich 的快速回复。老实说，我是 Javascript 和 Angular 2 的新手。根据您的建议，我将代码更新如下： JavaScript 不工作

angular-cli.json

  "scripts": [
        "./src/assets/Js/jquery-2.2.4.min.js",
        "./src/assets/Js/bootstrap.min.js",
        "./src/assets/Js/jquery-ui.min.js",
        "./src/assets/Js/jquery-plugin-collection.js",
        "./src/assets/Js/custom.js"
      ],

我的 index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>LocumMedApp</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">

</head>
<body class="has-side-panel side-panel-right fullwidth-page side-push-panel">
  <app-root></app-root>
</body>
</html>

【讨论】：

【解决方案3】：

在 index.html 中也使用<script> 标记放置脚本。

【讨论】：