Question

我正在创建一个离子2应用程序。我是一个新的角度2开发人员，很抱歉，如果我错过了一些东西。我想将jQuery和其他js文件包含在页面组件中。

我使用了这种方法：

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

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

未捕获的ReferenceError：$未定义。

所以我试着包含jquery lib：

npm install @types/jquery --save-dev

但我不知道接下来该做什么。如何在我的应用程序中以一种好的方式使用Jquery lib，请不要告诉我将脚本标记添加到index.html页面，因为每次重新运行应用程序时都会将其删除。

Answer 1

import $ from 'jquery';

如果您这样做，上述情况应该有效：

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。

请注意，如果找不到system.config.js文件，请查找要更改的webpack文件。如果您找到一个，webpack.config.js只需将其添加到其中：

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

Answer 2

可以通过以下方式完成。

Optimum - 在组件文件中导入。
- 安装jQuery及其打字 - npm install jquery --save npm install @types/jquery --save-dev
- 使用以下任何一项
  将其导入*.component.ts的顶部
  - import * as $ from 'jquery';。
  - OR - import 'jquery';并声明这两个（作为全局变量） -
    - declare let $:any;
    - declare let jQuery:any;
不是最佳的 - 您还可以在根项目的jQuery CDN link文件夹下的head index.html中添加src/。

此外，在Ionic中，webpack.config.js文件夹位于node_modules文件夹下，该文件将在执行npm install后被替换。

如何在ionic 2 Angular应用程序中包含jQuery

2 个答案: