Angular 14+
A mono repo collection of lightweight stand alone Angular libraries built with the Angular CLI and ng-packagr
The project is still in the early stages but if you would like to contribute check out the CONTRIBUTING.md.
:package: A collection of lightweight Angular libraries in a single mono repo
Home Page: https://ngxlite.com
License: MIT License
Angular 14+
A mono repo collection of lightweight stand alone Angular libraries built with the Angular CLI and ng-packagr
The project is still in the early stages but if you would like to contribute check out the CONTRIBUTING.md.
The buttons on the rating component are missing the appropriate aria-label attributes.
@coryrylan - Are there any plans to support Angular 13 and beyond?
When attempting to install @ngx-lite/[email protected]
on an Angular 13 repository, the following error is thrown:
C:\path\to\angular13-repository>npm i @ngx-lite/json-ld
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"~13.3.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^12.0.2" from @ngx-lite/[email protected]
npm ERR! node_modules/@ngx-lite/json-ld
npm ERR! @ngx-lite/json-ld@"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
Describe the bug
I'm using the ngx-input-tag
and it works the first time the form is initialized,
but once i try to patch the corresponding value, the input does not reflect the changes,
instead, if i click outside the component, then the changes are reflected
To Reproduce
Steps to reproduce the behavior:
Expected behavior
If i change the tags value in the form, it should be automatically reflected and it should not require an extra click.
Versions (please complete the following information):
Describe the solution you'd like
ngx-input-tag
should allow the tagFormatter
to be set via a input (input overrides provider). We have two types of tags on our site and they use different formats.ngx-input-tag
should have an option to disable adding tags that are not in the suggested tag array.ngx-input-tag
should have an option to prevent backspace from removing a tag.I would be happy to open a PR.
Work in progress branch https://github.com/coryrylan/ngx-lite/tree/topic/angular-9
Describe the bug
Focus stays on previously clicked or hovered link.
To Reproduce
I have a gif of it doing it on the ngx-lite site:
Expected behavior
I expected the highlight to show on the hovered or clicked link.
Screenshots
gif above
Versions (please complete the following information):
Describe the bug
Following the installation instruction, JSON ld module creating script tag but it doesn't check duplicate. So if we route back to the page again, it will create two scripts. Also, JSON ld can be detected only on load but not on route change.
Describe the bug
npm install --save @ngx-lite/input-timepicker
fails with module not found.
To Reproduce
Run npm command above
Expected behavior
npm successfully installs the package and users can then import it and use it. I am able to successfully install input-datepicker
Versions (please complete the following information):
So this issue comes off the back of a deployment that I did this morning, which failed.
The failure, sadly, was due to:
^
in my package.json for this entry.major . minor . patch
)Could you provide some sort of Insight into how you version this package? Perhaps it would be worthy of a section in your readme?
Furthermore, may I request that when you change the versions of the dependent packages in the future; that you use some sort of Semantic Versioning to indicate that you've made breaking changes to this package.
And I'd just like to also take the time to thank you and the other contributors for your work on this package. It's saved me a few hours. Sadly it's stolen a few too. However I really do appreciate the hard work and hope that you folks keep it up.
Is your feature request related to a problem? Please describe.
use Intersection Observer API like
https://github.com/TradeMe/ng-defer-load
for in-viewport module
Describe the solution you'd like
A clear and concise description of what you want to happen.
Describe alternatives you've considered
use Intersection Observer API to check if an element is in viewport and falls back to scroll detection mechanism for unsupported browsers.
Additional context
Add any other context or screenshots about the feature request here.
Hi,
Just upgraded to Angular 12, include angular/cli 12.
json-ld library worked for me when using angular 9.
After upgrading getting the following errors during build.
Error: node_modules/@ngx-lite/json-ld/ngx-json-ld.component.d.ts:10:21 - error TS2694: Namespace '"XXX/node_modules/@angular/core/core"' has no exported member 'ɵɵComponentDefWithMeta'.
10 static ɵcmp: i0.ɵɵComponentDefWithMeta<NgxJsonLdComponent, "ngx-json-ld", never, { "json": "json"; }, {}, never, never>;
~~~~~~~~~~~~~~~~~~~~~~
Error: node_modules/@ngx-lite/json-ld/ngx-json-ld.module.d.ts:5:21 - error TS2694: Namespace '"XXX/node_modules/@angular/core/core"' has no exported member 'ɵɵNgModuleDefWithMeta'.
5 static ɵmod: i0.ɵɵNgModuleDefWithMeta<NgxJsonLdModule, [typeof i1.NgxJsonLdComponent], [typeof i2.CommonModule], [typeof i1.NgxJsonLdComponent]>;
~~~~~~~~~~~~~~~~~~~~~
**Versions
It looks like the code was updated but the version number was not bumped.
Hi...
Its very nice plugin. Could you plz tell how should we change the colour of stars.
Describe the bug
Only updated @ngx-lite/json-ld
in my app from "0.6.2" to "0.6.3". After running ng build --prod
I noticed the file size of my main.js file increased from 961k to 999k. Deleting the node_modules folder and reinstalling did not fix the issue.
Versions (please complete the following information):
Angular CLI: 11.0.2
Node: 14.15.0
OS: win32 x64
Angular: 11.0.2
... animations, cli, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... platform-server, router, service-worker
Ivy Workspace: Yes
Package Version
---------------------------------------------------------
@angular-devkit/architect 0.1100.2
@angular-devkit/build-angular 0.1100.2
@angular-devkit/core 11.0.2
@angular-devkit/schematics 11.0.2
@angular/cdk 11.0.0
@angular/material 11.0.0
@nguniversal/builders 11.0.0
@nguniversal/express-engine 11.0.0
@schematics/angular 11.0.2
@schematics/update 0.1100.2
rxjs 6.6.3
typescript 4.1.2
Describe the bug
After installling the latest verison 0.6.4 , when I run my angular project I get the following:
Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 31:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'
Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 88:10-28
"export 'ɵɵFactoryTarget' (imported as 'i0') was not found in '@angular/core'
Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 51:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'
Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 106:0-27
"export 'ɵɵngDeclareClassMetadata' (imported as 'i0') was not found in '@angular/core'
Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 23:26-47
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'
Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 82:23-44
"export 'ɵɵngDeclareFactory' (imported as 'i0') was not found in '@angular/core'
Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 99:23-45
"export 'ɵɵngDeclareInjector' (imported as 'i0') was not found in '@angular/core'
Error: ./node_modules/@ngx-lite/json-ld/fesm2015/ngx-lite-json-ld.js 90:23-45
"export 'ɵɵngDeclareNgModule' (imported as 'i0') was not found in '@angular/core'
To Reproduce
Steps to reproduce the behavior:
1.
2. Go to '...'
3. Click on '....'
4. Scroll down to '....'
5. See error
Expected behavior
It should compile with my angular v11.
Versions (please complete the following information):
Additional context
package.json
{
"name": "pinploy-web",
"version": "1.1.0",
"license": "MIT",
"scripts": {
"ng": "ng",
"start": "ng serve",
"start:ssl": "ng serve --ssl",
"prettier-write": "npx prettier --write .",
"prettier-check": "npx prettier --check .",
"build": "ng build --prod",
"build:dev": "ng build --prod --configuration=dev",
"build:dk": "ng build --prod --configuration=dk",
"test": "ng test",
"lint:fix": "eslint --fix --ext .ts .",
"eslint": "npx eslint src//*.ts",
"eslint:fix": "npx eslint src//*.ts --fix",
"e2e": "ng e2e",
"postinstall": "ngcc",
"webpack-analyzer:analyze:web:prod": "ng run pinploy-web:build --configuration=dk --stats-json=true --statsJson=true",
"webpack-analyzer:web": "webpack-bundle-analyzer dist/stats.json"
},
"private": true,
"dependencies": {
"@agm/core": "1.1.0",
"@agm/js-marker-clusterer": "^1.1.0",
"@angular/animations": "11.2.1",
"@angular/cdk": "^11.2.1",
"@angular/common": "11.2.1",
"@angular/compiler": "11.2.1",
"@angular/core": "11.2.1",
"@angular/forms": "11.2.1",
"@angular/material": "^11.2.1",
"@angular/platform-browser": "11.2.1",
"@angular/platform-browser-dynamic": "11.2.1",
"@angular/router": "11.2.1",
"@auth0/angular-jwt": "5.0.2",
"@busacca/ng-pick-datetime": "10.0.0",
"@google/markerclustererplus": "^5.1.3",
"@ngx-lite/json-ld": "^0.6.4",
"angular-cropperjs": "^1.0.1",
"angular-google-tag-manager": "1.3.0",
"angularx-social-login": "3.5.4",
"classlist.js": "^1.1.20150312",
"codelyzer": "^6.0.0",
"core-js": "^2.4.1",
"eslint-config-airbnb": "^18.2.1",
"intersection-observer": "^0.10.0",
"js-marker-clusterer": "^1.0.0",
"jsbi": "3.1.4",
"libphonenumber-js": "^1.9.6",
"moment": "^2.29.1",
"ng-in-viewport": "^6.1.0",
"ng-lazyload-image": "9.1.0",
"ng-pick-datetime": "7.0.0",
"ngx-build-plus": "^11.0.0",
"ngx-color": "^6.2.0",
"ngx-cookie-service": "^2.3.0",
"ngx-infinite-scroll": "10.0.1",
"ngx-owl-carousel-o": "^5.0.0",
"ngx-toastr": "13.2.1",
"ngx-webstorage": "7.0.1",
"rxjs": "^6.6.3",
"socket.io-client": "^2.1.1",
"tslib": "^2.0.0",
"web-animations-js": "^2.3.2",
"zone.js": "~0.11.4"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^11.1.1",
"@angular-devkit/build-angular": "~0.1102.1",
"@angular-eslint/eslint-plugin": "^1.2.0",
"@angular/cli": "^11.2.1",
"@angular/compiler-cli": "11.2.1",
"@angular/language-service": "11.2.1",
"@types/jasmine": "~3.6.0",
"@types/jasminewd2": "~2.0.2",
"@types/node": "^14.14.31",
"@typescript-eslint/eslint-plugin": "^4.16.1",
"@typescript-eslint/eslint-plugin-tslint": "^4.16.1",
"@typescript-eslint/parser": "^4.16.1",
"cropperjs": "^1.5.9",
"eslint": "^7.21.0",
"eslint-config-prettier": "^8.1.0",
"eslint-plugin-import": "^2.22.1",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-rxjs": "^3.1.0",
"jasmine-core": "~3.7.1",
"jasmine-spec-reporter": "~6.0.0",
"karma": "~6.1.1",
"karma-chrome-launcher": "~3.1.0",
"karma-cli": "~2.0.0",
"karma-coverage-istanbul-reporter": "~3.0.2",
"karma-jasmine": "~4.0.0",
"karma-jasmine-html-reporter": "^1.6.0",
"moment-locales-webpack-plugin": "^1.2.0",
"prettier": "2.2.1",
"protractor": "~7.0.0",
"ts-node": "~3.2.0",
"typescript": "4.0.7",
"webpack-bundle-analyzer": "^4.4.0"
}
}
Currently if a score value is 4.5 it rounds to 5 stars instead of displaying 4.5 stars.
Describe the bug
ERROR Error: ASSERTION ERROR: Expecting flags [Expected=> number === boolean <=Actual]
at throwError (core.js:314)
at assertNumber (core.js:245)
at ɵɵviewQuery (core.js:26560)
at NgxNavDrawerComponent_Query (ngx-lite-nav-drawer.js:75)
at executeViewQueryFn (core.js:10882)
at renderView (core.js:9412)
at renderComponent (core.js:10698)
at renderChildComponents (core.js:9283)
at renderView (core.js:9443)
at renderComponent (core.js:10698)
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Versions (please complete the following information):
Additional context
Add any other context about the problem here.
Describe the bug
I have edited the CSS for the svg, span and button element but there does not seem a method for increasing the star size
Additional context
Please guide me in increasing the star width and height please.
update all custom elements to be display block by default
Describe the bug
If you have several instances of ngx-menu
on a page (e.g. in a row for each entity in a list), each one attaches an event listener for document:click
and window:keyup
. This can cause serious performance issues (slow response to clicks and typing in the browser).
To Reproduce
https://stackblitz.com/edit/angular-vwdj4h
Notice that typing in the text box is really slow with a lot of menus on the page.
Expected behavior
This should not happen. We fixed it by forking the menu component and making it use a shared observable for the document:click
and window:keyup
events instead of HostListener
. This should be done for any component that uses HostListener
for a global browser event if a page may contain several instances of that component. The datepicker, input tag, menu, and modal components in ngx-lite
could suffer from this same issue.
This could be solved by using a SharedEventService
like this:
import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
import { fromEvent, EMPTY, Observable } from 'rxjs';
import { shareReplay } from 'rxjs/operators';
import { isPlatformBrowser } from '@angular/common';
@Injectable({ providedIn: 'root' })
export class SharedEventsService {
readonly documentClickEvent: Observable<MouseEvent>;
constructor(@Inject(PLATFORM_ID) platformId: string) {
const isBrowser = isPlatformBrowser(platformId);
this.documentClickEvent = isBrowser ? fromEvent<MouseEvent>(document, 'click').pipe(shareReplay()) : EMPTY;
}
}
I was going to open a PR to fix all of the affected components, but I am unsure how to update @ngx-lite/util
to add the shared service.
Is your feature request related to a problem? Please describe.
With a previous version, when i set formControl has a value 0, all stars become empty.
Currently, when set form control to 0 value, the component doesn't update :(
Describe the solution you'd like
Support 0 value.
Hi,
I use your tag input component in my Angular project for my forms.
Great job ! 👍
However, I can't fill a tag of more than 25 characters (spaces included).
Ex :
Is this normal ? Otherwise, how to get no restriction about the maximum number of characters ?
Thk's !
Attempting to update my schema files for the strategy described by Yoast below, which creates really long structured data files. https://yoast.com/yoast-seo-11-0/
Seeing a cutoff at ~150 lines where the json truncates suddenly and causes an error, since it doesn't close.
Is there anything you're aware of that would be driving that limit?
Could you please add support for Angular 16?
I was upgrading an older project from Angular 14 to 16, and I received a warning of conflicting peer dependency.
npm ERR! code ERESOLVE
npm ERR! ERESOLVE could not resolve
npm ERR!
npm ERR! While resolving: @ngx-lite/[email protected]
npm ERR! Found: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! @angular/common@"^16.1.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer @angular/common@"^14.2.12" from @ngx-lite/[email protected]
npm ERR! node_modules/@ngx-lite/json-ld
npm ERR! @ngx-lite/json-ld@"^14.0.0" from the root project
npm ERR!
npm ERR! Conflicting peer dependency: @angular/[email protected]
npm ERR! node_modules/@angular/common
npm ERR! peer @angular/common@"^14.2.12" from @ngx-lite/[email protected]
npm ERR! node_modules/@ngx-lite/json-ld
npm ERR! @ngx-lite/json-ld@"^14.0.0" from the root project
There are little to no unit tests. A few e2e tests. Additional tests need to be added asap.
It looks like the textChange event fires on every keyup regardless if the actual text changes.
Currently it is not easy to share util shared code between libraries. Currently the project has duplicated code across libs.
Possible but not great solutions
Could you please add support to Angular 7?
Currently after upgrade to Angular 7 I receive warning with incorrect peer dependencies.
warning " > @ngx-lite/[email protected]" has incorrect peer dependency "@angular/core@^6.0.0".
warning " > @ngx-lite/[email protected]" has incorrect peer dependency "@angular/common@^6.0.0".
warning " > @ngx-lite/[email protected]" has incorrect peer dependency "@angular/platform-browser@^6.0.0".
This unsubscribe
call should be wrapped in an if
to ensure that the subscription is not undefined
.
TypeError: Cannot read property 'unsubscribe' of undefined
at NgxInputRangeComponent._7aa.r.NgxInputRangeComponent.ngOnDestroy (C:\Builds\estate-sales\Web\node_modules\@ngx-lite\input-range\bundles\ng:\@ngx-lite\input-range\ngx-input-range.component.ts:145:28)
at callProviderLifecycles (C:\execroot\angular\packages\core\src\view\provider.ts:568:14)
at callElementProvidersLifecycles (C:\execroot\angular\packages\core\src\view\provider.ts:534:7)
at callLifecycleHooksChildrenFirst (C:\execroot\angular\packages\core\src\view\provider.ts:522:21)
at destroyView (C:\execroot\angular\packages\core\src\view\view.ts:511:3)
at callViewAction (C:\execroot\angular\packages\core\src\view\view.ts:633:7)
at execComponentViewsAction (C:\execroot\angular\packages\core\src\view\view.ts:559:7)
at destroyView (C:\execroot\angular\packages\core\src\view\view.ts:510:3)
at callViewAction (C:\execroot\angular\packages\core\src\view\view.ts:633:7)
at execEmbeddedViewsAction (C:\execroot\angular\packages\core\src\view\view.ts:580:9)
Describe the bug
changeDetection doesn't work when set new value directly with control.setValue() with @ngx-lite/input-star-rating component
To Reproduce
Steps to reproduce the behavior:
Expected behavior
when myControl.setValue(3)
is called, the component must show 3 stars
Describe the bug
I have an Angular 9 Universal app, and I am trying to use the @ngx-lite/json-ld. It is working fine on my local machine, but when I deploy to AWS, it stops working. Any idea of what might be happening?
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Versions (please complete the following information):
Additional context
Add any other context about the problem here.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.