angular 2引用index.html中的外部js文件


angular 2 referencing external js file in index.html

我正在使用angular cli工具制作一个简单的angular 2应用程序。 在我的代码中，我必须在index.html中包含jquery.js文件。 jquery.js在node_modules目录下，但该语句

此后，如果ng serve已经启动，请重新启动它。

相关讨论

有一种使用@types处理外部库的新方法

为了安装/使用jquery，您只需要使用以下命令将其安装在项目中

1
npm install --save @types/jquery

然后在tsconfig.json中的"类型"下，相应地添加其引用，如下所示，

tsconfig.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
 "compilerOptions": {
   "target":"es5",
   "module":"commonjs",
   "moduleResolution":"node",
   "sourceMap": false,
   "emitDecoratorMetadata": true,
   "experimentalDecorators": true,
   "lib": ["es2015","dom" ],
   "noImplicitAny": true,
   "suppressImplicitAnyIndexErrors": true,

   "types": [
     "jquery",    //<<<<-----add here
     "hammerjs",
     "node"
    ]
  }
}
相关讨论

如果使用webPack和Typescript，则可以执行以下操作：

在您的vendor.ts文件中导入jquery：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
/ RxJS.
import"rxjs";

// Angular 2.
import"@angular/common";
import"@angular/compiler";
import"@angular/core";
import"@angular/http";
import"@angular/platform-browser";
import"@angular/platform-browser-dynamic";
import"@angular/router";

// Reflect Metadata.
import"reflect-metadata";

// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...

import"jquery"; //<-- HERE IS JQUERY
import"bootstrap/dist/js/bootstrap";
import"bootstrap/dist/css/bootstrap.min.css";
import"angular2-toaster/lib/toaster.css";
import"angular2-toaster/angular2-toaster";

import"ng2-slim-loading-bar";
import"ng2-slim-loading-bar/style.css";
import"ng2-modal";
import"ng2-bs3-modal/ng2-bs3-modal";

然后在webpack.dev.js中使用插件将其导入每个组件，而无需手动导入：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var webpack = require("webpack");
var HtmlWebpackPlugin = require("html-webpack-plugin");
var CleanWebpackPlugin = require('clean-webpack-plugin');
var path = require('path');

module.exports = {
    entry: {
       "polyfills":"./polyfills.ts",
       "vendor":"./vendor.ts",
       "app":"./app/main.ts",

    },
    resolve: {
        extensions: ['', '.ts', '.js', '.json', '.css', '.scss', '.html']
    },
    output: {
        path:"./app_build",
        filename:"js/[name]-[hash:8].bundle.js"
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
                loader:"babel-loader",

                // Skip any files outside of your project's `src` directory
                //include: [
                // "app_build",
                //],
                exclude: [
                  path.resolve(__dirname,"node_modules")
                ],
                // Only run `.js` and `.jsx` files through Babel
                test: /\\.js/,

                // Options to configure babel with
                query: {
                    plugins: ['transform-runtime', 'babel-plugin-transform-async-to-generator'],
                    presets: ['es2015', 'stage-0'],
                }
            },
            {
                test: /\\.ts$/,
                loader:"ts"
            },
            {
                test: /\\.html$/,
                loader:"html"
            },
            //{
            //    test: /\\.(png|jpg|gif|ico|woff|woff2|ttf|svg|eot)$/,
            //    loader:"file?name=assets/[name]-[hash:6].[ext]",
            //},
            {
                test: /\\.(png|jpg|gif|ico)$/,
                //include:  path.resolve(__dirname,"assets/img"),
                loader: 'file?name=/assets/img/[name]-[hash:6].[ext]'
            },
            {
                test: /\\.(woff|woff2|eot|ttf|svg)$/,
              //  exclude: /node_modules/,
                loader: 'file?name=/assets/fonts/[name].[ext]'
            },
            // Load css files which are required in vendor.ts
            {
                test: /\\.css$/,
                loader:"style-loader!css-loader"
            },
            {
                test: /\\.scss$/,
                loader: ExtractTextPlugin.extract('css!sass')
            },
        ]
    },
    plugins: [
        new ExtractTextPlugin("css/[name]-[hash:8].bundle.css", { allChunks: true }),
        new webpack.optimize.CommonsChunkPlugin({
            name: ["app","vendor","polyfills"]
        }),
        new CleanWebpackPlugin(
            [
               "./app_build/js/",
               "./app_build/css/",
               "./app_build/assets/",
               "./app_build/index.html"
            ]
        ),
        // inject in index.html
        new HtmlWebpackPlugin({
            template:"./index.html",
            inject:"body"
        }),
        // JQUERY PLUGIN HERE <-- !!! HERE IS PLUG IN
        new webpack.ProvidePlugin({
            jQuery: 'jquery',
            $: 'jquery',
            jquery: 'jquery'
        })
    ],
    devServer: {
        //contentBase: path.resolve(__dirname,"app_build/"),
        historyApiFallback: true,
        stats:"minimal"
    }
};

现在在代码.ts中的任何地方都可以使用jquery，如下所示：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
import { Component, AfterViewInit, ElementRef } from '@angular/core';





@Component({
    selector: 'about',
    template: require('./about.component.html'),
    styles: [String(require('./about.component.scss'))]
})

export default class AboutComponent implements AfterViewInit {
    calendarElement: any;


    constructor(private elementRef: ElementRef) { }

    ngAfterViewInit() {
        this.calendarElement = jQuery(this.elementRef.nativeElement);

    }

}

首先，您不需要将其放在index.html中，而是将该条目放在angular-cli.json文件中

像这样：

1
2
3
4
5
     "scripts": [
       "../node_modules/wow.js/dist/wow.js",
       "../node_modules/jquery/dist/jquery.js",
       "....Other Libs..."
      ]

然后确保在使用前正确安装了jQuery

同时在root-cli.json文件中提供相对路径的同时检查根路径

如果@tudorciotlos答案对您不起作用(例如我的情况)，请尝试以下扩展方式：

1
2
3
 "scripts": [
    {"input":"../node_modules/jquery/dist/jquery.js","bundleName":"renamed-script.js" }
  ]
1
     <script src="renamed-script.js">

来源在这里

如果存在@type，我建议遵循Nikhil Shah的建议(例如jQuery的情况)

但是，如果您具有导出全局变量的库(如jQuery)，但没有已知的@type文件，则可以查看我的以下答案