diff --git a/package-lock.json b/package-lock.json index 98ef458..af6df0d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -325,20 +325,20 @@ } }, "@angular-devkit/schematics": { - "version": "11.1.4", - "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-11.1.4.tgz", - "integrity": "sha512-WWHmBHPabKgrBDM2M5ayA0OdhonNQHld8NjY8jEdwyWI4xEj23C/qDfgQc8sssvpi4LauKSaPozDELl7ItBPXA==", + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/@angular-devkit/schematics/-/schematics-11.2.2.tgz", + "integrity": "sha512-6bIxMwafz/+lwdtcshwOuFfhxTMU4RLma1uxBS34DXupMauPGl0IIXAy5cK9dXPlHLxuGsjeBiOM6eq033RLgw==", "dev": true, "requires": { - "@angular-devkit/core": "11.1.4", - "ora": "5.2.0", + "@angular-devkit/core": "11.2.2", + "ora": "5.3.0", "rxjs": "6.6.3" }, "dependencies": { "@angular-devkit/core": { - "version": "11.1.4", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-11.1.4.tgz", - "integrity": "sha512-xqjUIdMTDNjZ8jkzlDSQbhmTwF2tOLlT0iRI9mb7pN4VIS0LI/Xu0iTqDUrVs0Hqtb9609dz13LXu5zbQSb+cw==", + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-11.2.2.tgz", + "integrity": "sha512-LUDO1AdIjereiMh0j5p9xJcdr9ifhbWCPxlZqfu5wHzUfhCx9gO2Lvjp6rZXQ3OedXg5IZUnyxHlzkszQOsgiw==", "dev": true, "requires": { "ajv": "6.12.6", @@ -360,6 +360,22 @@ "uri-js": "^4.2.2" } }, + "ora": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/ora/-/ora-5.3.0.tgz", + "integrity": "sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==", + "dev": true, + "requires": { + "bl": "^4.0.3", + "chalk": "^4.1.0", + "cli-cursor": "^3.1.0", + "cli-spinners": "^2.5.0", + "is-interactive": "^1.0.0", + "log-symbols": "^4.0.0", + "strip-ansi": "^6.0.0", + "wcwidth": "^1.0.1" + } + }, "rxjs": { "version": "6.6.3", "resolved": "https://registry.npmjs.org/rxjs/-/rxjs-6.6.3.tgz", @@ -378,16 +394,16 @@ } }, "@angular/cli": { - "version": "11.1.4", - "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.1.4.tgz", - "integrity": "sha512-IGGKtMWtUBkEEzFcd0wP/SFricOg5Mc0l7BG4m6kRtCU34wQVbvc5h6xQIGrhKOJyLQ/gGZkqSWY+21Hun5jgQ==", + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/@angular/cli/-/cli-11.2.2.tgz", + "integrity": "sha512-rOVBzDzrMuOgJY43O46/7yYbncx0egGfr+DMJDQdazePGH1H3INN/eA9gkVcVK53ztCYb9X1sbZKOs9TUhF6nw==", "dev": true, "requires": { - "@angular-devkit/architect": "0.1101.4", - "@angular-devkit/core": "11.1.4", - "@angular-devkit/schematics": "11.1.4", - "@schematics/angular": "11.1.4", - "@schematics/update": "0.1101.4", + "@angular-devkit/architect": "0.1102.2", + "@angular-devkit/core": "11.2.2", + "@angular-devkit/schematics": "11.2.2", + "@schematics/angular": "11.2.2", + "@schematics/update": "0.1102.2", "@yarnpkg/lockfile": "1.1.0", "ansi-colors": "4.1.1", "debug": "4.3.1", @@ -396,8 +412,9 @@ "jsonc-parser": "3.0.0", "npm-package-arg": "8.1.0", "npm-pick-manifest": "6.1.0", - "open": "7.3.1", - "pacote": "11.1.14", + "open": "7.4.0", + "ora": "5.3.0", + "pacote": "11.2.4", "resolve": "1.19.0", "rimraf": "3.0.2", "semver": "7.3.4", @@ -407,19 +424,19 @@ }, "dependencies": { "@angular-devkit/architect": { - "version": "0.1101.4", - "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1101.4.tgz", - "integrity": "sha512-yur0mX156ZX1aXE7d8Z1z6sYjDk771iCyijLCN8MCx35lHIPGwMZwsB/dkttTChVHS8wJ+9YZnIucEBoh9ij3g==", + "version": "0.1102.2", + "resolved": "https://registry.npmjs.org/@angular-devkit/architect/-/architect-0.1102.2.tgz", + "integrity": "sha512-FE7DeT13elqDlELF23QqvEFnT2BkxeC5t31/QW85IN/OR5Tf/q7XEpj7giJXyzKFQ60M3ZzbznZyRz0EqtfaBQ==", "dev": true, "requires": { - "@angular-devkit/core": "11.1.4", + "@angular-devkit/core": "11.2.2", "rxjs": "6.6.3" } }, "@angular-devkit/core": { - "version": "11.1.4", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-11.1.4.tgz", - "integrity": "sha512-xqjUIdMTDNjZ8jkzlDSQbhmTwF2tOLlT0iRI9mb7pN4VIS0LI/Xu0iTqDUrVs0Hqtb9609dz13LXu5zbQSb+cw==", + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-11.2.2.tgz", + "integrity": "sha512-LUDO1AdIjereiMh0j5p9xJcdr9ifhbWCPxlZqfu5wHzUfhCx9gO2Lvjp6rZXQ3OedXg5IZUnyxHlzkszQOsgiw==", "dev": true, "requires": { "ajv": "6.12.6", @@ -441,6 +458,32 @@ "uri-js": "^4.2.2" } }, + "open": { + "version": "7.4.0", + "resolved": "https://registry.npmjs.org/open/-/open-7.4.0.tgz", + "integrity": "sha512-PGoBCX/lclIWlpS/R2PQuIR4NJoXh6X5AwVzE7WXnWRGvHg7+4TBCgsujUgiPpm0K1y4qvQeWnCWVTpTKZBtvA==", + "dev": true, + "requires": { + "is-docker": "^2.0.0", + "is-wsl": "^2.1.1" + } + }, + "ora": { + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/ora/-/ora-5.3.0.tgz", + "integrity": "sha512-zAKMgGXUim0Jyd6CXK9lraBnD3H5yPGBPPOkC23a2BG6hsm4Zu6OQSjQuEtV0BHDf4aKHcUFvJiGRrFuW3MG8g==", + "dev": true, + "requires": { + "bl": "^4.0.3", + "chalk": "^4.1.0", + "cli-cursor": "^3.1.0", + "cli-spinners": "^2.5.0", + "is-interactive": "^1.0.0", + "log-symbols": "^4.0.0", + "strip-ansi": "^6.0.0", + "wcwidth": "^1.0.1" + } + }, "resolve": { "version": "1.19.0", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.19.0.tgz", @@ -475,25 +518,25 @@ } }, "@angular/common": { - "version": "11.1.2", - "resolved": "https://registry.npmjs.org/@angular/common/-/common-11.1.2.tgz", - "integrity": "sha512-/+tMeFikT55VgOnx30y6M/WTuSwUarehpKhJ9F61hLZBTzWAIWuaD5DODZVnZ7b15pwgEO8UWnfr4778HTQlTw==", + "version": "11.2.3", + "resolved": "https://registry.npmjs.org/@angular/common/-/common-11.2.3.tgz", + "integrity": "sha512-51gVmr942SZtAFmhVfp7/3fcTQ+Tia7UxWjv6iUtYF3oCvTWbo/J1zki2VNSfmMNKJV8MaMq6XUw8UWbHA0sgQ==", "requires": { "tslib": "^2.0.0" } }, "@angular/compiler": { - "version": "11.1.2", - "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-11.1.2.tgz", - "integrity": "sha512-+GyKPAdwkXVq6xfSRVhF2tlheDLGf2ziTzaMcpjRk8sM0VeJAqrbDI/vqpZq9y6GXceKGDPrXdPY7bPwBPpDYg==", + "version": "11.2.3", + "resolved": "https://registry.npmjs.org/@angular/compiler/-/compiler-11.2.3.tgz", + "integrity": "sha512-De8BwtSwPVYGdvQa6CDq2C1SLmB78YjS0t/KNlvfp85cl4Gb3BdjTDsKMkJXkm/3ubnIXi1BaRIsFNVTCCF70Q==", "requires": { "tslib": "^2.0.0" } }, "@angular/compiler-cli": { - "version": "11.1.2", - "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-11.1.2.tgz", - "integrity": "sha512-J+j200qgq+qqcBx0GQLnfE0dITwSO3IPPidbvsnuZ3iDmSvxfeJvbuu1PMbpb7Mi7J+StEnMWfRk5q7dnm7kFA==", + "version": "11.2.3", + "resolved": "https://registry.npmjs.org/@angular/compiler-cli/-/compiler-cli-11.2.3.tgz", + "integrity": "sha512-ObQVI6q2c0VTWbsDnWJDdUZv2Jz/u1jiQNcrdtu/rjtJARaldEno9dMakN838Q6Nw4FzKUO6uYZXmnvKCUjfxQ==", "dev": true, "requires": { "@babel/core": "^7.8.6", @@ -571,18 +614,9 @@ } }, "@angular/core": { - "version": "11.1.2", - "resolved": "https://registry.npmjs.org/@angular/core/-/core-11.1.2.tgz", - "integrity": "sha512-5urIQTcRZ2hd9Q2JE0KQocjlIvuRdlrSGzxjf9OZbOuapXDNF0Sb3uEcVnt980NS7vw0Am5thVP9gDspS45c7Q==", - "requires": { - "tslib": "^2.0.0" - } - }, - "@angular/elements": { "version": "11.2.3", - "resolved": "https://registry.npmjs.org/@angular/elements/-/elements-11.2.3.tgz", - "integrity": "sha512-cfEZSzpm++0kgbEWomWx+tFwlRp4HcVi+RpJtkRWZSuWTIy5qZZg9yBzgDzrOrhXH9iXUlJ2+4ujmdPe7wKJ9w==", - "dev": true, + "resolved": "https://registry.npmjs.org/@angular/core/-/core-11.2.3.tgz", + "integrity": "sha512-+G7rZj21Mcmf6nWjQ79EwomwEOVQ1WLqw6YvCXWzgJ9ZlVjLi/Sti0/jIzUpgK0E0Fn86yuXw/vgYq5kjGeOcQ==", "requires": { "tslib": "^2.0.0" } @@ -2334,20 +2368,20 @@ } }, "@schematics/angular": { - "version": "11.1.4", - "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-11.1.4.tgz", - "integrity": "sha512-UWhUPxRarbK4AWTcOBmCOYMZwuxnJRo/Ts/0yyNqUkj6gHieyv0hsOi10f8Ofn34MyvPnUpDnCT/o9bzanmqog==", + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/@schematics/angular/-/angular-11.2.2.tgz", + "integrity": "sha512-TcxPy58adUnkirGXyZVVSMuKkA0eIz2PWSQWEgB9l7kO+5LvDOn+RMoc6AVx0s/bU9nH+eozBUJ1XAD/E8QnYQ==", "dev": true, "requires": { - "@angular-devkit/core": "11.1.4", - "@angular-devkit/schematics": "11.1.4", + "@angular-devkit/core": "11.2.2", + "@angular-devkit/schematics": "11.2.2", "jsonc-parser": "3.0.0" }, "dependencies": { "@angular-devkit/core": { - "version": "11.1.4", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-11.1.4.tgz", - "integrity": "sha512-xqjUIdMTDNjZ8jkzlDSQbhmTwF2tOLlT0iRI9mb7pN4VIS0LI/Xu0iTqDUrVs0Hqtb9609dz13LXu5zbQSb+cw==", + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-11.2.2.tgz", + "integrity": "sha512-LUDO1AdIjereiMh0j5p9xJcdr9ifhbWCPxlZqfu5wHzUfhCx9gO2Lvjp6rZXQ3OedXg5IZUnyxHlzkszQOsgiw==", "dev": true, "requires": { "ajv": "6.12.6", @@ -2387,25 +2421,25 @@ } }, "@schematics/update": { - "version": "0.1101.4", - "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.1101.4.tgz", - "integrity": "sha512-aEb/kqNgdVZ53lGQBIE4vPBGwlnqv2hRp3dyrhe++PJOyQf4cf0iJwfL0tB3pSHwjialaHtsrMybOs0a/81alA==", + "version": "0.1102.2", + "resolved": "https://registry.npmjs.org/@schematics/update/-/update-0.1102.2.tgz", + "integrity": "sha512-Nz8kjeixzDnOw00bnZznq3qrbIv8yWEWNb9eDkRBqgOUXQwlhKJY/sYBK58JF2D+conaRVuEqMsBlX08GlFtIA==", "dev": true, "requires": { - "@angular-devkit/core": "11.1.4", - "@angular-devkit/schematics": "11.1.4", + "@angular-devkit/core": "11.2.2", + "@angular-devkit/schematics": "11.2.2", "@yarnpkg/lockfile": "1.1.0", "ini": "2.0.0", "npm-package-arg": "^8.0.0", - "pacote": "11.1.14", + "pacote": "11.2.4", "semver": "7.3.4", "semver-intersect": "1.4.0" }, "dependencies": { "@angular-devkit/core": { - "version": "11.1.4", - "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-11.1.4.tgz", - "integrity": "sha512-xqjUIdMTDNjZ8jkzlDSQbhmTwF2tOLlT0iRI9mb7pN4VIS0LI/Xu0iTqDUrVs0Hqtb9609dz13LXu5zbQSb+cw==", + "version": "11.2.2", + "resolved": "https://registry.npmjs.org/@angular-devkit/core/-/core-11.2.2.tgz", + "integrity": "sha512-LUDO1AdIjereiMh0j5p9xJcdr9ifhbWCPxlZqfu5wHzUfhCx9gO2Lvjp6rZXQ3OedXg5IZUnyxHlzkszQOsgiw==", "dev": true, "requires": { "ajv": "6.12.6", @@ -4239,6 +4273,12 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==", "dev": true + }, + "zone.js": { + "version": "0.10.3", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz", + "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==", + "dev": true } } }, @@ -10904,9 +10944,9 @@ "dev": true }, "pacote": { - "version": "11.1.14", - "resolved": "https://registry.npmjs.org/pacote/-/pacote-11.1.14.tgz", - "integrity": "sha512-6c5OhQelaJFDfiw/Zd8MfGCvvFHurSdeGzufZMPvRFImdbNOYFciOINf3DtUNUaU3h98eCb749UyHDsgvL19+A==", + "version": "11.2.4", + "resolved": "https://registry.npmjs.org/pacote/-/pacote-11.2.4.tgz", + "integrity": "sha512-GfTeVQGJ6WyBQbQD4t3ocHbyOmTQLmWjkCKSZPmKiGFKYKNUaM5U2gbLzUW8WG1XmS9yQFnsTFA0k3o1+q4klQ==", "dev": true, "requires": { "@npmcli/git": "^2.0.1", @@ -18957,9 +18997,12 @@ "dev": true }, "zone.js": { - "version": "0.10.3", - "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.10.3.tgz", - "integrity": "sha512-LXVLVEq0NNOqK/fLJo3d0kfzd4sxwn2/h67/02pjCjfKDxgx1i9QqpvtHD8CrBnSSwMw5+dy11O7FRX5mkO7Cg==" + "version": "0.11.4", + "resolved": "https://registry.npmjs.org/zone.js/-/zone.js-0.11.4.tgz", + "integrity": "sha512-DDh2Ab+A/B+9mJyajPjHFPWfYU1H+pdun4wnnk0OcQTNjem1XQSZ2CDW+rfZEUDjv5M19SBqAkjZi0x5wuB5Qw==", + "requires": { + "tslib": "^2.0.0" + } } } } diff --git a/package.json b/package.json index 6a7953a..57a27a5 100644 --- a/package.json +++ b/package.json @@ -46,21 +46,20 @@ } }, "dependencies": { - "@angular/common": "~11.1.0", - "@angular/compiler": "~11.1.0", - "@angular/core": "~11.1.0", + "@angular/common": "~11.2.0", + "@angular/compiler": "~11.2.0", + "@angular/core": "~11.2.0", "@angular/platform-browser": "^11.2.3", "@angular/platform-browser-dynamic": "^11.2.3", "rxjs": "~6.6.0", "tslib": "^2.0.0", - "zone.js": "~0.10.2" + "zone.js": "~0.11.0" }, "devDependencies": { "@angular-builders/jest": "^10.0.1", "@angular-devkit/build-angular": "~0.1101.1", - "@angular/cli": "~11.1.1", - "@angular/compiler-cli": "~11.1.0", - "@angular/elements": "^11.1.0", + "@angular/cli": "~11.2.0", + "@angular/compiler-cli": "~11.2.0", "@babel/core": "^7.12.3", "@types/jest": "^26.0.15", "@types/node": "^12.11.1", @@ -69,7 +68,7 @@ "jest": "^26.6.3", "jest-marbles": "^2.5.1", "ng-mocks": "^11.9.0", - "ng-packagr": "^11.1.2", + "ng-packagr": "^11.2.0", "ngx-build-plus": "^11.0.0", "prettier": "^2.1.2", "ts-jest": "^26.4.4", diff --git a/projects/example-app/src/app/app.module.ts b/projects/example-app/src/app/app.module.ts index 7a918a0..2588053 100644 --- a/projects/example-app/src/app/app.module.ts +++ b/projects/example-app/src/app/app.module.ts @@ -2,10 +2,7 @@ import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppComponent } from './app.component'; -import { - DEFAULT_LOADING_COMPONENT, - LoadableModule, -} from 'projects/ngx-loadable/src/public-api'; +import { LoadableModule } from 'projects/ngx-loadable/src/public-api'; import { SwitchCaseExampleComponent } from './components/switch-case-example/switch-case-example.component'; import { LoadableComponentExampleComponent } from './components/loadable-component-example/loadable-component-example.component'; import { LoadingSpinnerComponent } from './components/loading-spinner/loading-spinner.component'; @@ -17,9 +14,13 @@ import { LoadingSpinnerComponent } from './components/loading-spinner/loading-sp LoadableComponentExampleComponent, LoadingSpinnerComponent, ], - imports: [BrowserModule, LoadableModule], - providers: [ - { provide: DEFAULT_LOADING_COMPONENT, useValue: LoadingSpinnerComponent }, + imports: [ + BrowserModule, + LoadableModule.forRoot({ + defaultComponents: { + loading: LoadingSpinnerComponent, + }, + }), ], bootstrap: [AppComponent], }) diff --git a/projects/example-app/src/polyfills.ts b/projects/example-app/src/polyfills.ts index e49856e..7338712 100644 --- a/projects/example-app/src/polyfills.ts +++ b/projects/example-app/src/polyfills.ts @@ -55,7 +55,7 @@ /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import 'zone.js/dist/zone'; // Included with Angular CLI. +import 'zone.js'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS diff --git a/projects/ngx-loadable/src/lib/loadable/loadable.module.spec.ts b/projects/ngx-loadable/src/lib/loadable/loadable.module.spec.ts new file mode 100644 index 0000000..d4b62d2 --- /dev/null +++ b/projects/ngx-loadable/src/lib/loadable/loadable.module.spec.ts @@ -0,0 +1,7 @@ +import { LoadableModule } from './loadable.module'; + +describe('the loadable module', () => { + it('can be created without options', () => { + expect(LoadableModule.forRoot()).toBeDefined(); + }); +}); diff --git a/projects/ngx-loadable/src/lib/loadable/loadable.module.ts b/projects/ngx-loadable/src/lib/loadable/loadable.module.ts index 596a6f1..49cbbec 100644 --- a/projects/ngx-loadable/src/lib/loadable/loadable.module.ts +++ b/projects/ngx-loadable/src/lib/loadable/loadable.module.ts @@ -1,12 +1,31 @@ -import { NgModule } from '@angular/core'; +import { ModuleWithProviders, NgModule, Provider } from '@angular/core'; import { CommonModule } from '@angular/common'; import { IsLoadingPipe } from './is-loading.pipe'; import { LoadingStatePipe } from './loading-state.pipe'; import { LoadableComponent } from './loadable/loadable.component'; +import { DefaultComponentOptions, ModuleOptions } from './module.options'; +import { DEFAULT_LOADING_COMPONENT } from './loadable.tokens'; + +function defaultComponentProviders( + options: DefaultComponentOptions +): Provider[] { + return !!options.loading + ? [{ provide: DEFAULT_LOADING_COMPONENT, useValue: options.loading }] + : []; +} @NgModule({ declarations: [IsLoadingPipe, LoadingStatePipe, LoadableComponent], imports: [CommonModule], exports: [IsLoadingPipe, LoadingStatePipe, LoadableComponent], }) -export class LoadableModule {} +export class LoadableModule { + public static forRoot( + options: ModuleOptions = {} + ): ModuleWithProviders { + return { + ngModule: LoadableModule, + providers: defaultComponentProviders(options.defaultComponents ?? {}), + }; + } +} diff --git a/projects/ngx-loadable/src/lib/loadable/module.options.ts b/projects/ngx-loadable/src/lib/loadable/module.options.ts new file mode 100644 index 0000000..50d420b --- /dev/null +++ b/projects/ngx-loadable/src/lib/loadable/module.options.ts @@ -0,0 +1,9 @@ +import { Type } from '@angular/core'; + +export interface DefaultComponentOptions { + loading?: Type; +} + +export interface ModuleOptions { + defaultComponents?: DefaultComponentOptions; +}