feat: upgrade to angular 11 (ng-select#1844)

BREAKING CHANGE: update to Angular 11
* remove tsickle (related: angular/angular#37221)

The closure compiler advanced optimizations has been disabled with
angular/angular#37221 and therefore the tsickle pass is not going to be
very beneficial and blocks updating to Angular 11. When closure compiler
is better supported this configuration can be added back.

* build ng-option-highlight with ng-select

angular.json

@@ -10,7 +10,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "src/ng-select/tsconfig.lib.json",
             "project": "src/ng-select/ng-package.json"
@@ -85,9 +85,13 @@
             "tsConfig": "src/demo/tsconfig.app.json",
             "aot": true,
             "deployUrl": "/ng-select/",
-            "extractCss": true,
-            "assets": ["src/demo/favicon.ico", "src/demo/assets"],
-            "styles": ["src/demo/styles.scss"],
+            "assets": [
+              "src/demo/favicon.ico",
+              "src/demo/assets"
+            ],
+            "styles": [
+              "src/demo/styles.scss"
+            ],
             "scripts": []
           },
           "configurations": {
@@ -101,7 +105,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -141,23 +144,19 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "src/ng-option-highlight/tsconfig.lib.json",
             "project": "src/ng-option-highlight/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "src/ng-option-highlight/tsconfig.lib.prod.json"
-            }
           }
         },
         "test": {
           "builder": "@angular-devkit/build-angular:karma",
           "options": {
             "main": "src/ng-option-highlight/test.ts",
             "tsConfig": "src/ng-option-highlight/tsconfig.spec.json",
-            "karmaConfig": "src/ng-option-highlight/karma.conf.js"
+            "karmaConfig": "src/ng-option-highlight/karma.conf.js",
+            "watch": false
           }
         },
         "lint": {

package.json

@@ -5,18 +5,18 @@
     "npm": ">= 3.0.0"
   },
   "scripts": {
-    "build": "ng build ng-select && yarn build:themes && yarn copy-sass",
+    "build": "ng build ng-select && ng build ng-option-highlight && yarn build:themes && yarn copy-sass",
     "build:demo": "ng build demo --prod --baseHref=/ng-select && yarn copy-examples",
     "build:themes": "node-sass --output-style compressed src/ng-select/themes/ -o dist/ng-select/themes",
     "copy-sass": "mkdir -p dist/ng-select/scss && cp src/ng-select/**/*.scss dist/ng-select/scss",
     "copy-examples": "cp -r src/demo/app/examples dist/demo",
     "start": "ng serve",
     "test:watch": "ng test ng-select --watch",
-    "test": "ng test ng-select --code-coverage",
+    "test": "ng test ng-select --code-coverage && ng test ng-option-highlight --code-coverage",
     "test:ci": "ng test --watch=false --browsers=ChromeHeadless --code-coverage",
     "coveralls": "cat ./coverage/ng-select/lcov.info | ./node_modules/coveralls/bin/coveralls.js",
-    "lint": "ng lint ng-select",
-    "postpublish": "cp -r dist/ng-select/package.json src/ng-select",
+    "lint": "ng lint ng-select && ng lint ng-option-highlight",
+    "postpublish": "cp dist/ng-select/package.json src/ng-select && cp dist/ng-option-highlight/package.json src/ng-option-highlight",
     "release": "semantic-release"
   },
   "release": {
@@ -35,49 +35,47 @@
     ]
   },
   "dependencies": {
-    "@angular/animations": "~10.0.0",
-    "@angular/common": "~10.0.0",
-    "@angular/compiler": "~10.0.0",
-    "@angular/core": "~10.0.0",
-    "@angular/forms": "~10.0.0",
-    "@angular/localize": "^10.0.0",
-    "@angular/platform-browser": "~10.0.0",
-    "@angular/platform-browser-dynamic": "~10.0.0",
-    "@angular/router": "~10.0.0",
-    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
+    "@angular/animations": "~11.1.0",
+    "@angular/common": "~11.1.0",
+    "@angular/compiler": "~11.1.0",
+    "@angular/core": "~11.1.0",
+    "@angular/forms": "~11.1.0",
+    "@angular/localize": "^11.1.0",
+    "@angular/platform-browser": "~11.1.0",
+    "@angular/platform-browser-dynamic": "~11.1.0",
+    "@angular/router": "~11.1.0",
+    "@ng-bootstrap/ng-bootstrap": "^9.0.2",
     "bootstrap": "^4.5.0",
     "rxjs": "~6.5.5",
     "tslib": "^2.0.0",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1000.4",
-    "@angular-devkit/build-ng-packagr": "~0.1000.4",
-    "@angular/cli": "~10.0.0",
-    "@angular/compiler-cli": "~10.0.0",
-    "@angular/language-service": "~10.0.0",
+    "@angular-devkit/build-angular": "~0.1101.1",
+    "@angular/cli": "~11.1.1",
+    "@angular/compiler-cli": "~11.1.0",
+    "@angular/language-service": "~11.1.0",
     "@semantic-release/changelog": "^3.0.4",
     "@stackblitz/sdk": "^1.3.0",
-    "@types/jasmine": "^3.3.13",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.6",
     "@types/node": "^12.11.1",
     "codelyzer": "^6.0.0",
     "coveralls": "^3.0.2",
     "gh-pages-travis": "^1.0.4",
-    "jasmine-core": "~3.5.0",
+    "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~5.0.0",
+    "karma": "~5.2.3",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "~3.0.2",
-    "karma-jasmine": "~3.3.0",
+    "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^10.0.3",
+    "ng-packagr": "^11.1.2",
     "node-sass": "^4.12.0",
     "semantic-release": "^17.2.3",
     "standard-version": "^8.0.1",
     "ts-node": "~8.3.0",
-    "tsickle": "^0.39.1",
     "tslint": "~6.1.0",
-    "typescript": "~3.9.7"
+    "typescript": "~4.1.3"
   }
 }

release.sh

@@ -16,3 +16,5 @@ echo push to npm
 cp README.md ./dist/ng-select/
 cd ./dist/ng-select/
 yarn publish --access=public
+cd ./dist/ng-option-highlight/
+yarn publish --access=public

src/demo/app/app.module.ts

@@ -23,8 +23,9 @@ import { RouteViewerComponent } from './shared/route-viewer/route-viewer.compone
         RouterModule.forRoot(
             appRoutes,
             {
-                useHash: true
-            }
+    useHash: true,
+    relativeLinkResolution: 'legacy'
+}
         )
     ],
     providers: [

src/demo/tsconfig.app.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/app",
     "types": [

src/ng-option-highlight/package.json

@@ -5,7 +5,7 @@
   "license": "MIT",
   "repository": "ng-select/ng-select",
   "peerDependencies": {
-    "@angular/common": ">=10.0.0 <11.0.0",
-    "@angular/core": "^>=10.0.0 <11.0.0"
+    "@angular/common": ">=11.0.0 <12.0.0",
+    "@angular/core": "^>=11.0.0 <12.0.0"
   }
 }

src/ng-option-highlight/tsconfig.lib.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "target": "es2015",

src/ng-option-highlight/tsconfig.spec.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
     "types": [

src/ng-select/lib/ng-select.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, discardPeriodicTasks, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { ComponentFixture, discardPeriodicTasks, fakeAsync, TestBed, tick, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { Component, DebugElement, ErrorHandler, NgZone, Type, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ConsoleService } from './console.service';
@@ -1374,7 +1374,7 @@ describe('NgSelectComponent', () => {
             expect(fixture.componentInstance.select.isOpen).toBeTruthy();
         }));
 
-        it('should remove appended dropdown when it is destroyed', async(() => {
+        it('should remove appended dropdown when it is destroyed', waitForAsync(() => {
             const fixture = createTestingModule(
                 NgSelectTestCmp,
                 `
@@ -1899,7 +1899,7 @@ describe('NgSelectComponent', () => {
             tick();
         }));
 
-        it('should display custom dropdown option template', async(() => {
+        it('should display custom dropdown option template', waitForAsync(() => {
             const fixture = createTestingModule(
                 NgSelectTestCmp,
                 `<ng-select [items]="cities" [(ngModel)]="selectedCity">
@@ -1934,7 +1934,7 @@ describe('NgSelectComponent', () => {
             expect(el.innerHTML).toBe('selected 1');
         }));
 
-        it('should display custom footer and header template', async(() => {
+        it('should display custom footer and header template', waitForAsync(() => {
             const fixture = createTestingModule(
                 NgSelectTestCmp,
                 `<ng-select [items]="cities" [(ngModel)]="selectedCity">
@@ -1958,7 +1958,7 @@ describe('NgSelectComponent', () => {
             });
         }));
 
-        it('should display custom tag template', async(() => {
+        it('should display custom tag template', waitForAsync(() => {
             const fixture = createTestingModule(
                 NgSelectTestCmp,
                 `<ng-select [items]="cities" [(ngModel)]="selectedCity" [addTag]="true">
@@ -2478,7 +2478,7 @@ describe('NgSelectComponent', () => {
                 </ng-select>`);
         });
 
-        it('should be visible when no value selected', async(() => {
+        it('should be visible when no value selected', waitForAsync(() => {
             fixture.detectChanges();
             fixture.whenStable().then(() => {
                 const element = fixture.componentInstance.select.element;
@@ -3530,7 +3530,7 @@ describe('NgSelectComponent', () => {
     });
 
     describe('Append to', () => {
-        it('should append dropdown to body', async(() => {
+        it('should append dropdown to body', waitForAsync(() => {
             const fixture = createTestingModule(
                 NgSelectTestCmp,
                 `<ng-select [items]="cities"
@@ -3549,7 +3549,7 @@ describe('NgSelectComponent', () => {
             })
         }));
 
-        it('should append dropdown to custom selector', async(() => {
+        it('should append dropdown to custom selector', waitForAsync(() => {
             const fixture = createTestingModule(
                 NgSelectTestCmp,
                 `
@@ -3569,7 +3569,7 @@ describe('NgSelectComponent', () => {
             });
         }));
 
-        it('should set correct dropdown panel horizontal position and width when appended to custom selector', async(() => {
+        it('should set correct dropdown panel horizontal position and width when appended to custom selector', waitForAsync(() => {
             const fixture = createTestingModule(
                 NgSelectTestCmp,
                 `
@@ -3594,7 +3594,7 @@ describe('NgSelectComponent', () => {
             });
         }));
 
-        it('should apply global appendTo from NgSelectConfig', async(() => {
+        it('should apply global appendTo from NgSelectConfig', waitForAsync(() => {
             const config = new NgSelectConfig();
             config.appendTo = 'body';
             const fixture = createTestingModule(
@@ -3617,7 +3617,7 @@ describe('NgSelectComponent', () => {
             });
         }));
 
-        it('should not apply global appendTo from NgSelectConfig if appendTo prop explicitly provided in template', async(() => {
+        it('should not apply global appendTo from NgSelectConfig if appendTo prop explicitly provided in template', waitForAsync(() => {
             const config = new NgSelectConfig();
             config.appendTo = 'body';
             const fixture = createTestingModule(

src/ng-select/package.json

@@ -19,9 +19,9 @@
     "angular2"
   ],
   "peerDependencies": {
-    "@angular/common": ">=10.0.0 <11.0.0",
-    "@angular/core": ">=10.0.0 <11.0.0",
-    "@angular/forms": ">=10.0.0 <11.0.0"
+    "@angular/common": ">=11.0.0 <12.0.0",
+    "@angular/core": ">=11.0.0 <12.0.0",
+    "@angular/forms": ">=11.0.0 <12.0.0"
   },
   "dependencies": {
     "tslib": "^2.0.0"

src/ng-select/tsconfig.lib.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/lib",
     "target": "es2015",
@@ -12,7 +12,6 @@
     ]
   },
   "angularCompilerOptions": {
-    "annotateForClosureCompiler": true,
     "skipTemplateCodegen": true,
     "strictMetadataEmit": true,
     "fullTemplateTypeCheck": true,

src/ng-select/tsconfig.spec.json

@@ -1,5 +1,5 @@
 {
-  "extends": "../../tsconfig.base.json",
+  "extends": "../../tsconfig.json",
   "compilerOptions": {
     "outDir": "../../out-tsc/spec",
     "types": ["jasmine", "node"]