Yes, this question may be repeated. But I just don't get this setup working in any way.
I tried prettty much everything:
Getting the libraries directly into the index.html through a CDN.
Installing them via NPM and then adding them to angular-cli.json script field.
Importing the modules directly into my components, both with aliased JQuery (import * as $ from 'jquery') and just plain import (import 'jquery').
I tried other setups, like doing the imports in the root component, importing these libraries in various locations... but I don't get this working.
Currently, I need to get working one Bootstrap modal, and one Datepicker component which also works with JQuery, but it's being impossible for me. Sometimes I get the '$ is undefined' and sometimes I get other errors.
So now, I will ask: which is the real solution for this problem in latest Angular versions? How should I make the imports?
Thank you!
EDIT: Current situation:
Added the dependencies to the angular-cli.json file:
"styles": [
"styles.css",
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"../node_modules/font-awesome/css/font-awesome.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.bundle.min.js"
],
I try to call the .modal() function that bootstrap has to add to Jquery:
( $('#myModal')).modal({
backdrop: true,
focus: true,
show: true
})
But it just throws...:
SegmentsComponent.html:15 ERROR ReferenceError: $ is not defined
at SegmentsComponent.openModal (segments.component.ts:55)
at Object.eval [as handleEvent] (SegmentsComponent.html:15)
at handleEvent (core.js:13255)
at callWithDebugContext (core.js:14740)
at Object.debugHandleEvent [as handleEvent] (core.js:14327)
at dispatchEvent (core.js:9704)
at eval (core.js:10318)
at HTMLAnchorElement.eval (platform-browser.js:2614)
at ZoneDelegate.invokeTask (zone.js:425)
at Object.onInvokeTask (core.js:4620)
Any help?
mmmmm .. it looks very strange .. the only reason why it can gives to you $ is not defined is because you DON'T INCLUDE IT well..
so what i can suggest to you is to DOUBLE check your jquery path in the scripts :[] section ..
REMEMBER .. the path is intended from the src(or your root: entry) folder!
ALSO check the jquery version .. I saw that NPM don't include jquery when you do install bootstrap ... so install jquery manually and get the right version ..
AND in your .ts file .. have you declare var $ : any in the head of your ts file? ...
Hope it helps you!
You need to install Jquery and bootstrap (popper for Bootstrap 4) with package managers or CDN. Your .angular-cli.json file must look like this:
"scripts": [
"../node_modules/jquery/dist/jquery.js",
"../node_modules/popper.js/dist/umd/popper.js",
"../node_modules/bootstrap/dist/js/bootstrap.js"
],
Make sure these three files exist.
I found the answer, it can be solved by two methods one is included js file in index.html or ou can include like this, also you can include js as well as jquery.
ngOnInit() {
$(document).ready(function () {
$.getScript('../../assets/frontend/js/app.js', function (w) { });
}); }
Related
It has been several days now that i've been trying to make work the easy-autocomplete package with my Rails 6 application.
I followed this tutorial.
I tried some solutions, like this one but it still doesn't work.
In all my attempts the error displayed on the web console is: Uncaught TypeError: $(...).easyAutocomplete is not a function.
Here is my application.js:
require("#rails/ujs").start();
require("turbolinks").start();
require("#rails/activestorage").start();
require("channels");
require("bootstrap");
// Stylesheets
require("../stylesheets/main.scss");
require("easy-autocomplete");
I don't need to require('jquery') since it's included with the Bootstrap package. I use JQuery functions all over my app and haven't got any errors.
My application.scss:
#import 'easy-autocomplete/dist/easy-autocomplete';
#import "variables";
* {
font-family: $syne-font
}
And my custom js code:
$(document).on("turbolinks:load", function () {
var options = {
data: ["otto", "hans", "paula"],
};
$("#city_search").easyAutocomplete(options);
});
I would advise that you install jQuery using the yarn and also do he configuration in the config/webpack/environment.js. once done require the jQuery as expected from the tutorial.
Try it and it should work.
So the easy-autocomplete lib is not maintained anymore.
I did find a workaround by using the webpack-jquery-ui lib, here's an example of implementation:
app/javascript/packs/application.js
require("#rails/ujs").start();
require("turbolinks").start();
require("#rails/activestorage").start();
require("channels");
require("bootstrap");
// Stylesheets
require("../stylesheets/main.scss");
global.$ = require("jquery");
require("webpack-jquery-ui");
require("webpack-jquery-ui/css");
$(function () {
$(".my-input-automcompleted").autocomplete({
source: "/autocomplete",
});
});
But IMHO it's better to use Stimulus and the stimulus-autocomplete lib now !
I had a static website and I'm trying to kinda convert it into MEAN stack using Angular 5.
I want to add some scripts and styles for galleries, scrolling etc. to my HTML. The scripts need jQuery and I don't have to access them really they just need to run. I added them in the .angular-cli.json like so:
"styles": [
"styles.css",
"./src/app/assets/css/font-awesome-4.3.0/css/font-awesome.min.css",
"./src/app/assets/css/normalize.css",
"./src/app/assets/css/owl.carousel.css",
"./src/app/assets/css/owl.theme.css",
"./src/app/assets/css/main.css",
"./src/app/assets/css/responsive"
],
"scripts": [
"./src/app/assets/plugins/jquery-1.11.1.min.js",
"./src/app/assets/plugins/jquery.smooth-scroll.min.js",
"./src/app/assets/plugins/imagesloaded.js",
"./src/app/assets/plugins/owl.carousel.min.js",
"https://maps.googleapis.com/maps/api/js",
"./src/app/assets/plugins/jquery.waypoints.min.js",
"./src/app/assets/plugins/main.js"
],
Also added allowJs: true in the tsconfig.app.json
But I get an error when I try to run ng serve or ng build.
Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
at hasOwnProperty ()
at Object.hasProperty (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/typescript/lib/typescript.js:2229:31)
at parseConfig (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/typescript/lib/typescript.js:71815:16)
at /home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/typescript/lib/typescript.js:71721:22
at Object.parseJsonConfigFileContent (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/typescript/lib/typescript.js:71735:11)
at Object.readTsconfig (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/#angular/cli/utilities/read-tsconfig.js:8:32)
at new NgCliWebpackConfig (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/#angular/cli/models/webpack-config.js:19:42)
at Class.run (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/#angular/cli/tasks/serve.js:71:29)
at check_port_1.checkPort.then.port (/home/robin/webdevelopment/Guenters-Fahrschulen/node_modules/#angular/cli/commands/serve.js:123:26)
at
at process._tickCallback (internal/process/next_tick.js:160:7)
My linter also throws an error on $(document).ready(); but how would I replace it?
I'm trying to in include https://www.npmjs.com/package/react-bootstrap-typeahead in my project, but when I run my grunt browserify task, I get a ParseError: Unexpected token error. Full message here:
Running "browserify:dist" (browserify) task
>> /path/to/project/node_modules/react-bootstrap-typeahead/css/Typeahead.css:1
>> .bootstrap-typeahead .dropdown-menu {
>> ^
>> ParseError: Unexpected token
Warning: Error running grunt-browserify. Use --force to continue.
Aborted due to warnings.
The issue being that there is a require('/some/file.css') inside the react-bootstrap-typeahead source js.
Here is my grunt browserify task:
browserify: {
dist: {
cwd: 'build',
options: {
transform : ['browserify-css'],
alias: {
'index' : './dist/index.js',
'root' : './dist/containers/root.js',
'designs' : './dist/components/designs.js',
'addMutationForm' : './dist/components/addMutationForm.js',
'ProteinChecker': './dist/containers/ProteinChecker.js',
'configureStore': './dist/configureStore.js',
'actions' : './dist/actions.js',
'reducers' : './dist/reducers.js',
'utils': './dist/utils.js',
},
require: [
'./node_modules/isomorphic-fetch',
'./node_modules/jquery',
'./node_modules/react',
'./node_modules/react-dom',
'./node_modules/bootstrap',
'./node_modules/redux',
'./node_modules/babel-polyfill',
'./node_modules/redux-logger',
'./node_modules/redux-thunk',
'./node_modules/underscore',
'./node_modules/redux-form',
'./node_modules/react-bootstrap-typeahead'
]
},
src: ['./dist/*.js', './dist/*/*.js'],
dest: './public/build/app.js'
}
}
A few things I came across while attempting to solve the problem:
A similar SO (yet unanswered) question but using webpack, not grunt+browserify so I don't believe applicable:
Using react-bootstrap-typeahead generating CSS errors
And a closed issue on the github page of the react-bootstrap-typeahead project, but doesn't address use through grunt:
https://github.com/ericgio/react-bootstrap-typeahead/issues/2
which suggests using browserify-css transform.
I've tried to get grunt to use this transform by adding transform : ['browserify-css'] in the options field, but that didn't work. I still get the exact same error message.
I tried using browserify with the browserify-css transform on the command line to bundle up just this one library, and then include that bundle, but this leads to yet more errors down the line that I believe have to do with relative imports (and I don't think this is a good solution anyway because if I understand browserify right, it will end up including things like react twice, once for the typeahead bundle that I made on the command line and again for the actual app bundle and then the final js file is HUGE!).
Any ideas on how I can resolve this?
Thanks in advance!
So the solution it turns out was to add
"browserify": {
"transform": ["browserify-css"]
}
to the packages.json of react-bootstrap-typeahead.
It was in the browserify-css docs... (facepalm)
I recently tried to use the gulp Gist posted here:
Everything builds fine, but in the browser I get an error in the generated templates.js file:
global.Handlebars = require("handlebars");
module.exports = Ember.TEMPLATES["index"] = Ember.Handlebars.template(function anonymous(Handlebars,depth0,helpers,partials,data) {
The error claiming, basically, that 'module' is undefined...
I'm getting a strong feeling that I'm missing something extremely trivial here.
Thanks in advance
Because this causes the file to be wrap in some shim javascript:
'templates': {
path: 'public/js/templates.js',
exports: 'Ember.TEMPLATES'
},
Remove it and you'll be fine.
And requiring Ember in the prebundle is useless if you are also requiring it from your code.
Let's suppose I can access the following code:
http://localhost/web/src/js/myApp.js
Now I want to load myApp.js using requirejs from the javascript command line mode.
I did try the following but it does not work. Any ideas?
requirejs.config({
baseUrl: "http://localhost/web/src/"
});
require("js/myApp"); // Error: Module name 'js/myApp' has not been loaded yet for context: _ http://requirejs.org/docs/errors.html#notloaded
That's because require('FILENAME') is used for loading already loaded files...i don't know what's the purpose behind it. You should use:
require(['module'], function(mod) {
... do some work ...
// later, maybe if you want this (although, i don't understand why)
require('module', function(m) {
... do some work with m - the new (or old?) module!
})
});