Angular-cli: Importing jQuery angular-cli webpack

[ziracmo]

Hi everyone,

I'm actually working with :
angular-cli: 1.0.0-beta.19-3
node: 6.8.1
os: linux x64

I'm working on an app created with the Angular-CLI and i'm using materialize-css. I actually want to use the modal from angular2-materialize but i have this error

k.velocity is not a function

My point is webpack is not importing jQuery correctly and here is my angular-cli.json to help you

"styles": [
        "styles.css"
      ],
"scripts": [
        "../node_modules/jquery/dist/jquery.min.js",
        "../node_modules/materialize-css/dist/js/materialize.min.js
 ]

I'm just asking , is this an issue for this angular-cli version or just a problem in my imports.

The dependencies version are

    "materialize-css": "^0.97.7",
    "angular2-materialize": "6.0.0",
    "jquery": "^2.2.4",

Thanks for your help !

[Meligy]

Try calling jQuery like this:

import $ from 'jquery/dist/jquery';

[rastographics]

This issue will explain what you need to do:
https://github.com/InfomediaLtd/angular2-materialize/issues/111

Basically, make sure your angular-cli.json and app.module is setup like in this example: https://github.com/pragdev/angular_example

Also make sure you do NOT import materialize-css or angular2-materialize in your main.ts file.

[filipesilva]

Closed as it seems to be resolved.

[Meligy]

For anyone coming here via search engines, I have documented using jQuery with Angular CLI here:

https://www.gurustop.net/blog/2016/11/18/3821/jquery-angular2-angularcli-how-to

[almgwary]

For any one want to import JQuery one time, cross the project .

1. Open .angular-cli.json.

2. Add the needed script files to apps[0].scripts:

      "scripts": [
        "../node_modules/jquery/dist/jquery.js",
      ], 

1. Open src/typings.d.ts
2. Declare jQuery

      declare var jQuery: any;

then you can use jQuery any where

Note jQuery is the name exported form node_modules/jquery/dist/jquery.js

This is official wiki :
https://github.com/angular/angular-cli/wiki/stories-global-lib

[icarlosmendez]

@almgwary, Awesome work bro! That was killing my enthusiasm! Couldn't get past it for a bit but with your keen observation I'm back on the devTrack! Thanks!

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}