如何jQuery的包括离子2角应用

我创造离子2应用程序。我是一个新的角度2开发人员，所以很抱歉，如果我错过了一些事情。我想要包含jQuery和其他js文件到页面组件。如何jQuery的包括离子2角应用

我用这个方法：

import { Component } from '@angular/core'; 
import '../../assets/js/jquery-2.1.1.js'; 
import '../../assets/js/prog-bar.js'; 
import '../../assets/js/myApp.js'; 
import { NavController } from 'ionic-angular';

还好它加载的文件，但它给了我错误

Uncaught ReferenceError: $ is not defined.

于是，我就包括jQuery的lib目录下：

npm install @types/jquery --save-dev

，但我不知道下一步该怎么做。如何在一个很好的方式使用jQuery的lib在我的应用程序，请不要告诉我的脚本标记添加到index.html页面，因为它是我每次重新运行该应用程序时被删除。

System.config({ 
defaultJSExtensions: true, 
paths: { 
    // paths serve as alias 
    'npm:': 'node_modules/' 
}, 
map: { 
    'app': 'app', 
    jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js', 
    material: 'npm:material-design-lite/dist/material.min.js', 

    // angular bundles 
    '@angular/core': 'npm:@angular/core/bundles/core.umd.js', 
    .... 
}, 
packages: { 
    app: { main: 'main', format: 'register', defaultExtension: 'js' }, 
    'rxjs': { defaultExtension: 'js' } 
}, 
});

也不要忘记，你应该有一个指向你的jQuery打字文件typings.json：

来源

2017-04-06 To Be

[此问题已在此解答]（https://stackoverflow.com/questions/42305422/using-jquery-with-ionic-2） –

import $ from 'jquery';

，如果你这样做了以上应该工作。

刚一说明，如果你没有找到system.config.js文件，然后寻找一个的WebPack文件来改变。如果你发现一个，webpack.config.js只需添加这给它：

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

来源

2017-04-06 14:46:54 AngJobs

在哪里添加第二个代码？ –

你没有'systemjs.config.js'文件吗？如果你没有看到它，那么我认为Ionic可能已经转移到了webpack – AngJobs

不，我没有创建一个应用程序，因为离子2文档说，我没有包含任何文件。 –

它可以在下面的方式来完成。

将它导入到组件文件中。
- 安装jQuery - npm install jquery --save。我看你已经安装了typings。
- 导入它在你的*.component.ts的顶部使用任何以下的 -
  - import * as $ from 'jquery';。
  - OR - import 'jquery';，并宣布这两个（如全局变量） -
    - declare let $:any;
    - declare let jQuery:any;
  - 或者 - 在序列追随中（在第一次编译结果undefined "require"，保存任何文件，它作品） -
    - var $ = require('jquery');
    - window.jQuery = $;。为了避免插件的js文件中的“JQuery未定义”。
    - require('my-jquery-pugin');需要声明你的插件。
不是最优的，但你可以包括在index.html目前下src/文件夹根项目的jQuery CDN link。

另外，我想提webpack.config.js文件是可以做npm install之后被替换node_modules文件夹下存在。

来源

2017-08-25 13:37:42

但是我该怎么办这个@ SujitKumarSingh，我仍然得到'运行时错误 jQuery没有定义'。我也没有得到你的意思'声明let $：any''声明让jQuery：any'。在什么黑色我定义然后在ts文件？ –

通过第一种方法'从'jquery'中导入*作为$，我将jQuery libraru中的'everything'作为'$'导入。但这可能并不总是有用，因为使用'jQuery'的库很少，而不是'$'。因此，我提到了第二个选项，它导入'jQuery'，然后声明其中使用的变量。'import'jquery''，'declare let $：any;'和'declare let jQuery：any' will be one after另外3行代码（按顺序）。通过这样做你基本上是定义2个新变量'$'和''任何''数据类型的'jQuery'。 –

如果您正在添加/导入外部'jQuery'插件，那么'point 1'将不起作用。它会给出'错误：未定义jQuery'指向导入的'jQuery插件文件'。为此，我已经问过类似的问题[这里]（https://stackoverflow.com/questions/45811325/importing-jquery-plugin-jquery-shorten-in-typescript-angular-4/45818283）和[Ionic论坛]（ https://forum.ionicframework.com/t/importing-old-jquery-plugin-in-ionic/103713）。对于这种情况，我已经提到在'point 2'中的'index.html'的头下包含'jQuery CDN链接'，这是angular app的主要模板。 –

如何jQuery的包括离子2角应用

回答

相关问题