我使用一些第三方库创建了一个小项目,如Bootstrap,jQuery,ng2-oauth2,Wijmo等。我决定使用webpack
捆绑我的项目。任何人都可以帮助我如何将这些第三方库纳入我的// Angular
import '@angular/platform-browser';
import '@angular/platform-browser-dynamic';
import '@angular/core';
import '@angular/common';
import '@angular/http';
import '@angular/router';
// RxJS
import 'rxjs';
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-social/bootstrap-social.css';
import 'font-awesome/css/font-awesome.min.css';
import 'angular2-toaster/toaster.css';
import 'jquery/dist/jquery.min.js';
import 'bootstrap/dist/js/bootstrap.min.js';`
实施中吗?
我在 vendor.ts :
中导入了这样的内容import { Injectable } from '@angular/core';
declare var jQuery: any;
@Injectable()
export class FooterService {
//Get getFooterAlign Service
getFooterAlign(): any {
var getHeight = jQuery(window).height() - 225;
if (jQuery(".body-container").height() < getHeight) {
jQuery(".logInWrapper, .contentWrapper, .signupWrapper").css("height", jQuery(window).height() - 232);
jQuery(window).resize(function () {
jQuery(".logInWrapper, .contentWrapper").css("height", jQuery(window).height() - 225);
});
}
else {
jQuery(".logInWrapper, .contentWrapper, .signupWrapper").css("height", jQuery(".body-container").height());
jQuery(window).resize(function () {
jQuery(".logInWrapper, .contentWrapper").css("height", jQuery(".body-container").height());
});
}
}
}
这是正确的导入方式吗?它显示了这个错误:
我使用过这样的jQuery:
#ifndef CLIENT_H
#define CLIENT_H
#include "Viewable.h"
class Client{
Viewable *viewptr;
}
#endif
jQuery用于将我的页脚部分与动态脚本对齐。
我在代码中犯了哪些错误?
答案 0 :(得分:0)
after researching i found some solution for Jquery include below code in webpack.config.js file is working fine for me:
module.exports = {
resolve: {
extensions: ['.ts', '.js'],
alias: {
jquery: "jquery/src/jquery"
}
}
----------
plugins: [
new webpack.ProvidePlugin({
jQuery: 'jquery',
$: 'jquery',
jquery: 'jquery'
})
]
对于bootstrap和其他第三方库,您可以直接在vendor.ts文件中导入:
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap-social/bootstrap-social.css';
import 'font-awesome/css/font-awesome.min.css';
import 'angular2-toaster/toaster.css';
import 'bootstrap/dist/js/bootstrap.min.js';
import 'angular2-jwt/angular2-jwt.js';
import '@ng-idle/core/bundles/core.umd.js';
import 'ng2-recaptcha';
import 'ng2-ckeditor';
import 'angular2-toaster/bundles/angular2-toaster.umd.js';
import 'ng2-bootstrap';
import 'crypto-js/crypto-js.js';