jQuery is not defined in js file under assets/js/*.js

[johnqiuwan]

OS?

Windows 8.1

Versions.

ng version: 1.0.0-beta.22-1

node version: 5.10.1

Repro steps.

1. the project created with angular-cli (ng new ...)

2. Included jquery and boostrap basded on the steps in doc, and everything is working

3. Added a "plugins.js" file under "assets/js/plugins.js" folder

4. Included "plugins.js" file before the tag in index.html file

5. ng server

6. chrome developer console shows "jQuery is not definded" @plugins.js

The log given by the failure.

jQuery is not defined @plugins.js

Mention any other details that might be useful.

The code in "plugins.js" is something like

jQuery.easing.jswing=jQuery.easing.swing;jQuery.extend(jQuery.easing,{ ...

[hassanasad]

If you are using bootstrap from NPM, i believe you can call it from node-packages.

For instance, i am using bootstrap.min.css from angular-cli.json:

...
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
   "../node_modules/bootstrap/dist/css/bootstrap.min.css" <- LIKE THIS
],
"scripts": [],
...      

Perhaps you can try by using the scripts argument.

P.S: Its actually not recommended to use jQuery with Angular2 projects as DOM manipulation is handled by Angular. If you want to use bootstrap, try using the ng2-bootstrap npm package with Angular

[filipesilva]

@johnqiuwan you shouldn't add script tags directly to index.html because the build system cannot know about them. Instead, try adding it in the scripts array. That will ensure it will get bundled and loaded correctly.

[angular-automatic-lock-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.}