Merge pull request #117 from billyjov/feature/upgrade

chore: upgrade to angular and nx 13

.gitignore

@@ -25,6 +25,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/
 /.sass-cache
 /connect.lock
 /coverage
@@ -40,3 +41,6 @@ testem.log
 # System Files
 .DS_Store
 Thumbs.db
+
+# angular-star-rating
+@packaged/angular-star-rating

angular.json

@@ -0,0 +1,181 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "",
+  "projects": {
+    "angular-star-rating": {
+      "projectType": "library",
+      "root": "libs/angular-star-rating",
+      "sourceRoot": "libs/angular-star-rating/src",
+      "architect": {
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "libs/angular-star-rating/**/*.ts",
+              "libs/angular-star-rating/**/*.html"
+            ]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "options": {
+            "jestConfig": "libs/angular-star-rating/jest.config.js",
+            "passWithNoTests": true,
+            "codeCoverage": true
+          }
+        }
+      }
+    },
+    "angular5-example": {
+      "root": "apps/angular5-example",
+      "sourceRoot": "apps/angular5-example/src",
+      "projectType": "application",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/apps/angular5-example",
+            "index": "apps/angular5-example/src/index.html",
+            "main": "apps/angular5-example/src/main.ts",
+            "polyfills": "apps/angular5-example/src/polyfills.ts",
+            "tsConfig": "apps/angular5-example/tsconfig.app.json",
+            "assets": [
+              "apps/angular5-example/src/favicon.ico",
+              "apps/angular5-example/src/assets",
+              "apps/angular5-example/src/assets/images",
+              "apps/angular5-example/src/assets/fontawesome"
+            ],
+            "styles": ["apps/angular5-example/src/styles.scss"],
+            "scripts": [],
+            "vendorChunk": true,
+            "extractLicenses": false,
+            "buildOptimizer": false,
+            "sourceMap": true,
+            "optimization": false,
+            "namedChunks": true,
+            "aot": false
+          },
+          "configurations": {
+            "production": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "apps/angular5-example/src/environments/environment.ts",
+                  "with": "apps/angular5-example/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            },
+            "test": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "apps/angular5-example/src/environments/environment.ts",
+                  "with": "apps/angular5-example/src/environments/environment.prod.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            },
+            "development": {
+              "budgets": [
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "libs/environments/src/environment.ts",
+                  "with": "libs/environments/src/environment.dev.ts"
+                }
+              ],
+              "optimization": true,
+              "outputHashing": "all",
+              "sourceMap": false,
+              "namedChunks": false,
+              "aot": true,
+              "extractLicenses": true,
+              "vendorChunk": false,
+              "buildOptimizer": true
+            }
+          }
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "options": {
+            "browserTarget": "angular5-example:build"
+          },
+          "configurations": {
+            "production": {
+              "browserTarget": "angular5-example:build:production"
+            },
+            "test": {
+              "browserTarget": "angular5-example:build:test"
+            },
+            "development": {
+              "browserTarget": "angular5-example:build:development"
+            }
+          }
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "angular5-example:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "main": "apps/angular5-example/src/test.ts",
+            "polyfills": "apps/angular5-example/src/polyfills.ts",
+            "tsConfig": "apps/angular5-example/tsconfig.spec.json",
+            "karmaConfig": "apps/angular5-example/karma.conf.js",
+            "codeCoverage": true,
+            "browsers": "ChromeHeadlessNoSandbox",
+            "styles": ["apps/angular5-example/src/styles.scss"],
+            "scripts": [],
+            "assets": [
+              "apps/angular5-example/src/favicon.ico",
+              "apps/angular5-example/src/assets"
+            ]
+          }
+        },
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
+          "options": {
+            "lintFilePatterns": [
+              "apps/angular5-example/**/*.ts",
+              "apps/angular5-example/**/*.html"
+            ]
+          }
+        }
+      },
+      "tags": []
+    }
+  }
+}

apps/angular5-example/src/app/app.module.ts

@@ -3,7 +3,7 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { BrowserModule } from '@angular/platform-browser';
 import { RouterModule } from '@angular/router';
-import { NxModule } from '@nrwl/nx';
+
 import { AppComponent } from './app.component';
 import { EventBindingsComponent } from './components/event-bindings/event-bindings.component';
 import { FormControlStarRatingComponent } from './components/form-control-star-rating/form-control-star-rating.component';
@@ -18,12 +18,11 @@ const DECLARATIONS = [
   EventBindingsComponent,
   FormControlStarRatingComponent,
   CustomStyleComponent,
-  CustomStarsComponent
+  CustomStarsComponent,
 ];
 @NgModule({
   imports: [
     BrowserModule,
-    NxModule.forRoot(),
     ReactiveFormsModule,
     StarRatingModule.forRoot(),
     StaticModuleModule,
@@ -32,45 +31,47 @@ const DECLARATIONS = [
         {
           path: '',
           redirectTo: 'form',
-          pathMatch: 'full'
+          pathMatch: 'full',
         },
         {
           path: 'property-bindings',
-          component: PropertyBindingsComponent
+          component: PropertyBindingsComponent,
         },
         {
           path: 'event-bindings',
-          component: EventBindingsComponent
+          component: EventBindingsComponent,
         },
         {
           path: 'form-control',
-          component: FormControlStarRatingComponent
+          component: FormControlStarRatingComponent,
         },
         {
           path: 'custom-style',
-          component: CustomStyleComponent
+          component: CustomStyleComponent,
         },
         {
           path: 'custom-stars',
-          component: CustomStarsComponent
+          component: CustomStarsComponent,
         },
         // static-config-override routes in its module
         {
           path: 'lazy-config-override',
-          loadChildren:
-            'apps/angular5-example/src/app/lazy-module/lazy-module.module#LazyModuleModule'
+          loadChildren: () =>
+            import(
+              'apps/angular5-example/src/app/lazy-module/lazy-module.module'
+            ).then((m) => m.LazyModuleModule),
         },
         {
           path: '**',
-          redirectTo: 'property-bindings'
-        }
+          redirectTo: 'property-bindings',
+        },
       ],
       {
-        useHash: true
+        useHash: true,
       }
-    )
+    ),
   ],
   declarations: [DECLARATIONS],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {}

apps/angular5-example/src/app/components/custom-style/custom-style.component.scss

@@ -2,9 +2,9 @@ $color-negative-rating: #ffff00;
 $color-ok-rating: #00ff00;
 $color-positive-rating: #ff00ff;
 $color-default-rating: #00f;
-@import "~css-star-rating/scss/star-rating";
+// TODO: fix after css-star-rating refactoring.
+// @import "~css-star-rating/scss/star-rating";
 
 .rating.color-ok .star-container .star svg {
   fill: #000 !important;
 }
-

apps/angular5-example/src/app/components/property-bindings/property-bindings.component.ts

@@ -2,25 +2,24 @@ import { Component, OnDestroy, OnInit } from '@angular/core';
 import {
   ClickEvent,
   HoverRatingChangeEvent,
-  RatingChangeEvent
+  RatingChangeEvent,
 } from '@angular-star-rating-lib/angular-star-rating';
 
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { Subject } from 'rxjs/Subject';
-import 'rxjs/add/operator/takeUntil';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 import {
   starRatingColor,
   starRatingLabelPosition,
   starRatingSizes,
   starRatingSpeed,
   starRatingStarSpace,
-  starRatingStarTypes
+  starRatingStarTypes,
 } from '@angular-star-rating-lib/angular-star-rating/src/interfaces/star-rating-config.interface';
 
 @Component({
   selector: 'property-bindings',
   templateUrl: './property-bindings.component.html',
-  styles: [``]
 })
 export class PropertyBindingsComponent implements OnInit, OnDestroy {
   private onDestroy$: Subject<boolean> = new Subject<boolean>();
@@ -30,21 +29,21 @@ export class PropertyBindingsComponent implements OnInit, OnDestroy {
     'default',
     'negative',
     'ok',
-    'positive'
+    'positive',
   ];
   labelPositionOptions: Array<starRatingLabelPosition | string> = [
     'top',
     'right',
     'left',
-    'bottom'
+    'bottom',
   ];
   starOptions: Array<starRatingStarTypes> = ['svg', 'icon', 'custom-icon'];
   speedOptions: Array<starRatingSpeed> = ['immediately', 'noticeable', 'slow'];
   sizeOptions: Array<starRatingSizes> = ['small', 'medium', 'large'];
   spaceOptions: Array<starRatingStarSpace | string> = [
     'around',
     'between',
-    'no'
+    'no',
   ];
 
   bindingsForm: FormGroup;
@@ -86,7 +85,7 @@ export class PropertyBindingsComponent implements OnInit, OnDestroy {
       getColor: [],
       useCustomGetColor: [false],
       getHalfStarVisible: [],
-      useCustomGetHalfStarVisible: [false]
+      useCustomGetHalfStarVisible: [false],
     });
   }
 
@@ -120,8 +119,8 @@ export class PropertyBindingsComponent implements OnInit, OnDestroy {
   updateGetHalfStarVisibleBinding() {
     this.bindingsForm
       .get('useCustomGetHalfStarVisible')
-      .valueChanges.takeUntil(this.onDestroy$)
-      .subscribe(v => {
+      .valueChanges.pipe(takeUntil(this.onDestroy$))
+      .subscribe((v) => {
         if (v) {
           this.bindingsForm
             .get('getHalfStarVisible')

apps/angular5-example/src/polyfills.ts

@@ -42,7 +42,7 @@
 
 /** Evergreen browsers require these. **/
 // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove.
-import 'core-js/es7/reflect';
+// import 'core-js/es7/reflect';
 
 /**
  * Required to support Web Animations `@angular/platform-browser/animations`.
@@ -53,7 +53,7 @@ import 'core-js/es7/reflect';
 /***************************************************************************************************
  * Zone JS is required by Angular itself.
  */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.
 
 /***************************************************************************************************
  * APPLICATION IMPORTS