Angular 6 + jQuery + fullpage.js

I am trying to use fullpage.js without ngx-fullapge and I am facing some issues relating to imports:

First it seems that jquery does not work, even though the package is setup...

In a very simple AppComponent class definition I have:

import { Component, OnInit } from '@angular/core';

import * as $ from 'jquery';

import * as fullpagejs from 'fullpage.js';



@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ],

})

export class AppComponent  implements OnInit {

  public items = [1, 2, 3];



  public ngOnInit() : void {

    $('#fullpage')

  }

}

with a very simple template:

<div id="fullpage">



  <div class="section" id="landing">

    Landing

  </div>



  <div class="section" *ngFor="let item of items; let i = index" id="document_{{ i }}">

    Document {{ item }}

  </div>



  <div class="section" id="general-information">

    General Information

  </div>



</div>

And the angular.json has the scripts below:

 "scripts": [

          "./node_modules/jquery/dist/jquery.min.js",

          "./node_modules/fullpage.js/dist/jquery.fullpage.min.js"

        ]

And I have the error below:

ERROR

Error: $ is not a function

I created an online project here that reproduces the issue: https://stackblitz.com/edit/angular-nrrujn

How can I use both jQuery and fullpage.js in this project?

[EDIT]

jQuery works with import $ from 'jquery'; but the fullpage() method from fullpage.js still cannot be found.
I updated the stackblitz: https://stackblitz.com/edit/angular-nrrujn

edited Jul 21 '18 at 12:16

asked Jul 18 '18 at 22:58

Ehouarn Perret

1,06011234

Try adding declare var $: any to the AppComponent.

– cgTag
Jul 19 '18 at 0:21

Now fullPage.js is available for Angular: github.com/alvarotrigo/angular-fullpage

– Alvaro
Nov 15 '18 at 16:24

add a comment |

I am trying to use fullpage.js without ngx-fullapge and I am facing some issues relating to imports:

First it seems that jquery does not work, even though the package is setup...

In a very simple AppComponent class definition I have:

import { Component, OnInit } from '@angular/core';

import * as $ from 'jquery';

import * as fullpagejs from 'fullpage.js';



@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ],

})

export class AppComponent  implements OnInit {

  public items = [1, 2, 3];



  public ngOnInit() : void {

    $('#fullpage')

  }

}

with a very simple template:

<div id="fullpage">



  <div class="section" id="landing">

    Landing

  </div>



  <div class="section" *ngFor="let item of items; let i = index" id="document_{{ i }}">

    Document {{ item }}

  </div>



  <div class="section" id="general-information">

    General Information

  </div>



</div>

And the angular.json has the scripts below:

 "scripts": [

          "./node_modules/jquery/dist/jquery.min.js",

          "./node_modules/fullpage.js/dist/jquery.fullpage.min.js"

        ]

And I have the error below:

ERROR

Error: $ is not a function

I created an online project here that reproduces the issue: https://stackblitz.com/edit/angular-nrrujn

How can I use both jQuery and fullpage.js in this project?

[EDIT]

jQuery works with import $ from 'jquery'; but the fullpage() method from fullpage.js still cannot be found.
I updated the stackblitz: https://stackblitz.com/edit/angular-nrrujn

edited Jul 21 '18 at 12:16

asked Jul 18 '18 at 22:58

Ehouarn Perret

1,06011234

Try adding declare var $: any to the AppComponent.

– cgTag
Jul 19 '18 at 0:21

Now fullPage.js is available for Angular: github.com/alvarotrigo/angular-fullpage

– Alvaro
Nov 15 '18 at 16:24

add a comment |

I am trying to use fullpage.js without ngx-fullapge and I am facing some issues relating to imports:

First it seems that jquery does not work, even though the package is setup...

In a very simple AppComponent class definition I have:

import { Component, OnInit } from '@angular/core';

import * as $ from 'jquery';

import * as fullpagejs from 'fullpage.js';



@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ],

})

export class AppComponent  implements OnInit {

  public items = [1, 2, 3];



  public ngOnInit() : void {

    $('#fullpage')

  }

}

with a very simple template:

<div id="fullpage">



  <div class="section" id="landing">

    Landing

  </div>



  <div class="section" *ngFor="let item of items; let i = index" id="document_{{ i }}">

    Document {{ item }}

  </div>



  <div class="section" id="general-information">

    General Information

  </div>



</div>

And the angular.json has the scripts below:

 "scripts": [

          "./node_modules/jquery/dist/jquery.min.js",

          "./node_modules/fullpage.js/dist/jquery.fullpage.min.js"

        ]

And I have the error below:

ERROR

Error: $ is not a function

I created an online project here that reproduces the issue: https://stackblitz.com/edit/angular-nrrujn

How can I use both jQuery and fullpage.js in this project?

[EDIT]

jQuery works with import $ from 'jquery'; but the fullpage() method from fullpage.js still cannot be found.
I updated the stackblitz: https://stackblitz.com/edit/angular-nrrujn

edited Jul 21 '18 at 12:16

asked Jul 18 '18 at 22:58

Ehouarn Perret

1,06011234

I am trying to use fullpage.js without ngx-fullapge and I am facing some issues relating to imports:

First it seems that jquery does not work, even though the package is setup...

In a very simple AppComponent class definition I have:

import { Component, OnInit } from '@angular/core';

import * as $ from 'jquery';

import * as fullpagejs from 'fullpage.js';



@Component({

  selector: 'my-app',

  templateUrl: './app.component.html',

  styleUrls: [ './app.component.css' ],

})

export class AppComponent  implements OnInit {

  public items = [1, 2, 3];



  public ngOnInit() : void {

    $('#fullpage')

  }

}

with a very simple template:

<div id="fullpage">



  <div class="section" id="landing">

    Landing

  </div>



  <div class="section" *ngFor="let item of items; let i = index" id="document_{{ i }}">

    Document {{ item }}

  </div>



  <div class="section" id="general-information">

    General Information

  </div>



</div>

And the angular.json has the scripts below:

 "scripts": [

          "./node_modules/jquery/dist/jquery.min.js",

          "./node_modules/fullpage.js/dist/jquery.fullpage.min.js"

        ]

And I have the error below:

ERROR

Error: $ is not a function

I created an online project here that reproduces the issue: https://stackblitz.com/edit/angular-nrrujn

How can I use both jQuery and fullpage.js in this project?

[EDIT]

jQuery works with import $ from 'jquery'; but the fullpage() method from fullpage.js still cannot be found.
I updated the stackblitz: https://stackblitz.com/edit/angular-nrrujn

javascript jquery angular fullpage.js

edited Jul 21 '18 at 12:16

asked Jul 18 '18 at 22:58

Ehouarn Perret

1,06011234

edited Jul 21 '18 at 12:16

asked Jul 18 '18 at 22:58

Ehouarn Perret

1,06011234

edited Jul 21 '18 at 12:16

asked Jul 18 '18 at 22:58

Ehouarn Perret

1,06011234

asked Jul 18 '18 at 22:58

Ehouarn Perret

1,06011234

asked Jul 18 '18 at 22:58

Ehouarn Perret

1,06011234

Try adding declare var $: any to the AppComponent.

– cgTag
Jul 19 '18 at 0:21

Now fullPage.js is available for Angular: github.com/alvarotrigo/angular-fullpage

– Alvaro
Nov 15 '18 at 16:24

add a comment |

Try adding declare var $: any to the AppComponent.

– cgTag
Jul 19 '18 at 0:21

Now fullPage.js is available for Angular: github.com/alvarotrigo/angular-fullpage

– Alvaro
Nov 15 '18 at 16:24

Try adding declare var $: any to the AppComponent.

– cgTag
Jul 19 '18 at 0:21

Now fullPage.js is available for Angular: github.com/alvarotrigo/angular-fullpage

– Alvaro
Nov 15 '18 at 16:24

add a comment |

3 Answers
3

active

oldest

votes

Update Nov 2018:

Now fullPage.js is available for Angular:
https://github.com/alvarotrigo/angular-fullpage

Not an expert on Angular but... perhaps you should declare $ on the window object after importing it?

What about this?

import { Component, OnInit } from '@angular/core';

import jQuery from 'jquery'; // <--- change here

import * as fullpagejs from 'fullpage.js';



if(!window.$){

    window.$ = jQuery;

}

edited Nov 15 '18 at 16:24

answered Jul 19 '18 at 14:48

Alvaro

27.9k18103244

1

import jQuery as $ from 'jquery'; is a syntax error. It doesn't even make sense to rename the default export. You ARE giving it a name.

– Lazar Ljubenović
Jul 21 '18 at 12:14

@LazarLjubenović agreed, this can be tested in the stackblitz.com/edit/angular-nrrujn

– Ehouarn Perret
Jul 21 '18 at 12:16

@LazarLjubenović yeah that shouldn't be there lol.

– Alvaro
Jul 23 '18 at 12:41

add a comment |

Make sure you have jquery.fullpage.min.js file present in the directory = './node_modules/fullpage.js/dist/jquery.fullpage.min.js'

answered Sep 2 '18 at 12:39

Param Mittal

214

Welcome to Stack Overflow! This post seems to be your first answer, and it contains code. Remember, you can add code blocks with markdown syntax and it seems much better. Check out this help center article.

– sohnryang
Sep 2 '18 at 12:44

add a comment |

The line import * as $ from 'jquery'; is definitely correct.

Make sure that jquery is actually installed in your project. Run npm install jquery@latest to install it. Then remove it from the scripts array because it doesn't belong there.

answered Jul 19 '18 at 15:09

A.S.

18412

tried to reset to the latest version and remove the paths in the scripts... but same old =/

– Ehouarn Perret
Jul 19 '18 at 19:28

@EhouarnPerret Try looking in your package-lock.json file. Is jquery in there? and is it the right version?

– A.S.
Jul 19 '18 at 19:42

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f51412089%2fangular-6-jquery-fullpage-js%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

3 Answers
3

active

oldest

votes

3 Answers
3

active

oldest

votes

Update Nov 2018:

Now fullPage.js is available for Angular:
https://github.com/alvarotrigo/angular-fullpage

Not an expert on Angular but... perhaps you should declare $ on the window object after importing it?

What about this?

import { Component, OnInit } from '@angular/core';

import jQuery from 'jquery'; // <--- change here

import * as fullpagejs from 'fullpage.js';



if(!window.$){

    window.$ = jQuery;

}

edited Nov 15 '18 at 16:24

answered Jul 19 '18 at 14:48

Alvaro

27.9k18103244

1

import jQuery as $ from 'jquery'; is a syntax error. It doesn't even make sense to rename the default export. You ARE giving it a name.

– Lazar Ljubenović
Jul 21 '18 at 12:14

@LazarLjubenović agreed, this can be tested in the stackblitz.com/edit/angular-nrrujn

– Ehouarn Perret
Jul 21 '18 at 12:16

@LazarLjubenović yeah that shouldn't be there lol.

– Alvaro
Jul 23 '18 at 12:41

add a comment |

Update Nov 2018:

Now fullPage.js is available for Angular:
https://github.com/alvarotrigo/angular-fullpage

Not an expert on Angular but... perhaps you should declare $ on the window object after importing it?

What about this?

import { Component, OnInit } from '@angular/core';

import jQuery from 'jquery'; // <--- change here

import * as fullpagejs from 'fullpage.js';



if(!window.$){

    window.$ = jQuery;

}

edited Nov 15 '18 at 16:24

answered Jul 19 '18 at 14:48

Alvaro

27.9k18103244

1

import jQuery as $ from 'jquery'; is a syntax error. It doesn't even make sense to rename the default export. You ARE giving it a name.

– Lazar Ljubenović
Jul 21 '18 at 12:14

@LazarLjubenović agreed, this can be tested in the stackblitz.com/edit/angular-nrrujn

– Ehouarn Perret
Jul 21 '18 at 12:16

@LazarLjubenović yeah that shouldn't be there lol.

– Alvaro
Jul 23 '18 at 12:41

add a comment |

Update Nov 2018:

Now fullPage.js is available for Angular:
https://github.com/alvarotrigo/angular-fullpage

Not an expert on Angular but... perhaps you should declare $ on the window object after importing it?

What about this?

import { Component, OnInit } from '@angular/core';

import jQuery from 'jquery'; // <--- change here

import * as fullpagejs from 'fullpage.js';



if(!window.$){

    window.$ = jQuery;

}

edited Nov 15 '18 at 16:24

answered Jul 19 '18 at 14:48

Alvaro

27.9k18103244

Update Nov 2018:

Now fullPage.js is available for Angular:
https://github.com/alvarotrigo/angular-fullpage

Not an expert on Angular but... perhaps you should declare $ on the window object after importing it?

What about this?

import { Component, OnInit } from '@angular/core';

import jQuery from 'jquery'; // <--- change here

import * as fullpagejs from 'fullpage.js';



if(!window.$){

    window.$ = jQuery;

}

edited Nov 15 '18 at 16:24

answered Jul 19 '18 at 14:48

Alvaro

27.9k18103244

edited Nov 15 '18 at 16:24

answered Jul 19 '18 at 14:48

Alvaro

27.9k18103244

answered Jul 19 '18 at 14:48

Alvaro

27.9k18103244

answered Jul 19 '18 at 14:48

Alvaro

27.9k18103244

1

import jQuery as $ from 'jquery'; is a syntax error. It doesn't even make sense to rename the default export. You ARE giving it a name.

– Lazar Ljubenović
Jul 21 '18 at 12:14

@LazarLjubenović agreed, this can be tested in the stackblitz.com/edit/angular-nrrujn

– Ehouarn Perret
Jul 21 '18 at 12:16

@LazarLjubenović yeah that shouldn't be there lol.

– Alvaro
Jul 23 '18 at 12:41

add a comment |

1

import jQuery as $ from 'jquery'; is a syntax error. It doesn't even make sense to rename the default export. You ARE giving it a name.

– Lazar Ljubenović
Jul 21 '18 at 12:14

@LazarLjubenović agreed, this can be tested in the stackblitz.com/edit/angular-nrrujn

– Ehouarn Perret
Jul 21 '18 at 12:16

@LazarLjubenović yeah that shouldn't be there lol.

– Alvaro
Jul 23 '18 at 12:41

import jQuery as $ from 'jquery'; is a syntax error. It doesn't even make sense to rename the default export. You ARE giving it a name.

– Lazar Ljubenović
Jul 21 '18 at 12:14

@LazarLjubenović agreed, this can be tested in the stackblitz.com/edit/angular-nrrujn

– Ehouarn Perret
Jul 21 '18 at 12:16

@LazarLjubenović yeah that shouldn't be there lol.

– Alvaro
Jul 23 '18 at 12:41

add a comment |

Make sure you have jquery.fullpage.min.js file present in the directory = './node_modules/fullpage.js/dist/jquery.fullpage.min.js'

answered Sep 2 '18 at 12:39

Param Mittal

214

Welcome to Stack Overflow! This post seems to be your first answer, and it contains code. Remember, you can add code blocks with markdown syntax and it seems much better. Check out this help center article.

– sohnryang
Sep 2 '18 at 12:44

add a comment |

Make sure you have jquery.fullpage.min.js file present in the directory = './node_modules/fullpage.js/dist/jquery.fullpage.min.js'

answered Sep 2 '18 at 12:39

Param Mittal

214

Welcome to Stack Overflow! This post seems to be your first answer, and it contains code. Remember, you can add code blocks with markdown syntax and it seems much better. Check out this help center article.

– sohnryang
Sep 2 '18 at 12:44

add a comment |

Make sure you have jquery.fullpage.min.js file present in the directory = './node_modules/fullpage.js/dist/jquery.fullpage.min.js'

answered Sep 2 '18 at 12:39

Param Mittal

214

Make sure you have jquery.fullpage.min.js file present in the directory = './node_modules/fullpage.js/dist/jquery.fullpage.min.js'

answered Sep 2 '18 at 12:39

Param Mittal

214

answered Sep 2 '18 at 12:39

Param Mittal

214

answered Sep 2 '18 at 12:39

Param Mittal

214

answered Sep 2 '18 at 12:39

Param Mittal

214

Welcome to Stack Overflow! This post seems to be your first answer, and it contains code. Remember, you can add code blocks with markdown syntax and it seems much better. Check out this help center article.

– sohnryang
Sep 2 '18 at 12:44

add a comment |

Welcome to Stack Overflow! This post seems to be your first answer, and it contains code. Remember, you can add code blocks with markdown syntax and it seems much better. Check out this help center article.

– sohnryang
Sep 2 '18 at 12:44

Welcome to Stack Overflow! This post seems to be your first answer, and it contains code. Remember, you can add code blocks with markdown syntax and it seems much better. Check out this help center article.

– sohnryang
Sep 2 '18 at 12:44

add a comment |

The line import * as $ from 'jquery'; is definitely correct.

Make sure that jquery is actually installed in your project. Run npm install jquery@latest to install it. Then remove it from the scripts array because it doesn't belong there.

answered Jul 19 '18 at 15:09

A.S.

18412

tried to reset to the latest version and remove the paths in the scripts... but same old =/

– Ehouarn Perret
Jul 19 '18 at 19:28

@EhouarnPerret Try looking in your package-lock.json file. Is jquery in there? and is it the right version?

– A.S.
Jul 19 '18 at 19:42

add a comment |

The line import * as $ from 'jquery'; is definitely correct.

Make sure that jquery is actually installed in your project. Run npm install jquery@latest to install it. Then remove it from the scripts array because it doesn't belong there.

answered Jul 19 '18 at 15:09

A.S.

18412

tried to reset to the latest version and remove the paths in the scripts... but same old =/

– Ehouarn Perret
Jul 19 '18 at 19:28

@EhouarnPerret Try looking in your package-lock.json file. Is jquery in there? and is it the right version?

– A.S.
Jul 19 '18 at 19:42

add a comment |

The line import * as $ from 'jquery'; is definitely correct.

Make sure that jquery is actually installed in your project. Run npm install jquery@latest to install it. Then remove it from the scripts array because it doesn't belong there.

answered Jul 19 '18 at 15:09

A.S.

18412

The line import * as $ from 'jquery'; is definitely correct.

Make sure that jquery is actually installed in your project. Run npm install jquery@latest to install it. Then remove it from the scripts array because it doesn't belong there.

answered Jul 19 '18 at 15:09

A.S.

18412

answered Jul 19 '18 at 15:09

A.S.

18412

answered Jul 19 '18 at 15:09

A.S.

18412

answered Jul 19 '18 at 15:09

A.S.

18412

tried to reset to the latest version and remove the paths in the scripts... but same old =/

– Ehouarn Perret
Jul 19 '18 at 19:28

@EhouarnPerret Try looking in your package-lock.json file. Is jquery in there? and is it the right version?

– A.S.
Jul 19 '18 at 19:42

add a comment |

tried to reset to the latest version and remove the paths in the scripts... but same old =/

– Ehouarn Perret
Jul 19 '18 at 19:28

@EhouarnPerret Try looking in your package-lock.json file. Is jquery in there? and is it the right version?

– A.S.
Jul 19 '18 at 19:42

tried to reset to the latest version and remove the paths in the scripts... but same old =/

– Ehouarn Perret
Jul 19 '18 at 19:28

@EhouarnPerret Try looking in your package-lock.json file. Is jquery in there? and is it the right version?

– A.S.
Jul 19 '18 at 19:42

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Vfrdtyky