java中调用外部js文件路径_angular2引用index.html中的外部js文件

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

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

/ 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"; //

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中使用插件将其导入每个组件，而无需手动导入：

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

new webpack.ProvidePlugin({

jQuery: 'jquery',

$: 'jquery',

jquery: 'jquery'

})

],

devServer: {

//contentBase: path.resolve(__dirname, "app_build/"),

historyApiFallback: true,

stats: "minimal"

}

};

现在你的代码.ts中的每个地方都可以像这样使用jquery：

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);

}

}