moff/angular2-loaders-css

Angular 2 module that implements Loaders.css spinners

angular2-loaders-css's Issues

css styling does not work with pacman

The suggested way to modify the background color does not work with pacman, since the colouring of this spinner seems to be related to border-color instead

Update to Angular 6

Hi,

Is it possible to update to latest Angular 6.x.x?

Thanks

Not compatible with angular 9 IVY compiler

Compiling angular2-loaders-css : main as commonjs
Error: Error on worker #3: Error: There is no typings path for LoadersCssComponent in C:/Users/devvws/Source/Repos/autorack-loadings-client/node_modules/angular2-loaders-css/module/loaders-css.component.js.
We need to add an export for this class to a .d.ts typings file because Angular compiler needs to be able to reference this class in compiled code, such as templates.
The simplest fix for this is to ensure that this class is exported from the package's entry-point.
at C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules@angular\compiler-cli\ngcc\src\rendering\dts_renderer.js:147:31
at Array.forEach ()
at DtsRenderer.getTypingsFilesToRender (C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules@angular\compiler-cli\ngcc\src\rendering\dts_renderer.js:145:45)
at DtsRenderer.renderProgram (C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules@angular\compiler-cli\ngcc\src\rendering\dts_renderer.js:62:37)
at Transformer.transform (C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules@angular\compiler-cli\ngcc\src\packages\transformer.js:81:52)
at ClusterWorker.compile (C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules@angular\compiler-cli\ngcc\src\main.js:168:42)
at Worker. (C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules@angular\compiler-cli\ngcc\src\execution\cluster\worker.js:44:42)
at Worker.emit (events.js:311:20)
at process. (internal/cluster/worker.js:32:12)
at process.emit (events.js:311:20)
at ClusterMaster.onWorkerMessage (C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules@angular\compiler-cli\ngcc\src\execution\cluster\master.js:158:27)
at C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules@angular\compiler-cli\ngcc\src\execution\cluster\master.js:46:95
at ClusterMaster. (C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules@angular\compiler-cli\ngcc\src\execution\cluster\master.js:238:57)
at step (C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules\tslib\tslib.js:139:27)
at Object.next (C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules\tslib\tslib.js:120:57)
at C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules\tslib\tslib.js:113:75
at new Promise ()
at Object.__awaiter (C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules\tslib\tslib.js:109:16)
at EventEmitter. (C:\Users\devvws\Source\Repos\autorack-loadings-client\node_modules@angular\compiler-cli\ngcc\src\execution\cluster\master.js:232:32)
at EventEmitter.emit (events.js:311:20)

loaderClass attribute is not working

I have given the loaderClass attribute in component.html file like this:
<loaders-css [loader]="'square-spin'" [loaderClass]="'spinner'"></loaders-css>
and defined the spinner class in component.css file like this:

.spinner {
background: black;
background-color: black;
}

But still background colors and other properties are not applying on the loader.

Can you check the same and let me know if I am doing anything wrong.

Angular 5 Compatibility

Are there any plans to upgrade to angular5 in the near future?

Can't perform an AoT build.

Hi, I'm trying to perform an AoT build but I receive this error:

        </div>
          <div>
              <loaders-css *ngIf="loading" [ERROR ->][loader]="'ball-triangle-path'" [loaderClass]="'my-loader'"></loaders-css>
              <table "): MyComponent@10:47

Can't bind to 'loaderClass' since it isn't a known property of 'loaders-css'.

1. If 'loaders-css' is an Angular component and it has 'loaderClass' input, then verify that it is part of this module.

2. If 'loaders-css' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

          <div>
              <loaders-css *ngIf="loading" [loader]="'ball-triangle-path'" [ERROR ->][loaderClass]="'my-loader'"></loaders-css>
              <table class="ocs-table">
        "): MyComponent@10:79
   

'loaders-css' is not a known element:

1. If 'loaders-css' is an Angular component, then verify that it is part of this module.
2. If 'loaders-css' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the '@NgModule.schemas' of this component to suppress this message.

I'm using the Angular-CLI 1.0.0-beta.22-1 using the command ng build --aot.

Please let me know if you need more info.

Update to Angular 7

Can you please update to Angular 7?

css class doesn't work

the component don't get the class from the father component. i can see in the html inspector that the class it's actually set in the div of the loader but doesn't work

Is this project dead?

Add loaders with some message also.

Hi,

Is this loader library also give the option to show some message string along with loaders like- Please wait.. Screen is loading or something like this.

Update to Angular 5

Any plans to update to angular 5?

Thanks

LoadersCssModule is not an NgModule

i am getting the feautured log message when trying to import the module...

How to style this in a component?

So i add this to my component like so
<div *ngIf="busy" class="container loading-container"> <loaders-css [loader]="'ball-triangle-path'" [loaderClass]="'spinner'"></loaders-css> </div>

Then in my code i can assign whatever i want to spinner - it only works with ::ng-deep or global styles, so i can't style loaders differently in different components?

Can't compile loader in visual studio code

Hi.
I'm using the loader in Vs code with angular 4; I follow the starting guide (I'm new to webpackage, vs code, and so on) but to get it working I had to change all imports (i.e. from @import 'variables'; to @import '_variables.scss';); while are there these differences between file names? I get it working at last but my collegue can't download the package and get it working.
Thank you.

trying to implement <loaders-css> in angular 4 but getting this error

ERROR in Metadata version mismatch for module D:/hamse work/ng4/node_modules/angular2-loaders-css/module/module.d.ts, found version 4, expected 3, resolving symbol AppModule in D:/hamse work/ng4/src/app/app.module.ts, resolving symbol AppModule in D:/hamse work/ng4/src/app/app.module.ts

package.json

{ "name": "hamse-ng4", "version": "0.0.0", "license": "MIT", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "dependencies": { "@angular/animations": "^4.2.4", "@angular/common": "^4.2.4", "@angular/compiler": "^4.2.4", "@angular/core": "^4.2.4", "@angular/forms": "^4.2.4", "@angular/http": "^4.2.4", "@angular/platform-browser": "^4.2.4", "@angular/platform-browser-dynamic": "^4.2.4", "@angular/router": "^4.2.4", "angular2-cookie": "^1.2.6", "angular2-loaders-css": "^2.0.1", "angular2-notifications-lite": "^0.1.2", "core-js": "^2.4.1", "hammerjs": "^2.0.8", "ng2-bootstrap": "^1.6.3", "ng2-bootstrap-modal": "^1.0.1", "ng2-ion-range-slider": "^1.0.3", "ngx-carousel": "^1.3.5", "rxjs": "^5.4.2", "zone.js": "^0.8.14" }, "devDependencies": { "@angular/cli": "1.3.0-rc.0", "@angular/compiler-cli": "^4.2.4", "@angular/language-service": "^4.2.4", "@types/jasmine": "~2.5.53", "@types/jasminewd2": "~2.0.2", "@types/node": "~6.0.60", "codelyzer": "~3.1.1", "jasmine-core": "~2.6.2", "jasmine-spec-reporter": "~4.1.0", "karma": "~1.7.0", "karma-chrome-launcher": "~2.1.1", "karma-cli": "~1.0.1", "karma-coverage-istanbul-reporter": "^1.2.1", "karma-jasmine": "~1.1.0", "karma-jasmine-html-reporter": "^0.2.2", "protractor": "~5.1.2", "ts-node": "~3.2.0", "tslint": "~5.3.2", "typescript": "~2.3.3" } }