Question

我正在为我的应用程序使用Angular2 Typescript。在初始加载应用程序期间，下载单个js文件需要花费更多时间，最多可达12 MB。我被建议使用WebPack将所有js文件捆绑到单个文件中。我已经配置了必要的设置，但在应用程序加载期间，我得到了关于Jquery usuage的以下异常。我使用了来自typescript的jquery selector（$）进行编码来执行一些UI选择，使用jquery方法但是在加载时它会抛出以下异常。我甚至在Webpack.config.js中为jquery包含了必要的依赖，所以它编译没有任何问题，但是在onload异常期间被抛出。

EXCEPTION：TypeError：$不是函数app.bundle.js：53511 EXCEPTION：TypeError：$不是functionBrowserDomAdapter.logError @ app.bundle.js：53511BrowserDomAdapter.logGroup @ app.bundle.js：53521ExceptionHandler.call @ app.bundle.js：16196（匿名函数）@ app.bundle.js：19188ZoneDelegate.invoke @ zone.js：323onInvoke @ app.bundle.js：24163ZoneDelegate.invoke @ zone.js：322Zone.run @ zone.js：216（匿名函数）@ zone.js：571ZoneDelegate.invokeTask @ zone.js：356onInvokeTask @ app.bundle.js:24154ZoneDelegate.invokeTask @ zone.js：355Zone.runTask @ zone.js：256drainMicroTaskQueue @ zone.js：474ZoneTask.invoke @ zone.js：426 zone.js：461未处理的承诺拒绝：$不是函数;区域：;任务：Promise.then;值： TypeError：$不是函数（...）consoleError @ zone.js：461_loop_1 @ zone.js：490drainMicroTaskQueue @ zone.js：494ZoneTask.invoke @ zone.js：426 zone.js：463错误：未捕获（在承诺中）：TypeError：$ is 不是函数（...）consoleError @ zone.js：463_loop_1 @ zone.js：490drainMicroTaskQueue @ zone.js：494ZoneTask.invoke @ zone.js：426 app.bundle.js：74155 this.showHome＆gt;＆gt;真

插件：

plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})

Angular版本：2.0.0-rc.5

浏览器：全部

语言：TypeScript 1.8.10 | ES5]

节点（用于AoT问题）：node --version = 6.3.1

Package.Json文件

{
"name": "angular2-quickstart",
"version": "1.0.0",
"scripts": {
"build:tsc1": "tsc --rootDir app --outDir dist",
"postinstall": "typings install",
"build": "webpack --progress",
"build:prod": "webpack -p --progress",
"serve": "webpack-dev-server --progress"
},
"license": "ISC",
"dependencies": {
"@angular/common": "2.0.0-rc.5",
"@angular/compiler": "2.0.0-rc.5",
"@angular/core": "2.0.0-rc.5",
"@angular/forms": "^0.3.0",
"@angular/http": "2.0.0-rc.5",
"@angular/platform-browser": "2.0.0-rc.5",
"@angular/platform-browser-dynamic": "2.0.0-rc.5",
"@angular/router": "3.0.0-rc.1",
"core-js": "2.4.0",
"jquery": "^3.1.1",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "0.6.12"
},
"devDependencies": {
"ts-loader": "^0.8.2",
"typescript": "^1.8.10",
"typings": "^1.0.4",
"webpack": "^1.13.1"
}

Webpack.config.js：

var webpack = require("webpack");

    module.exports = {
    entry: {
    app: './app/main.ts'

    },
    output: {
    path: './dist',
    filename: 'app.bundle.js'
    },
    module: {
    loaders: [
    {test: /.ts$/, loader: 'ts'}

    ]
    },
    resolve: {
        extensions: ['', '.js', '.ts', '.css'],

    },
    plugins: [
    new webpack.ProvidePlugin({
    jQuery: 'jquery',
    $: 'jquery',
    jquery: 'jquery'
    })
    ]
    };

Webpack Angular2 JQuery插件问题

0 个答案: