feat(core): prepare for differential-loading

switched target: es2015, ngxs workaround for es2015

ngxs/store#773

.deploy/keycloak/README.md

@@ -74,7 +74,7 @@ PROXY_ADDRESS_FORWARDING="true"
 
 Refer https://stackoverflow.com/questions/53550321/keycloak-gatekeeper-aud-claim-and-client-id-do-not-match
 
-1. add `ngxapi_audience` **Client Scopes** at Realm `ngx` with Audience mapper name: `ngxapi_audience_mapper` and adding `ngxapi` Client under `Included Client Audience`.
+1. add `ngxapi_audience` **Client Scopes** at Realm `ngx` with Audience mapper name: `ngxapi_audience_mapper`, Mapper Type --> `audience` and adding `ngxapi` Client under `Included Client Audience`.
 2. for `ngxweb` client, add `ngxapi_audience` at **Client Scopes** tab
 3. for `ngxapi` client, add `ngxapi_audience` at **Client Scopes** tab (for Swagger API Docs)
 

.deploy/keycloak/openshift/README.md

@@ -26,6 +26,9 @@ oc delete all -l app=keycloak -n ngx
 oc delete all,configmap,secret -l app=keycloak -n ngx
 oc delete pvc --all -n ngx
 
+# force delete po
+oc delete po keycloak-5-x8nfc --grace-period=0 --force
+
 # redeploy
 From OpenShift Console UI
 Applications > Deployments > ngx > Deploy

.deploy/webapp/Dockerfile

@@ -14,7 +14,7 @@ COPY . .
 ARG NODE_OPTIONS="--max-old-space-size=1024"
 ENV NODE_OPTIONS $NODE_OPTIONS
 ENV NODE_ENV production
-RUN $(npm bin)/ng build webapp --prod
+RUN $(npm bin)/ng build webapp -c=production
 
 ######################################################################
 FROM nginxinc/nginx-unprivileged:1.15.10-alpine

PLAYBOOK.md

@@ -12,7 +12,7 @@ Do-it-yourself step-by-step instructions to create this project structure from s
 | Yarn                 | v1.15.2  |          |
 | Lerna                | v3.13.2  |          |
 | Angular CLI          | v8.0.0   |          |
-| @nrwl/schematics     | v7.7.2   |          |
+| @nrwl/workspace      | v8.0.0   |          |
 | @nestjs/cli          | v6.0.0   |          |
 | semantic-release-cli | v4.1.1   |          |
 | commitizen           | v3.0.7   |          |
@@ -79,10 +79,8 @@ yarn global list
 # find out which packages need to be updated
 yarn global upgrade-interactive
 # set scss as default css processor
-ng config -g schematics.@nrwl/schematics:component.styleext scss
+ng config -g schematics.@nrwl/workspace:component.styleext scss
 ng config -g cli.packageManager yarn
-# set jest as default TestRunner
-ng config -g schematics.@nrwl/schematics:library.unitTestRunner jest
 # set scss as default styleext for ngx-formly
 ng config -g schematics@ngx-formly/schematics:component.styleext scss
 # check your global defaults
@@ -109,9 +107,9 @@ for nx help `yarn run help`
 # create workspace Ref: https://nx.dev/tutorial/01-create-application
 yarn create nx-workspace ngx-starter-kit --npm-scope=ngx-starter-kit --package-manager=yarn  --preset=empty --style=scss
 # or
-ng new ngx-starter-kit --collection=@nrwl/schematics --npm-scope=ngx-starter-kit --package-manager=yarn --preset=empty --style=scss --verbose
+ng new ngx-starter-kit --collection=@nrwl/workspace --npm-scope=ngx-starter-kit --package-manager=yarn --preset=empty --style=scss --verbose
 # or if you want *bazel* builds instead of *webpack*
-ng new ngx-starter-kit --collection=@nrwl/schematics --npm-scope=ngx-starter-kit --package-manager=yarn --preset=empty --style=scss --bazel  --verbose
+ng new ngx-starter-kit --collection=@nrwl/workspace --npm-scope=ngx-starter-kit --package-manager=yarn --preset=empty --style=scss --bazel  --verbose
 cd ngx-starter-kit
 
 > remove all `ngrx` NPM pagages from package.json, we will use `ngxs`
@@ -142,7 +140,7 @@ ng add @nrwl/nest@next
 ng g app chatApp --framework=web-components --routing --style=scss --prefix=ngx --unit-test-runner=jest --e2e-test-runner=cypress --tags=micro-app-module   -d
 ng add ngx-build-plus --project chat-box
 ng add @angular/elements --project chat-box ?
-arn add @webcomponents/custom-elements ?
+yarn add @webcomponents/custom-elements ?
 
 # generate api app with nestjs
 ng g @nrwl/nest:app api --unit-test-runner=jest --tags=api-module -d
@@ -169,66 +167,75 @@ yarn add -D @types/hammerjs
 yarn add date-fns@next
 
 # Add Flex-Layout
-arn add @angular/flex-layout
+yarn add @angular/flex-layout
 # Add in-memory-web-api
-arn add angular-in-memory-web-api
+yarn add angular-in-memory-web-api
 # Add oauth2-oidc
-~arn add angular-oauth2-oidc~
-arn add @xmlking/angular-oauth2-oidc-all
+~yarn add angular-oauth2-oidc~
+yarn add @xmlking/angular-oauth2-oidc-all
 
 # Add NGXS
 ng add @ngxs/schematics # makesure "defaultCollection" is set back to "@nrwl/schematics" in angular.json
 # or add NGXS manually
-arn add @ngxs/devtools-plugin @ngxs/{store,router-plugin,form-plugin,storage-plugin,devtools-plugin}
-arn add -D @ngxs/schematics
+yarn add @ngxs/devtools-plugin @ngxs/{store,router-plugin,form-plugin,storage-plugin,devtools-plugin}
+yarn add -D @ngxs/schematics
 
-arn add @ngxs-labs/immer-adapter
-arn add immer
+yarn add @ngxs-labs/immer-adapter
+yarn add immer
 
 # Add formly
 ng add @ngx-formly/schematics --ui-theme=material
 
 # Add Filepond
-arn add ngx-filepond \
+yarn add ngx-filepond \
 filepond-plugin-file-encode \
 filepond-plugin-file-validate-size \
 filepond-plugin-file-validate-type \
 filepond-plugin-image-crop \
 filepond-plugin-image-preview
 
 # Add Socket.io
-arn add socket.io-client
-arn add -D @types/socket.io-client
+yarn add socket.io-client
+yarn add -D @types/socket.io-client
 
 # add lite-server to test PWA locally
-arn add -D lite-server
+yarn add -D lite-server
 
 # Add miscellaneous
-arn add ngx-perfect-scrollbar smooth-scrollbar ngx-page-scroll screenfull
+yarn add ngx-perfect-scrollbar smooth-scrollbar ngx-page-scroll screenfull
 
 # Add Dev Tools
-arn add -D standard-version
-arn add -D angular-cli-ghpages
-arn add -D @compodoc/compodoc
 
-arn add -D loaders.css
-arn add -D api-ai-javascript
+yarn add -D loaders.css
+yarn add -D api-ai-javascript
 
-# install without saving
-arn add trianglify --no-save --no-lock
+yarn add -D @nrwl/nest
+yarn add -D @nrwl/web
 
+# install without saving
+yarn add trianglify --no-save --no-lock
+
+# Add Optional Tools
+yarn add -O angular-cli-ghpages
+yarn add -O standard-version
+yarn add -O @compodoc/compodoc
+yarn add -O semantic-release @semantic-release/{changelog,git,github,npm}
+yarn add -O commitizen cz-conventional-changelog
+yarn add -O @commitlint/{config-conventional,cli}
+yarn add -O husky
+yarn add -O lint-staged
 # install cypress for e2e testing and remove protractor
-arn add -D cypress @types/jquery
+yarn add -O cypress @types/jquery
+
 
 # for CI/CD automation and release
 # first time semantic-release setup
 semantic-release-cli setup
 
-arn add -D semantic-release @semantic-release/{changelog,git,github,npm}
-arn add -D commitizen cz-conventional-changelog
-arn add -D @commitlint/{config-conventional,cli}
-arn add -D husky
-arn add -D lint-staged
+yarn workspace @ngx-starter-kit/api add kubernetes-client @xmlking/jwks-rsa @nestjs/{terminus,cqrs}  
+yarn workspace @ngx-starter-kit/api add addnodemon supertest  -O
+
+yarn workspace @ngx-starter-kit/tools add cpx --dev
 ```
 
 > update 3rd party modules/schematics
@@ -241,7 +248,9 @@ ng update @angular/cli --next
 ng update @angular/material --force
 ng update @angular/pwa --next
 ng update @ngx-formly/schematics --ui-theme=material
-ng update @nrwl/schematics --force
+ng update @nrwl/workspace --next --force
+ng update @nrwl/angular --next
+ng update @nrwl/nest --next
 ```
 
 #### Generate Artifacts
@@ -533,6 +542,8 @@ ng g workspace-schematic store
 # run workspace-schematic `store`
 # *** always delete ./dist folder when you change schematic implementation ***
 yarn workspace-schematic store models/sumoDemo -- --project=grid  -d
+# build workspace tools
+yarn workspace tools schematic:build
 ```
 
 ### Install
@@ -685,6 +696,8 @@ lerna -v
 ng -v
 npx nx --version
 nest info
+# list workspaces
+yarn workspaces info
 ```
 
 ### Production build and deployment

angular.json

@@ -278,18 +278,6 @@
             "jestConfig": "apps/api/jest.config.js",
             "tsConfig": "apps/api/tsconfig.spec.json"
           }
-        },
-        "sumo": {
-          "builder": "@nrwl/workspace:run-commands",
-          "options": {
-            "outputPath": "dist/apps/api",
-            "commands": [
-              {
-                "command": "ts-node -r tsconfig-paths/register --project apps/api/tsconfig.app.json apps/api/src/main.ts"
-              }
-            ],
-            "parallel": false
-          }
         }
       }
     },

apps/api/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "api",
+  "name": "@ngx-starter-kit/api",
   "version": "0.0.0",
   "scripts": {
     "typeorm": "ts-node -r tsconfig-paths/register --project apps/api/tsconfig.app.json node_modules/.bin/typeorm",
@@ -21,8 +21,8 @@
     "@nestjs/platform-express": "^6.1.0",
     "@nestjs/platform-socket.io": "^6.1.0",
     "@nestjs/swagger": "^3.0.0",
-    "@nestjs/terminus": "^6.1.2",
-    "@nestjs/typeorm": "^6.0.0",
+    "@nestjs/terminus": "^6.1.4",
+    "@nestjs/typeorm": "^6.1.0",
     "@nestjs/websockets": "^6.1.0",
     "@nestjsx/crud": "^3.2.0",
     "@xmlking/jwks-rsa": "^1.4.3",
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@types/helmet": "^0.0.43",
-    "@types/nodemailer": "^4.6.0",
+    "@types/nodemailer": "^4.6.8",
     "@types/passport": "1.0.0",
     "@types/passport-jwt": "^3.0.1",
     "@types/socket.io": "^2.1.0",

libs/core/src/lib/core.module.ts

@@ -107,7 +107,7 @@ library.add(faTwitter, faGithub, faGoogle);
     {
       provide: APP_INITIALIZER,
       useFactory: noop,
-      deps: [EventBusHandler, RouteHandler, AppHandler],
+      deps: [EventBusHandler, RouteHandler],
       multi: true,
     },
     {
@@ -122,6 +122,10 @@ export class CoreModule {
     @Optional()
     @SkipSelf()
     parentModule: CoreModule,
+    // HINT: AppHandler is injected here to initialize it as Module Run Block,
+    // APP_INITIALIZER is not an option when target to es2015
+    // https://github.com/ngxs/store/issues/773
+    appHandler: AppHandler,
   ) {
     if (parentModule) {
       throw new Error('CoreModule is already loaded. Import it in the AppModule only');

libs/core/src/lib/state/route.handler.ts

@@ -14,7 +14,6 @@ export class RouteHandler {
   constructor(
     private router: Router,
     private actions$: Actions,
-    private store: Store,
     private analytics: GoogleAnalyticsService,
     private pageTitle: PageTitleService,
   ) {

libs/svg-viewer/src/lib/svg-viewer.service.ts

@@ -1,71 +1,71 @@
 import { Injectable, Optional } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
-import { of as observableOf, Observable } from 'rxjs';
+import { of , Observable } from 'rxjs';
 import { catchError, finalize, map, share } from 'rxjs/operators';
 import { SvgViewerConfig } from './svg-viewer.config';
 
 /** @dynamic */
 @Injectable()
 export class SvgViewerService {
-  private static _cache: Map<string, SVGElement>;
-  private static _inProgressReqs: Map<string, Observable<SVGElement>>;
+  private static cache: Map<string, SVGElement>;
+  private static inProgressReqs: Map<string, Observable<SVGElement>>;
 
-  private static _baseUrl: string;
+  private static baseUrl: string;
 
-  constructor(@Optional() config: SvgViewerConfig, private _http: HttpClient) {
-    if (config && !SvgViewerService._baseUrl) {
+  constructor(@Optional() config: SvgViewerConfig, private http: HttpClient) {
+    if (config && !SvgViewerService.baseUrl) {
       this.setBaseUrl(config);
     }
 
-    if (!SvgViewerService._cache) {
-      SvgViewerService._cache = new Map<string, SVGElement>();
+    if (!SvgViewerService.cache) {
+      SvgViewerService.cache = new Map<string, SVGElement>();
     }
 
-    if (!SvgViewerService._inProgressReqs) {
-      SvgViewerService._inProgressReqs = new Map<string, Observable<SVGElement>>();
+    if (!SvgViewerService.inProgressReqs) {
+      SvgViewerService.inProgressReqs = new Map<string, Observable<SVGElement>>();
     }
   }
 
   getSVG(url: string, cache: boolean = true): Observable<SVGElement> {
     const absUrl = this.getAbsoluteUrl(url);
 
     // Return cached copy if it exists
-    if (cache && SvgViewerService._cache.has(absUrl)) {
-      return observableOf(this._cloneSVG(SvgViewerService._cache.get(absUrl)));
+    if (cache && SvgViewerService.cache.has(absUrl)) {
+      return of(this.cloneSVG(SvgViewerService.cache.get(absUrl)));
     }
 
     // Return existing fetch observable
-    if (SvgViewerService._inProgressReqs.has(absUrl)) {
-      return SvgViewerService._inProgressReqs.get(absUrl);
+    if (SvgViewerService.inProgressReqs.has(absUrl)) {
+      return SvgViewerService.inProgressReqs.get(absUrl);
     }
 
     // Otherwise, make the HTTP call to fetch
-    const req = this._http.get(absUrl, { responseType: 'text' }).pipe(
+    const req = this.http.get(absUrl, { responseType: 'text' }).pipe(
       catchError((err: any) => err),
-      finalize(() => SvgViewerService._inProgressReqs.delete(absUrl)),
+      finalize(() => SvgViewerService.inProgressReqs.delete(absUrl)),
       share(),
       map((svgText: string) => {
-        const svgEl = this._svgElementFromString(svgText);
-        SvgViewerService._cache.set(absUrl, svgEl);
-        return this._cloneSVG(svgEl);
+        const svgEl = this.svgElementFromString(svgText);
+        SvgViewerService.cache.set(absUrl, svgEl);
+        return this.cloneSVG(svgEl);
       }),
     );
 
-    SvgViewerService._inProgressReqs.set(absUrl, req);
+    SvgViewerService.inProgressReqs.set(absUrl, req);
 
     return req;
   }
 
   setBaseUrl(config: SvgViewerConfig): void {
     if (config) {
-      SvgViewerService._baseUrl = config.baseUrl;
+      SvgViewerService.baseUrl = config.baseUrl;
     }
   }
 
   getAbsoluteUrl(url: string): string {
     // Prepend user-configured base if present and URL doesn't seem to have its own
-    if (SvgViewerService._baseUrl && !/^https?:\/\//i.test(url)) {
-      url = SvgViewerService._baseUrl + url.slice(url.indexOf('assets/'));
+    if (SvgViewerService.baseUrl && !/^https?:\/\//i.test(url)) {
+      url = SvgViewerService.baseUrl + url.slice(url.indexOf('assets/'));
 
       // Convert leading "//" to "/" to prevent a malformed URL
       // See https://github.com/arkon/ng-inline-svg/issues/50
@@ -77,7 +77,7 @@ export class SvgViewerService {
     return url;
   }
 
-  private _svgElementFromString(str: string): SVGElement | never {
+  private svgElementFromString(str: string): SVGElement | never {
     const div: HTMLElement = document.createElement('DIV');
     div.innerHTML = str;
 
@@ -90,7 +90,7 @@ export class SvgViewerService {
     return svg;
   }
 
-  private _cloneSVG(svg: SVGElement): SVGElement {
+  private cloneSVG(svg: SVGElement): SVGElement {
     return svg.cloneNode(true) as SVGElement;
   }
 }