The tutorial I was following, used jQuery inside typings folder used
/// <reference path="../typings/tsd.d.ts" />
inside app.component but did not work.
Tried import the library in side index.html through CDN, then use
declare var $:any; still not working
Installed jQuery through NPM and it to path inside system.config.ts like the following
paths: {
// paths serve as alias
'npm:': 'node_modules/',
'jquery:': 'node_modules/jquery/dist/jquery.slim.min.js'
},
still no clue
Update:
Now I installed angular via angular-cli. I do not 404 error, but the app still not working. It is supposed to output the keyup in the console
https://plnkr.co/edit/8HW67qLUF3t8zmTigXH6?p=preview
You mentioned you were just using a tutorial, so, not attached to the SystemJS config itself.
If you are using the Angular CLI instead (my personal recommendation), you can do it as follows:
Install jQuery, the actual library
npm install jquery --save
Install jQuery TypeScript autocomplete
npm install #types/jquery --save-dev
Then go to the ./angular-cli.json file at the root of your Angular CLI project folder, and find the scripts: [] property, add this inside it:
"../node_modules/jquery/dist/jquery.min.js"
(or use the slim version if that's your cup of tea, keep the rest of the path as-is)
After that, jQuery will be available for you as a global variable. You can log jQuery.fn.jquery (which brings jQuery's version) to ensure it's working brilliantly.
P.S.
If you want to use Webpack directly, or gulp, we need to see a sample of your config file, or which project seed did you used to create the project (applicable to Webpack and Gulp projects).
Jquery is awesome when you want to just do a simple DOM manipulation, i feel its one of the major drawbacks for Angular, simple DOM accessing in one line would be great. Here ya go. Load Jquery in your index.html file. Also you need to include the definitions file to get the Jquery functions to work inside typescript functions.
<script type="text/javascript" src="/assets/jquery-3.1.1.min.js" async></script>
Related
I have to include https://www.npmjs.com/package/vue2-daterange-picker in my project made with Kendo, Vue, .Net, Angular and jQuery(Yes it's a lot).
<script src="https://unpkg.com/vue2-daterange-picker#0.5.1/dist/vue2-daterange-picker.umd.min.js"></script>
I am including it via this in my scripts and when I try to use, it throws error Uncaught ReferenceError: DateRangePicker is not defined.
I have even declared it in my js file
Vue.component('date-range-picker', DateRangePicker)
How to resolve this?
I am also using bundles.Add(new ScriptBundle()) but I am unable to add the dependency through that also.
As the documentation says. This script is installed via npm or yarn which means you need some kind of bundler, like webpack to build your dependencies and your scripts (e.g. into one file).
Fact that you're using jQuery, KendoUI, Vue and Angular and not using any bundler is a little weird. It seems that if you want to use vue2-datepicker-range you'll need to use bundler of some sort.
In the demo html page downloaded from the 'Trying Out React' page, they use the following CDN to bring in babel.js:
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
Seems like React knows to automatically use this library.
But if I've installed babel using npm install babel-cli Where can I find this 'babel.js' file?
<script src="node_modules/babel-cli/[babel.js?]"></script>
Am I thinking about this wrong?
It sounds like you now need to compile the script(s) you're using which require Babel, as described in the Usage guide: https://babeljs.io/docs/usage/cli/
You may need to use the "--out-file" to reference later in your HTML file.
I installed bootstrap via npm and i'd like to require it via browserify, so I use:
require('bootstrap');
But there are 2 problems here:
It takes the non minified version of bootstrap
I would also like to include the bootstrap.tpl.min file
How can i do it?
Unfortunately browserify won't solve either of those problems for you. NPM packages are meant to be small and solve one problem well and browserify's domain is resolving all the dependencies you require and packaging them up into one file for the browser.
Minification of your bundle should happen as part of your build step using gulp or grunt using a package like uglify.
Including a template file will also require some additional work if it's not included in what's exported from bootstrap. You can either require the specific file from the module if you need access to it in code, or you could copy it to the directory that you're serving up either with your build tool or using bower
I'm trying to build the material-ui (material-ui.com) javascript so that I can include it in my project and use the react components. I've been using browserify to bundle all the javascript into a single file, which I then include in my HTML file. So, in the material-ui/lib directory (which is where the JSX-transformed JS seems to live -- I'm very new to NPM bundles + browserify etc), I run
browserify index.js -o material-ui.js -r material-ui
I then include that material-ui.js file in my HTML.
But then when I try writing require('material-ui') in my javascript in the HTML page I get "Cannot find module 'material-ui'".
I don't really understand what browserify is meant to be doing, what the require function is doing, and how I'm meant to reference any of the material-ui react classes. Thanks!
So I just managed to solve this. Browserify was creating a require() function but not the material-ui module because I was calling it from the wrong directory. Calling it from the npm's module root without specifying a starting .js point somehow made it actually work, allowing me to use require('material-ui') without any errors.
I'm using ember app kit to create an ember.js app. It's including jquery for me which works great when I'm running the as a standalone app using grunt server. However I would like to use grunt dist to compile it all down to a few single files for inclusion in another app. This other app already includes jquery so I would like to exclude jquery from being compiled/minified in with grunt dist. Short of deleting jquery from the vendor folder is there a good way to do this?
Ember App Kit uses bower to install/remove the packages. Remove $ from bower.json
If jquery is managed by Bower in your case, you'd want to run
bower uninstall jquery
http://bower.io/#uninstalling-packages
So as it turns out, I didn't actually need to use bower at all. While doing a
bower uninstall jquery
would indeed remove jquery from the vendor dir, and adding the bower.json would keep it from coming back, neither of these things would prevent it from getting added to my compiled, minified js that results from a
grunt dist
What I finally figured out is that the index.html has special comment blocks that dictate what grunt decides to include. Specifically the
<!-- build:js(tmp/result) /assets/vendor.min.js -->
dictates what gets included in the vendor.min.js output. In my case I simply removed jquery from this block. Another option would be to keep it in the block but include it in the
<!-- #if dist=false -->
block. Hope this helps anybody else with the same issue.