I am new to ionic and it mode of operation. I read tutorials here and there which made me tried to create my own app. In my app I am trying to add auto-complete module using jquery-ui but when I tried running the app the following errors displayed.
I have done the following:
npm install @types/[email protected] --save-dev
npm install --save jquery jquery-ui
In my .ts, I have
import * as $ from "jquery";
import 'jqueryui';
ngAfterViewInit() {
$(document).ready(function () {
//Get search box parameter
$('#search_data').autocomplete({
source: "/api/searchStaff.php",
minLength: 1,
select: function (event, ui) {
$('#search_data').val(ui.item.value);
}
}).data('ui-autocomplete')._renderItem = function (ul, item) {
return $("<li class='ui-autocomplete-row'></li>")
.data("item.autocomplete", item)
.append(item.label)
.appendTo(ul);
};
});
}
I add jquery aliased to resolve with the plugin in the webpack.config.js
plugins: [
new webpack.ProvidePlugin({
"$": "jquery",
"jQuery": "jquery",
"window.jQuery": "jquery"
}),
resolve: {
alias: {
// bind version of jquery-ui
"jquery-ui": "jquery-ui/jquery-ui.js",
// bind to modules;
modules: path.join(__dirname, "node_modules"),
[15:33:14] ionic-app-script task: "build" [15:33:14] Error: ./node_modules/jqueryui/jquery-ui.js Module not found: Error: Can't resolve 'jquery' in 'c:\iVisitor\node_modules\jqueryui' resolve 'jquery' in 'c:\iVisitor\node_modules\jqueryui' Parsed request is a module using description file: c:\iVisitor\node_modules\jqueryui\package.json (relative path: .) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\node_modules\jqueryui\package.json (relative path: .) resolve as module looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] @ ./node_modules/jqueryui/jquery-ui.js 10:2-32 @ ./src/pages/register/register.ts @ ./src/app/app.module.ts @ ./src/app/main.ts,./src/pages/register/register.ts Module not found: Error: Can't resolve 'jquery' in 'c:\iVisitor\src\pages\register' resolve 'jquery' in 'c:\iVisitor\src\pages\register' Parsed request is a module using description file: c:\iVisitor\package.json (relative path: ./src/pages/register) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./src/pages/register) resolve as module looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] @ ./src/pages/register/register.ts 53:0-28 @ ./src/app/app.module.ts @ ./src/app/main.ts Error: ./node_modules/jqueryui/jquery-ui.js Module not found: Error: Can't resolve 'jquery' in 'c:\iVisitor\node_modules\jqueryui' resolve 'jquery' in 'c:\iVisitor\node_modules\jqueryui' Parsed request is a module using description file: c:\iVisitor\node_modules\jqueryui\package.json (relative path: .) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\node_modules\jqueryui\package.json (relative path: .) resolve as module looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] @ ./node_modules/jqueryui/jquery-ui.js 10:2-32 @ ./src/pages/register/register.ts @ ./src/app/app.module.ts @ ./src/app/main.ts,./src/pages/register/register.ts Module not found: Error: Can't resolve 'jquery' in 'c:\iVisitor\src\pages\register' resolve 'jquery' in 'c:\iVisitor\src\pages\register' Parsed request is a module using description file: c:\iVisitor\package.json (relative path: ./src/pages/register) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./src/pages/register) resolve as module looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist looking for modules in c:\iVisitor\node_modules using description file: c:\iVisitor\package.json (relative path: ./node_modules) Field 'browser' doesn't contain a valid alias configuration after using description file: c:\iVisitor\package.json (relative path: ./node_modules) using description file: c:\iVisitor\package.json (relative path: ./node_modules/jquery) no extension Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery doesn't exist .ts Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.ts doesn't exist .js Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.js doesn't exist .json Field 'browser' doesn't contain a valid alias configuration c:\iVisitor\node_modules\jquery.json doesn't exist as directory c:\iVisitor\node_modules\jquery doesn't exist [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.ts] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.js] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery.json] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] [c:\iVisitor\node_modules\jquery] @ ./src/pages/register/register.ts 53:0-28 @ ./src/app/app.module.ts @ ./src/app/main.ts at new BuildError (c:\iVisitor\node_modules@ionic\app-scripts\dist\util\errors.js:16:28) at callback (c:\iVisitor\node_modules@ionic\app-scripts\dist\webpack.js:121:28) at emitRecords.err (c:\iVisitor\node_modules\webpack\lib\Compiler.js:265:13) at Compiler.emitRecords (c:\iVisitor\node_modules\webpack\lib\Compiler.js:371:38) at emitAssets.err (c:\iVisitor\node_modules\webpack\lib\Compiler.js:258:10) at applyPluginsAsyncSeries1.err (c:\iVisitor\node_modules\webpack\lib\Compiler.js:364:12) at next (c:\iVisitor\node_modules\tapable\lib\Tapable.js:218:11) at Compiler.compiler.plugin (c:\iVisitor\node_modules\webpack\lib\performance\SizeLimitsPlugin.js:99:4) at Compiler.applyPluginsAsyncSeries1 (c:\iVisitor\node_modules\tapable\lib\Tapable.js:222:13) at Compiler.afterEmit (c:\iVisitor\node_modules\webpack\lib\Compiler.js:361:9) [ERROR] An error occurred while running subprocess ionic-app-scripts.
How can I resolve this error?