CODEWITHSUNDEEP
jqueryangular
Brian Kitt
Brian Kitt

Reputation: 695

Angular - Occasional: 'ReferenceError: $ is not defined'

I know there are similar questions, but this is not quite the same flavor. Simply because this works nearly every time, and only occasionally fails.

I have the following code in Angular.

-- at the top of the component

declare var $: any;

-- in component code during ngOnInit()

  const nav = $('header');

Here's where it gets odd. This is my header, executed on every single page. Getting hit 1,000s of times a day. It works more than 99% of the time. I started this project in Angular 5, upgraded to 6, upgraded to 7. The whole time, on rare occasions, I get the following error. Why??

I can never recreate it, nor can I figure out why it happens. I've been living with it for years, and have no clue. Any idea how to track this down? I've tried using JQUERY instead, and it makes no difference.

    ReferenceError: $ is not defined
    at HeaderComponent.push../src/app/master/controls/header/header.component.ts.HeaderComponent.ngOnInit (https://www.example.com/main.02e5859888e52b1dd87a.js:142368:9)
    at checkAndUpdateDirectiveInline (https://www.example.com/main.02e5859888e52b1dd87a.js:55800:19)
    at checkAndUpdateNodeInline (https://www.example.com/main.02e5859888e52b1dd87a.js:57064:20)
    at checkAndUpdateNode (https://www.example.com/main.02e5859888e52b1dd87a.js:57026:16)
    at prodCheckAndUpdateNode (https://www.example.com/main.02e5859888e52b1dd87a.js:57567:5)
    at Object.updateDirectives (https://www.example.com/main.02e5859888e52b1dd87a.js:140269:2632)
    at Object.updateDirectives (https://www.example.com/main.02e5859888e52b1dd87a.js:57355:72)
    at checkAndUpdateView (https://www.example.com/main.02e5859888e52b1dd87a.js:57008:14)
    at callViewAction (https://www.example.com/main.02e5859888e52b1dd87a.js:57249:21)
    at execComponentViewsAction (https://www.example.com/main.02e5859888e52b1dd87a.js:57191:13)

Upvotes: 0

Views: 492

Answers (1)

Amit
Amit

Reputation: 4350

There is chance that jQuery might be taking time to load sometimes. How you are loading jquery, Is it from CDN or from node_modules as dependency.

Best practice is to add 

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

in angular.json

PS: It is not recommended to use jQuery for this case. If you want to get element reference you can do so by ViewChild()

<header #myname>
@ViewChild('myname') header;

Upvotes: 1

Related Questions