Angular 6 and spinners





.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty{ height:90px;width:728px;box-sizing:border-box;
}







-1















I can't seen to get any spinners working in my angular 6 (now 7 i think) project. (using vs2017)



I am currently trying this one = https://www.npmjs.com/package/ng4-loading-spinner



And while it all seemed to npm install ok (other than getting angualr 6.0.0 dependency warnings) ... nothing happens.



in my module



import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]


In my component



import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
...
constructor(private spinnerService: Ng4LoadingSpinnerService...)


and in the method...



getDetails(){this.spinnerService.show();...}


And in the html...



<ng4-loading-spinner> </ng4-loading-spinner>


in the package.json...



"dependencies": {"ng4-loading-spinner": "^1.2.3",...}


I have tried the spinner tag in both the component html using it and in the base 'grand parent' component...



nothing ever shows up... no errors, no flash, nothing...










share|improve this question























  • In which module exactly you are importing Ng4LoadingSpinnerModule to ?

    – Sunil Singh
    Nov 16 '18 at 20:41











  • perhaps the double array from the import in your NgModule is the issue, try: imports: [ Ng4LoadingSpinnerModule.forRoot() ]. But perhaps that's just a typo while making this question

    – PierreDuc
    Nov 16 '18 at 20:41











  • Add loading text and check if you could see anything <ng4-loading-spinner [loadingText]="'Please wait...'"> </ng4-loading-spinner>

    – Sunil Singh
    Nov 16 '18 at 20:46













  • I only have 1 module = the Entity.module.ts All other components source that. Thus the Ng4LoadingSpinnerModule is there...

    – RenleyRenfield
    Nov 16 '18 at 22:14











  • I removed the extra from the module import statement = still no spinner shows...

    – RenleyRenfield
    Nov 16 '18 at 22:19


















-1















I can't seen to get any spinners working in my angular 6 (now 7 i think) project. (using vs2017)



I am currently trying this one = https://www.npmjs.com/package/ng4-loading-spinner



And while it all seemed to npm install ok (other than getting angualr 6.0.0 dependency warnings) ... nothing happens.



in my module



import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]


In my component



import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
...
constructor(private spinnerService: Ng4LoadingSpinnerService...)


and in the method...



getDetails(){this.spinnerService.show();...}


And in the html...



<ng4-loading-spinner> </ng4-loading-spinner>


in the package.json...



"dependencies": {"ng4-loading-spinner": "^1.2.3",...}


I have tried the spinner tag in both the component html using it and in the base 'grand parent' component...



nothing ever shows up... no errors, no flash, nothing...










share|improve this question























  • In which module exactly you are importing Ng4LoadingSpinnerModule to ?

    – Sunil Singh
    Nov 16 '18 at 20:41











  • perhaps the double array from the import in your NgModule is the issue, try: imports: [ Ng4LoadingSpinnerModule.forRoot() ]. But perhaps that's just a typo while making this question

    – PierreDuc
    Nov 16 '18 at 20:41











  • Add loading text and check if you could see anything <ng4-loading-spinner [loadingText]="'Please wait...'"> </ng4-loading-spinner>

    – Sunil Singh
    Nov 16 '18 at 20:46













  • I only have 1 module = the Entity.module.ts All other components source that. Thus the Ng4LoadingSpinnerModule is there...

    – RenleyRenfield
    Nov 16 '18 at 22:14











  • I removed the extra from the module import statement = still no spinner shows...

    – RenleyRenfield
    Nov 16 '18 at 22:19














-1












-1








-1








I can't seen to get any spinners working in my angular 6 (now 7 i think) project. (using vs2017)



I am currently trying this one = https://www.npmjs.com/package/ng4-loading-spinner



And while it all seemed to npm install ok (other than getting angualr 6.0.0 dependency warnings) ... nothing happens.



in my module



import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]


In my component



import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
...
constructor(private spinnerService: Ng4LoadingSpinnerService...)


and in the method...



getDetails(){this.spinnerService.show();...}


And in the html...



<ng4-loading-spinner> </ng4-loading-spinner>


in the package.json...



"dependencies": {"ng4-loading-spinner": "^1.2.3",...}


I have tried the spinner tag in both the component html using it and in the base 'grand parent' component...



nothing ever shows up... no errors, no flash, nothing...










share|improve this question














I can't seen to get any spinners working in my angular 6 (now 7 i think) project. (using vs2017)



I am currently trying this one = https://www.npmjs.com/package/ng4-loading-spinner



And while it all seemed to npm install ok (other than getting angualr 6.0.0 dependency warnings) ... nothing happens.



in my module



import { Ng4LoadingSpinnerModule } from 'ng4-loading-spinner';
imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]


In my component



import { Ng4LoadingSpinnerService } from 'ng4-loading-spinner';
...
constructor(private spinnerService: Ng4LoadingSpinnerService...)


and in the method...



getDetails(){this.spinnerService.show();...}


And in the html...



<ng4-loading-spinner> </ng4-loading-spinner>


in the package.json...



"dependencies": {"ng4-loading-spinner": "^1.2.3",...}


I have tried the spinner tag in both the component html using it and in the base 'grand parent' component...



nothing ever shows up... no errors, no flash, nothing...







angular loading






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 16 '18 at 20:32









RenleyRenfieldRenleyRenfield

1161211




1161211













  • In which module exactly you are importing Ng4LoadingSpinnerModule to ?

    – Sunil Singh
    Nov 16 '18 at 20:41











  • perhaps the double array from the import in your NgModule is the issue, try: imports: [ Ng4LoadingSpinnerModule.forRoot() ]. But perhaps that's just a typo while making this question

    – PierreDuc
    Nov 16 '18 at 20:41











  • Add loading text and check if you could see anything <ng4-loading-spinner [loadingText]="'Please wait...'"> </ng4-loading-spinner>

    – Sunil Singh
    Nov 16 '18 at 20:46













  • I only have 1 module = the Entity.module.ts All other components source that. Thus the Ng4LoadingSpinnerModule is there...

    – RenleyRenfield
    Nov 16 '18 at 22:14











  • I removed the extra from the module import statement = still no spinner shows...

    – RenleyRenfield
    Nov 16 '18 at 22:19



















  • In which module exactly you are importing Ng4LoadingSpinnerModule to ?

    – Sunil Singh
    Nov 16 '18 at 20:41











  • perhaps the double array from the import in your NgModule is the issue, try: imports: [ Ng4LoadingSpinnerModule.forRoot() ]. But perhaps that's just a typo while making this question

    – PierreDuc
    Nov 16 '18 at 20:41











  • Add loading text and check if you could see anything <ng4-loading-spinner [loadingText]="'Please wait...'"> </ng4-loading-spinner>

    – Sunil Singh
    Nov 16 '18 at 20:46













  • I only have 1 module = the Entity.module.ts All other components source that. Thus the Ng4LoadingSpinnerModule is there...

    – RenleyRenfield
    Nov 16 '18 at 22:14











  • I removed the extra from the module import statement = still no spinner shows...

    – RenleyRenfield
    Nov 16 '18 at 22:19

















In which module exactly you are importing Ng4LoadingSpinnerModule to ?

– Sunil Singh
Nov 16 '18 at 20:41





In which module exactly you are importing Ng4LoadingSpinnerModule to ?

– Sunil Singh
Nov 16 '18 at 20:41













perhaps the double array from the import in your NgModule is the issue, try: imports: [ Ng4LoadingSpinnerModule.forRoot() ]. But perhaps that's just a typo while making this question

– PierreDuc
Nov 16 '18 at 20:41





perhaps the double array from the import in your NgModule is the issue, try: imports: [ Ng4LoadingSpinnerModule.forRoot() ]. But perhaps that's just a typo while making this question

– PierreDuc
Nov 16 '18 at 20:41













Add loading text and check if you could see anything <ng4-loading-spinner [loadingText]="'Please wait...'"> </ng4-loading-spinner>

– Sunil Singh
Nov 16 '18 at 20:46







Add loading text and check if you could see anything <ng4-loading-spinner [loadingText]="'Please wait...'"> </ng4-loading-spinner>

– Sunil Singh
Nov 16 '18 at 20:46















I only have 1 module = the Entity.module.ts All other components source that. Thus the Ng4LoadingSpinnerModule is there...

– RenleyRenfield
Nov 16 '18 at 22:14





I only have 1 module = the Entity.module.ts All other components source that. Thus the Ng4LoadingSpinnerModule is there...

– RenleyRenfield
Nov 16 '18 at 22:14













I removed the extra from the module import statement = still no spinner shows...

– RenleyRenfield
Nov 16 '18 at 22:19





I removed the extra from the module import statement = still no spinner shows...

– RenleyRenfield
Nov 16 '18 at 22:19












2 Answers
2






active

oldest

votes


















0














My guess would be you're importing it incorrectly and have an extra .



Try imports: [Ng4LoadingSpinnerModule.forRoot(), ...] instead of imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]






share|improve this answer
























  • I removed the extra from the module import statement = still no spinner shows...

    – RenleyRenfield
    Nov 16 '18 at 22:19











  • Do you have the html component in your root element? Maybe it's being blocked by something on top of it. In addition, is your browser console outputting any errors? Are you importing it correctly in your app.module.ts?

    – Guillermo Aguirre
    Nov 19 '18 at 13:37













  • After trying everything everyone suggested here, it didn't work. So I went home, rested on it, came back in, tidied up the code a little, and did an ng build. Now it works. :P SO something was out of place or in wrong spot. I am not sure which or what, but in general this answer and the other suggestions for where i place the tags were likely correct.

    – RenleyRenfield
    Nov 19 '18 at 17:11











  • Ah, just figured it out... stoopid me. I had the tag and the call for the search component on a click event, which navigated away to other component, and thus hiding the component that has the spinner tag, and thus never showing the spinner.... my bad :P

    – RenleyRenfield
    Nov 19 '18 at 17:19











  • Great to hear everything worked out in the end!

    – Guillermo Aguirre
    Nov 20 '18 at 16:04



















0














My best guess would be that the problem is due to where you are placing your html. Have you put the ng4-loading-spinner element within your app.component.html file?



Take a look at this working demo SlackBlitz and see if it's of any help.






share|improve this answer
























  • I tried moving it to the app.component level and that also did not work.

    – RenleyRenfield
    Nov 16 '18 at 22:33











  • Can you reproduce your issue on SlackBlitz at all?

    – Viqas
    Nov 16 '18 at 23:10












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


















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

Post as a guest















Required, but never shown

























2 Answers
2






active

oldest

votes








2 Answers
2






active

oldest

votes









active

oldest

votes






active

oldest

votes









0














My guess would be you're importing it incorrectly and have an extra .



Try imports: [Ng4LoadingSpinnerModule.forRoot(), ...] instead of imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]






share|improve this answer
























  • I removed the extra from the module import statement = still no spinner shows...

    – RenleyRenfield
    Nov 16 '18 at 22:19











  • Do you have the html component in your root element? Maybe it's being blocked by something on top of it. In addition, is your browser console outputting any errors? Are you importing it correctly in your app.module.ts?

    – Guillermo Aguirre
    Nov 19 '18 at 13:37













  • After trying everything everyone suggested here, it didn't work. So I went home, rested on it, came back in, tidied up the code a little, and did an ng build. Now it works. :P SO something was out of place or in wrong spot. I am not sure which or what, but in general this answer and the other suggestions for where i place the tags were likely correct.

    – RenleyRenfield
    Nov 19 '18 at 17:11











  • Ah, just figured it out... stoopid me. I had the tag and the call for the search component on a click event, which navigated away to other component, and thus hiding the component that has the spinner tag, and thus never showing the spinner.... my bad :P

    – RenleyRenfield
    Nov 19 '18 at 17:19











  • Great to hear everything worked out in the end!

    – Guillermo Aguirre
    Nov 20 '18 at 16:04
















0














My guess would be you're importing it incorrectly and have an extra .



Try imports: [Ng4LoadingSpinnerModule.forRoot(), ...] instead of imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]






share|improve this answer
























  • I removed the extra from the module import statement = still no spinner shows...

    – RenleyRenfield
    Nov 16 '18 at 22:19











  • Do you have the html component in your root element? Maybe it's being blocked by something on top of it. In addition, is your browser console outputting any errors? Are you importing it correctly in your app.module.ts?

    – Guillermo Aguirre
    Nov 19 '18 at 13:37













  • After trying everything everyone suggested here, it didn't work. So I went home, rested on it, came back in, tidied up the code a little, and did an ng build. Now it works. :P SO something was out of place or in wrong spot. I am not sure which or what, but in general this answer and the other suggestions for where i place the tags were likely correct.

    – RenleyRenfield
    Nov 19 '18 at 17:11











  • Ah, just figured it out... stoopid me. I had the tag and the call for the search component on a click event, which navigated away to other component, and thus hiding the component that has the spinner tag, and thus never showing the spinner.... my bad :P

    – RenleyRenfield
    Nov 19 '18 at 17:19











  • Great to hear everything worked out in the end!

    – Guillermo Aguirre
    Nov 20 '18 at 16:04














0












0








0







My guess would be you're importing it incorrectly and have an extra .



Try imports: [Ng4LoadingSpinnerModule.forRoot(), ...] instead of imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]






share|improve this answer













My guess would be you're importing it incorrectly and have an extra .



Try imports: [Ng4LoadingSpinnerModule.forRoot(), ...] instead of imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 16 '18 at 22:06









Guillermo AguirreGuillermo Aguirre

33147




33147













  • I removed the extra from the module import statement = still no spinner shows...

    – RenleyRenfield
    Nov 16 '18 at 22:19











  • Do you have the html component in your root element? Maybe it's being blocked by something on top of it. In addition, is your browser console outputting any errors? Are you importing it correctly in your app.module.ts?

    – Guillermo Aguirre
    Nov 19 '18 at 13:37













  • After trying everything everyone suggested here, it didn't work. So I went home, rested on it, came back in, tidied up the code a little, and did an ng build. Now it works. :P SO something was out of place or in wrong spot. I am not sure which or what, but in general this answer and the other suggestions for where i place the tags were likely correct.

    – RenleyRenfield
    Nov 19 '18 at 17:11











  • Ah, just figured it out... stoopid me. I had the tag and the call for the search component on a click event, which navigated away to other component, and thus hiding the component that has the spinner tag, and thus never showing the spinner.... my bad :P

    – RenleyRenfield
    Nov 19 '18 at 17:19











  • Great to hear everything worked out in the end!

    – Guillermo Aguirre
    Nov 20 '18 at 16:04



















  • I removed the extra from the module import statement = still no spinner shows...

    – RenleyRenfield
    Nov 16 '18 at 22:19











  • Do you have the html component in your root element? Maybe it's being blocked by something on top of it. In addition, is your browser console outputting any errors? Are you importing it correctly in your app.module.ts?

    – Guillermo Aguirre
    Nov 19 '18 at 13:37













  • After trying everything everyone suggested here, it didn't work. So I went home, rested on it, came back in, tidied up the code a little, and did an ng build. Now it works. :P SO something was out of place or in wrong spot. I am not sure which or what, but in general this answer and the other suggestions for where i place the tags were likely correct.

    – RenleyRenfield
    Nov 19 '18 at 17:11











  • Ah, just figured it out... stoopid me. I had the tag and the call for the search component on a click event, which navigated away to other component, and thus hiding the component that has the spinner tag, and thus never showing the spinner.... my bad :P

    – RenleyRenfield
    Nov 19 '18 at 17:19











  • Great to hear everything worked out in the end!

    – Guillermo Aguirre
    Nov 20 '18 at 16:04

















I removed the extra from the module import statement = still no spinner shows...

– RenleyRenfield
Nov 16 '18 at 22:19





I removed the extra from the module import statement = still no spinner shows...

– RenleyRenfield
Nov 16 '18 at 22:19













Do you have the html component in your root element? Maybe it's being blocked by something on top of it. In addition, is your browser console outputting any errors? Are you importing it correctly in your app.module.ts?

– Guillermo Aguirre
Nov 19 '18 at 13:37







Do you have the html component in your root element? Maybe it's being blocked by something on top of it. In addition, is your browser console outputting any errors? Are you importing it correctly in your app.module.ts?

– Guillermo Aguirre
Nov 19 '18 at 13:37















After trying everything everyone suggested here, it didn't work. So I went home, rested on it, came back in, tidied up the code a little, and did an ng build. Now it works. :P SO something was out of place or in wrong spot. I am not sure which or what, but in general this answer and the other suggestions for where i place the tags were likely correct.

– RenleyRenfield
Nov 19 '18 at 17:11





After trying everything everyone suggested here, it didn't work. So I went home, rested on it, came back in, tidied up the code a little, and did an ng build. Now it works. :P SO something was out of place or in wrong spot. I am not sure which or what, but in general this answer and the other suggestions for where i place the tags were likely correct.

– RenleyRenfield
Nov 19 '18 at 17:11













Ah, just figured it out... stoopid me. I had the tag and the call for the search component on a click event, which navigated away to other component, and thus hiding the component that has the spinner tag, and thus never showing the spinner.... my bad :P

– RenleyRenfield
Nov 19 '18 at 17:19





Ah, just figured it out... stoopid me. I had the tag and the call for the search component on a click event, which navigated away to other component, and thus hiding the component that has the spinner tag, and thus never showing the spinner.... my bad :P

– RenleyRenfield
Nov 19 '18 at 17:19













Great to hear everything worked out in the end!

– Guillermo Aguirre
Nov 20 '18 at 16:04





Great to hear everything worked out in the end!

– Guillermo Aguirre
Nov 20 '18 at 16:04













0














My best guess would be that the problem is due to where you are placing your html. Have you put the ng4-loading-spinner element within your app.component.html file?



Take a look at this working demo SlackBlitz and see if it's of any help.






share|improve this answer
























  • I tried moving it to the app.component level and that also did not work.

    – RenleyRenfield
    Nov 16 '18 at 22:33











  • Can you reproduce your issue on SlackBlitz at all?

    – Viqas
    Nov 16 '18 at 23:10
















0














My best guess would be that the problem is due to where you are placing your html. Have you put the ng4-loading-spinner element within your app.component.html file?



Take a look at this working demo SlackBlitz and see if it's of any help.






share|improve this answer
























  • I tried moving it to the app.component level and that also did not work.

    – RenleyRenfield
    Nov 16 '18 at 22:33











  • Can you reproduce your issue on SlackBlitz at all?

    – Viqas
    Nov 16 '18 at 23:10














0












0








0







My best guess would be that the problem is due to where you are placing your html. Have you put the ng4-loading-spinner element within your app.component.html file?



Take a look at this working demo SlackBlitz and see if it's of any help.






share|improve this answer













My best guess would be that the problem is due to where you are placing your html. Have you put the ng4-loading-spinner element within your app.component.html file?



Take a look at this working demo SlackBlitz and see if it's of any help.







share|improve this answer












share|improve this answer



share|improve this answer










answered Nov 16 '18 at 21:21









ViqasViqas

764421




764421













  • I tried moving it to the app.component level and that also did not work.

    – RenleyRenfield
    Nov 16 '18 at 22:33











  • Can you reproduce your issue on SlackBlitz at all?

    – Viqas
    Nov 16 '18 at 23:10



















  • I tried moving it to the app.component level and that also did not work.

    – RenleyRenfield
    Nov 16 '18 at 22:33











  • Can you reproduce your issue on SlackBlitz at all?

    – Viqas
    Nov 16 '18 at 23:10

















I tried moving it to the app.component level and that also did not work.

– RenleyRenfield
Nov 16 '18 at 22:33





I tried moving it to the app.component level and that also did not work.

– RenleyRenfield
Nov 16 '18 at 22:33













Can you reproduce your issue on SlackBlitz at all?

– Viqas
Nov 16 '18 at 23:10





Can you reproduce your issue on SlackBlitz at all?

– Viqas
Nov 16 '18 at 23:10


















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














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

Post as a guest















Required, but never shown





















































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown

































Required, but never shown














Required, but never shown












Required, but never shown







Required, but never shown







Popular posts from this blog

List item for chat from Array inside array React Native

Thiostrepton

Caerphilly