Uncaught Reference error $ is not defined in Angular

Question

I am having some jquery script in "/src/assets/js/auth.js".

I have included the file and jquery plugin in angular.cli.json file.

angular.cli.json:

"scripts": [
    "../src/assets/js/auth.js",
    "../../node_modules/jquery/dist/jquery.min.js"
  ],

Finally I have imported jquery in the app.component.ts.

app.component.ts:

import * as $ from 'jquery';

To make sure whether jquery works or not, I have put the jquery code in ngOnInit() {} function and its works well.

But when I am placing it as an external js file, I will always return the error: Uncaught Reference error $ is not defined

Please someone help me to fix this issue.

You should try this answer, worked well for Angular 10 stackoverflow.com/a/45573919/11156666 — okan
– okan, Commented May 30, 2021 at 9:34

David · Accepted Answer · 2018-04-17 08:11:38Z

3

You need to include jquery file before the plugin

"scripts": [
"../../node_modules/jquery/dist/jquery.min.js"
"../src/assets/js/auth.js",
  ],

And replace

import * as $ from 'jquery';

with

declare let $: any;

Otherwise, jquery will work but $ will not contain the plugin's function

answered Apr 17, 2018 at 8:11

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

1 Answer 1