gbuomprisco / ngx-content-loading Goto Github PK

	<ngx-content-loading 
[speed]="'1500ms'"
[width]="1000"
[height]="300"
[primaryColor]="'#222'"
[secondaryColor]="'#5e5e5e'">
<svg:g ngx-circle cy="30" cx="30" r="30" ry="5"></svg:g>
  <svg:g ngx-rect width="150" height="10" y="10" x="70" rx="5" ry="5"></svg:g>
  <svg:g ngx-rect width="90" height="10" y="40" x="70" rx="5" ry="5"></svg:g>
  <svg:g ngx-rect width="210" height="10" y="70" x="0" rx="5" ry="5"></svg:g>
  <svg:g ngx-rect width="240" height="10" y="100" x="0" rx="5" ry="5"></svg:g>

Error i s

ERROR TypeError: Cannot read property 'speed' of undefined
at Object.eval [as updateDirectives] (RectComponent.html:17)
at Object.debugUpdateDirectives [as updateDirectives] (core.js:14339)
at checkAndUpdateView (core.js:13508)
at callViewAction (core.js:13858)
at execComponentViewsAction (core.js:13790)
at checkAndUpdateView (core.js:13514)
at callViewAction (core.js:13858)
at execComponentViewsAction (core.js:13790)
at checkAndUpdateView (core.js:13514)
at callViewAction (core.js:13858)

please let me know what I am missing

Its works fine in chrome and firefox, but in Safari browser its coming as black box. Both mobile and desktop version.
Can some find the solution on this BUG

In server error logs its giving ERROR ReferenceError: performance is not defined error.

When install this , I have the warning because the peer dependencies has Angular 5 , but Angular 6 was released ..

This error occurred Without AoT [During ng serve]

Compiled without errors, but IDE shows error:

When jumped to the page, where the content placeholder placed, it throws the following error:

Versions using:

"ngx-content-loading": "0.0.9-rc1"
"@angular/core": "^5.2.6"
"@angular/cli": "^1.7.1"

Currently the module is not working with AoT (Which comes with Angular 5.x). While trying to build the project for prod environment I receive the following error:

Error during template compile of 'NgxContentLoadingModule' Function calls are not supported in decorators in
            'NgModule' 'NgModule' calls a function at @angular/core/core.ts(194,31).

ng build --prod --aot=false is a workaround for now.

I've tried text-center and d-flex justify-content-center and I can't seem to center this. I've also tried putting the whole thing into a div and centering the div, but it didn't work either. How do I center it?

<ngx-content-loading [height]="300" class="text-muted text-center">
<b before-svg><h3>loading...</h3></b>
<svg:g ngx-bullet-list-preset></svg:g>
</ngx-content-loading>

I'm submitting the bug again because I'm not able to reopen #3 and it is not resolved yet.

It happens with the fresh project with angular-cli.

Please find attached plunkr sample.
https://embed.plnkr.co/TqWCp8HWQ2cm8urnaoPB/

Thanks

Angular: 6.0.2
Angular.cli: 6.0.2

When I want to build my app it says:

ERROR in Error during template compile of 'NgxContentLoadingModule'
  Function calls are not supported in decorators in 'NgModule'
    'NgModule' calls a function at ../@angular/core/core.ts(194,31).

When I want to use ng serve it says

WARNING in ./node_modules/ngx-content-loading/node_modules/@angular/core/esm5/core.js
6436:15-36 Critical dependency: the request of a dependency is an expression

WARNING in ./node_modules/ngx-content-loading/node_modules/@angular/core/esm5/core.js
6456:15-102 Critical dependency: the request of a dependency is an expression

we will not able to define with and there is also a suggestion to give default 100% to inherit from parent

Related issue:

ngneat/content-loader#8

Hi,
Is there a setting that we can automatically adjust the width?

Thanks.

Hi All,

Am using ngx-loading in my application, and trying to achieve the loading on every route change as well as the http request,
am using the ngx-loading in app.html and created a loader service with custom http interceptor, but in change route am unable to see the loader, but in http request am getting loader which is not rendering in that page rather it's coming in top of that page

kindly please help me to resolve it, Thanks in advance

App.html

<ngx-content-loading
[speed]="'1500ms'"
[width]="1000"
[height]="300"
[primaryColor]="'#222'"
[secondaryColor]="'#5e5e5e'"
*ngIf="isLoading | async"

<svg:g ngx-facebook-preset></svg:g>

<div class="container-fluid no-overflow">
  <div class="row">
    <div class="header no-overflow" *ngIf="!login">
      <app-header></app-header>
    </div>
    <div class="navigation" *ngIf="!login">
      <app-nav></app-nav>
    </div>
    <div class="mainbox" [ngStyle]="{ width: login ? '100%' : '96%', height: login ? '100vh' : '' }">
      <router-outlet></router-outlet>
    </div>
  </div>
</div>

Custom Http Interceptor

`import { Injectable } from "@angular/core";
import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from "@angular/common/http";
import { Observable } from "rxjs";
import { finalize } from "rxjs/operators";
import { LoaderService } from 'src/app/shared-module/api-services/loader.service';

@Injectable()
export class LoaderInterceptor implements HttpInterceptor {
constructor(public loaderService: LoaderService) { }
intercept(req: HttpRequest, next: HttpHandler): Observable<HttpEvent> {
this.loaderService.show();
return next.handle(req).pipe(
finalize(() => this.loaderService.hide())
);
}
}
`
Loader.service.tc

import { Injectable } from '@angular/core'; import { Subject } from 'rxjs'; @Injectable({ providedIn: 'root', }) export class LoaderService { isLoading = new Subject<boolean>(); show() { this.isLoading.next(true); } hide() { this.isLoading.next(false); } }
I have attached the loader image below

Stackblitz with reproduction:
https://stackblitz.com/edit/ngx-content-loading-xpltqt

https://ngx-content-loading-xpltqt.stackblitz.io - this works fine
https://ngx-content-loading-xpltqt.stackblitz.io/route - this is broken

This happens only in Safari - both desktop and mobile

When I run the ngx-content-loading on Android device using ionic DevApp, it runs fine. The color looks what it is supposed to look like. But whenever I run this on iOS using ionic DevApp, color gets changed to black. Please fix this issue.

It's been a long time since your last update.
Your package is fine but incompatible with Angular 9. Will you update on this?

Thanks.