feat: migrate to Angular 11

Author: CodingCloud9527

angular.json

@@ -43,7 +43,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "aot": true,
               "extractLicenses": true,
@@ -127,7 +126,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/ngx-sortablejs/tsconfig.lib.json",
             "project": "projects/ngx-sortablejs/ng-package.json"

package.json

@@ -22,50 +22,49 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~10.2.0",
-    "@angular/common": "~10.2.0",
-    "@angular/compiler": "~10.2.0",
-    "@angular/core": "~10.2.0",
-    "@angular/forms": "~10.2.0",
-    "@angular/platform-browser": "~10.2.0",
-    "@angular/platform-browser-dynamic": "~10.2.0",
-    "@angular/router": "~10.2.0",
+    "@angular/animations": "~11.0.5",
+    "@angular/common": "~11.0.5",
+    "@angular/compiler": "~11.0.5",
+    "@angular/core": "~11.0.5",
+    "@angular/forms": "~11.0.5",
+    "@angular/platform-browser": "~11.0.5",
+    "@angular/platform-browser-dynamic": "~11.0.5",
+    "@angular/router": "~11.0.5",
     "bootstrap": "^4.4.1",
     "ngx-bootstrap": "^4.3.0",
     "rxjs": "~6.5.4",
     "sortablejs": "^1.10.2",
-    "tslib": "^2.0.3",
+    "tslib": "^2.0.0",
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1002.0",
-    "@angular-devkit/build-ng-packagr": "~0.1002.0",
-    "@angular/cli": "~10.2.0",
-    "@angular/compiler-cli": "~10.2.0",
-    "@angular/language-service": "~10.2.0",
+    "@angular-devkit/build-angular": "~0.1100.5",
+    "@angular/cli": "~11.0.5",
+    "@angular/compiler-cli": "~11.0.5",
+    "@angular/language-service": "~11.0.5",
     "@semantic-release/changelog": "^3.0.6",
     "@semantic-release/git": "^7.0.18",
-    "@types/jasmine": "^3.3.16",
+    "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^8.10.59",
     "@types/sortablejs": "^1.10.2",
-    "codelyzer": "^5.2.1",
+    "codelyzer": "^6.0.0",
     "coveralls": "^3.0.9",
     "cpr": "^3.0.1",
-    "jasmine-core": "~3.4.0",
-    "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
+    "jasmine-core": "~3.6.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.1.1",
+    "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "^2.0.6",
-    "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.5.1",
-    "ng-packagr": "^10.1.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "ng-packagr": "^11.0.3",
     "ngx-spec": "^2.1.4",
-    "protractor": "~5.4.0",
+    "protractor": "~7.0.0",
     "semantic-release": "^15.14.0",
     "ts-node": "~7.0.0",
     "tsickle": "^0.39.1",
-    "tslint": "~5.15.0",
+    "tslint": "~6.1.3",
     "typescript": "~4.0.3"
   }
-}
+}

projects/ngx-sortablejs/src/lib/sortablejs.directive.spec.ts

@@ -1,5 +1,5 @@
 import {Component} from '@angular/core';
-import {async, TestBed} from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import {SortablejsModule} from './sortablejs.module';
 
 describe('SortablejsDirective', () => {
@@ -14,7 +14,7 @@ describe('SortablejsDirective', () => {
     items = [1, 2, 3, 4, 5];
   }
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         TestComponent1,

src/app/app.component.spec.ts

@@ -1,9 +1,9 @@
-import { async, TestBed } from '@angular/core/testing';
+import { TestBed, waitForAsync } from '@angular/core/testing';
 import { RouterTestingModule } from '@angular/router/testing';
 import { AppComponent } from './app.component';
 
 describe('AppComponent', () => {
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         AppComponent,
@@ -14,7 +14,7 @@ describe('AppComponent', () => {
     }).compileComponents();
   }));
 
-  it('should create the app', async(() => {
+  it('should create the app', waitForAsync(() => {
     const fixture = TestBed.createComponent(AppComponent);
     const app = fixture.debugElement.componentInstance;
     expect(app).toBeTruthy();

src/app/app.module.ts

@@ -19,29 +19,28 @@ import { TestCasesModule } from './test-cases/test-cases.module';
   imports: [
     BrowserModule,
     RouterModule.forRoot([
-      { path: '', pathMatch: 'full', redirectTo: 'sortable-array' },
-      {
+    { path: '', pathMatch: 'full', redirectTo: 'sortable-array' },
+    {
         path: 'sortable-array',
         component: SimpleSortableComponent,
-      },
-      {
+    },
+    {
         path: 'sortable-form-array',
         component: SortableFormArrayComponent,
-      },
-      {
+    },
+    {
         path: 'custom-options',
         component: SortableWithOptionsComponent,
-      },
-      {
+    },
+    {
         path: 'multiple-lists',
         component: MultipleListsComponent,
-      },
-
-      {
+    },
+    {
         path: 'tests/cross-components-multiple-list',
         component: CrossComponentsMultipleListsComponent,
-      },
-    ]),
+    },
+], { relativeLinkResolution: 'legacy' }),
 
     // global settings
     SortablejsModule.forRoot({

src/app/examples/multiple-lists/multiple-lists.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SortablejsModule } from 'ngx-sortablejs';
 import { MultipleListsComponent } from './multiple-lists.component';
 
 describe('MultipleListsComponent', () => {
   let component: MultipleListsComponent;
   let fixture: ComponentFixture<MultipleListsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [MultipleListsComponent],
       imports: [

src/app/examples/simple-sortable/simple-sortable.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SortablejsModule } from 'ngx-sortablejs';
 import { SimpleSortableComponent } from './simple-sortable.component';
 
 describe('SimpleSortableComponent', () => {
   let component: SimpleSortableComponent;
   let fixture: ComponentFixture<SimpleSortableComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [SimpleSortableComponent],
       imports: [

src/app/examples/sortable-form-array/sortable-form-array.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { SortablejsModule } from 'ngx-sortablejs';
 import { SortableFormArrayComponent } from './sortable-form-array.component';
@@ -7,7 +7,7 @@ describe('SortableFormArrayComponent', () => {
   let component: SortableFormArrayComponent;
   let fixture: ComponentFixture<SortableFormArrayComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [SortableFormArrayComponent],
       imports: [

src/app/examples/sortable-with-options/sortable-with-options.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SortablejsModule } from 'ngx-sortablejs';
 import { SortableWithOptionsComponent } from './sortable-with-options.component';
 
 describe('SortableWithOptionsComponent', () => {
   let component: SortableWithOptionsComponent;
   let fixture: ComponentFixture<SortableWithOptionsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [SortableWithOptionsComponent],
       imports: [

src/app/test-cases/cross-components-multiple-lists/child-component/child-component.component.spec.ts

@@ -1,12 +1,12 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SortablejsModule } from 'ngx-sortablejs';
 import { ChildComponentComponent } from './child-component.component';
 
 describe('ChildComponentComponent', () => {
   let component: ChildComponentComponent;
   let fixture: ComponentFixture<ChildComponentComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [ChildComponentComponent],
       imports: [

src/app/test-cases/cross-components-multiple-lists/cross-components-multiple-lists.component.spec.ts

@@ -1,4 +1,4 @@
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { SortablejsModule } from 'ngx-sortablejs';
 import { ChildComponentComponent } from './child-component/child-component.component';
 import { CrossComponentsMultipleListsComponent } from './cross-components-multiple-lists.component';
@@ -7,7 +7,7 @@ describe('CrossComponentsMultipleListsComponent', () => {
   let component: CrossComponentsMultipleListsComponent;
   let fixture: ComponentFixture<CrossComponentsMultipleListsComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [
         CrossComponentsMultipleListsComponent,