How to add JQuery in a DotNet generated Angular project?

Question

I've to do some initialization for my theme after the view has been initialized. I've implemented AfterViewInit, I've managed to import jquery:

import * as $ from 'jquery';

But now I need to execute this:

ngAfterViewInit() {
    $(document).trigger('nifty.ready');
}

And I've trouble, because it seems that at this point, document is not known. I guess I should have another import, but I can't find from where? My whole app.component.ts:

import { Component, AfterViewInit } from '@angular/core';
import * as $ from 'jquery';

@Component({
    selector: 'app',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
    ngAfterViewInit() {
        $(document).trigger('nifty.ready');
    }
}

The error I get:

Exception: Call to Node module failed with error: TypeError: Cannot read property 'document' of undefined at module.exports.module.exports (E:\My\Clients\AppClientApp\dist\vendor.js:12879:12) at AppComponent.ngAfterViewInit

EDIT

You can find here the whole web app part.

EDIT2 In fact I've the impression that jquery is not initialized properly at all, once loaded(without error), window.jquery return undefined... any idea why?

Post your full code, looks like you are using document in a node module which does not exist — Trash Can
– Trash Can, Commented Apr 14, 2017 at 6:43
@Dummy : If I remove the $(document)... line, everything is working. I added the whole class — J4N
– J4N, Commented Apr 14, 2017 at 6:47
Try import $ from 'jquery'; I use document just fine inside ngOnInit in my app — Trash Can
– Trash Can, Commented Apr 14, 2017 at 6:49
"document" reference works fine in a typescript application. Did you try to rename $ -> J — Karbos 538
– Karbos 538, Commented Apr 14, 2017 at 6:50
@Dummy, I tried, but I still get the Call to Node module failed with error: ReferenceError: document is not defined — J4N
– J4N, Commented Apr 14, 2017 at 6:52

Dmitrij Kuba · Accepted Answer · 2017-04-14 08:08:50Z

1

You can inject the document in your component.

https://angular.io/docs/ts/latest/api/platform-browser/index/DOCUMENT-let.html

import { Component, AfterViewInit, Inject } from '@angular/core';
import {DOCUMENT} from "@angular/platform-browser";

@Component({
  selector: 'app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  constructor(@Inject(DOCUMENT) private document) {
  }
}

answered Apr 14, 2017 at 8:08

Dmitrij Kuba

1,03810 silver badges14 bronze badges

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

2 Comments

J4N Over a year ago

I think this is a step forward, now I've another error: Call to Node module failed with error: Error: jQuery requires a window with a document

JRS Over a year ago

I have the same error: "jQuery requires a window with a document". Has anyone figured out how to address this error? I got this far using import * as $ from 'jquery' in the app.component.ts file, but do not know how to get past this.

Ajey · Accepted Answer · 2017-04-14 06:41:01Z

0

Instead of importing jquery try this -

declare var jQuery:any;

jQuery(document);

console.log jQuery(document) to be sure

P.S make sure jquery is available on the window scope!

answered Apr 14, 2017 at 6:41

Ajey

8,25212 gold badges66 silver badges89 bronze badges

5 Comments

J4N Over a year ago

I get some Exception: Call to Node module failed with error: ReferenceError: jQuery is not defined now. What do you mean by available on the window scope? How do I do that?

Ajey Over a year ago

How are you installing jquery and how does your build system look like?

Ajey Over a year ago

Most probably I think you are getting the error because jquery is not available on window scope

J4N Over a year ago

jquery is installed through NPM, and included within the webpack vendor list

J4N Over a year ago

You can find the webpack.vendor.js here: github.com/jgrossrieder/Astro/blob/master/Clients/… This is my actual version, I just commented the call to jquery.

Karbos 538 · Accepted Answer · 2017-04-18 12:35:11Z

0

I took a look to your project. Well, I didn't test all the .Net features, but I guess your webpack config misses a plugin provider for jQuery (used to be done by angular-cli).

So you ever done :

npm install jquery --save

Try this :

npm install @types/jquery --save-dev

And then add the jquery plugin provider to your webpack.config.js :

  plugins: [
      new webpack.ProvidePlugin({
        $: 'jquery',
        jQuery: 'jquery'
      })
    ]

Finally import it as follow :

import "jquery";
declare var $: any;

edited Apr 18, 2017 at 12:35

answered Apr 14, 2017 at 9:11

Karbos 538

3,0752 gold badges25 silver badges37 bronze badges

4 Comments

J4N Over a year ago

I'm not sure to understand, the jquery seems to be listed as a npm dependency already, no? and I just saw now there a jquery provide plugin in webpack.config.vendor.js:

new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery' }), // Maps these identifiers to the jQuery package (because Bootstrap expects it to be a global variable)

Karbos 538 Over a year ago

Right. I didn't see it. So you may have jquery as a global variable. Try to remove your import * as $ from 'jquery'; and eventually check your are not installing 2 jquery packages...

J4N Over a year ago

if I remove it, I've this: Exception: Call to Node module failed with error: ReferenceError: jquery is not defined

Karbos 538 Over a year ago

Ok just try another suggestion that works for me (I edited my answer)

Collectives™ on Stack Overflow

How to add JQuery in a DotNet generated Angular project?

3 Answers 3

2 Comments

5 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

5 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related