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;
}
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...
add a comment |
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...
In which module exactly you are importingNg4LoadingSpinnerModuleto ?
– 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
add a comment |
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...
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...
asked Nov 16 '18 at 20:32
RenleyRenfieldRenleyRenfield
1161211
1161211
In which module exactly you are importingNg4LoadingSpinnerModuleto ?
– 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
add a comment |
In which module exactly you are importingNg4LoadingSpinnerModuleto ?
– 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
add a comment |
2 Answers
2
active
oldest
votes
My guess would be you're importing it incorrectly and have an extra .
Try imports: [Ng4LoadingSpinnerModule.forRoot(), ...] instead of imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]
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 yourapp.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
add a comment |
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.
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
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
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
My guess would be you're importing it incorrectly and have an extra .
Try imports: [Ng4LoadingSpinnerModule.forRoot(), ...] instead of imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]
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 yourapp.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
add a comment |
My guess would be you're importing it incorrectly and have an extra .
Try imports: [Ng4LoadingSpinnerModule.forRoot(), ...] instead of imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]
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 yourapp.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
add a comment |
My guess would be you're importing it incorrectly and have an extra .
Try imports: [Ng4LoadingSpinnerModule.forRoot(), ...] instead of imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]
My guess would be you're importing it incorrectly and have an extra .
Try imports: [Ng4LoadingSpinnerModule.forRoot(), ...] instead of imports: [[ Ng4LoadingSpinnerModule.forRoot() ],...]
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 yourapp.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
add a comment |
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 yourapp.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
add a comment |
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.
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
add a comment |
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.
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
add a comment |
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.
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.
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
add a comment |
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
add a comment |
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.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
In which module exactly you are importing
Ng4LoadingSpinnerModuleto ?– 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