Merge pull request #8506 from IgniteUI/angular-11

Updating to Angular 11

Author: Lipata

angular.json

@@ -50,7 +50,6 @@
               "optimization": true,
               "outputHashing": "all",
               "sourceMap": false,
-              "extractCss": true,
               "namedChunks": false,
               "extractLicenses": true,
               "vendorChunk": false,
@@ -162,7 +161,7 @@
       "prefix": "lib",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:ng-packagr",
           "options": {
             "tsConfig": "projects/igniteui-angular/tsconfig.lib.json",
             "project": "projects/igniteui-angular/ng-package.json"

package-lock.json

@@ -45,14 +45,14 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^10.1.0",
-    "@angular/common": "^10.1.0",
-    "@angular/compiler": "^10.1.0",
-    "@angular/core": "^10.1.0",
-    "@angular/forms": "^10.1.0",
-    "@angular/platform-browser": "^10.1.0",
-    "@angular/platform-browser-dynamic": "^10.1.0",
-    "@angular/router": "^10.1.0",
+    "@angular/animations": "^11.0.0-rc.1",
+    "@angular/common": "^11.0.0-rc.1",
+    "@angular/compiler": "^11.0.0-rc.1",
+    "@angular/core": "^11.0.0-rc.1",
+    "@angular/forms": "^11.0.0-rc.1",
+    "@angular/platform-browser": "^11.0.0-rc.1",
+    "@angular/platform-browser-dynamic": "^11.0.0-rc.1",
+    "@angular/router": "^11.0.0-rc.1",
     "@igniteui/material-icons-extended": "^2.4.0",
     "@types/hammerjs": "^2.0.36",
     "@types/source-map": "0.5.2",
@@ -71,12 +71,11 @@
     "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.1001.0",
-    "@angular-devkit/build-ng-packagr": "~0.1001.0",
-    "@angular-devkit/schematics": "^10.1.0",
-    "@angular/cli": "~10.1.0",
-    "@angular/compiler-cli": "^10.1.0",
-    "@angular/language-service": "^10.1.0",
+    "@angular-devkit/build-angular": "~0.1100.0-rc.1",
+    "@angular-devkit/schematics": "^11.0.0-rc.1",
+    "@angular/cli": "~11.0.0-rc.1",
+    "@angular/compiler-cli": "^11.0.0-rc.1",
+    "@angular/language-service": "^11.0.0-rc.1",
     "@angularclass/hmr": "^2.1.3",
     "@types/jasmine": "^3.3.16",
     "@types/jasminewd2": "^2.0.8",
@@ -101,7 +100,7 @@
     "jasmine": "~3.5.0",
     "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~5.0.2",
-    "karma": "~5.0.0",
+    "karma": "~5.2.3",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "~3.3.0",
@@ -110,7 +109,7 @@
     "karma-junit-reporter": "~2.0.1",
     "karma-spec-reporter": "~0.0.32",
     "lunr": "^2.3.8",
-    "ng-packagr": "^10.1.0",
+    "ng-packagr": "^11.0.0-next.3",
     "pngcrush": "^2.0.1",
     "protractor": "~7.0.0",
     "sassdoc": "^2.7.3",

package.json

@@ -8,17 +8,12 @@ const configPaths = ['/.angular.json', '/angular.json'];
 
 export function getProjectPaths(config: WorkspaceSchema, appendPrefix = true): string[] {
     const sourceDirs = [];
-    let globalPrefix;
 
-    if (config.schematics && config.schematics['@schematics/angular:component']) {
-        // updated projects have global prefix rather than per-project:
-        globalPrefix = config.schematics['@schematics/angular:component'].prefix;
-    }
     const projects = getProjects(config);
     for (const proj of projects) {
         let sourcePath = path.join('/', proj.sourceRoot);
-        if (appendPrefix && (proj.prefix || globalPrefix)) {
-            sourcePath = path.join(sourcePath, proj.prefix || globalPrefix);
+        if (appendPrefix && (proj.prefix)) {
+            sourcePath = path.join(sourcePath, proj.prefix);
         }
         sourceDirs.push(normalize(sourcePath));
     }

projects/igniteui-angular/migrations/common/util.ts

@@ -60,30 +60,4 @@ describe('Update 6.0.2', () => {
             `@import "~igniteui-angular/lib/core/styles/themes/_index.scss";`
         );
     });
-
-    it('should update theme import in sass files', async () => {
-        const config = JSON.parse(JSON.stringify(configJson));
-        config.projects.testProj['schematics'] = {
-            '@schematics/angular:component': {
-                styleext: 'sass'
-            }
-        };
-        appTree.overwrite('/angular.json', JSON.stringify(config));
-        appTree.create(
-            '/testSrc/appPrefix/component/test.component.sass',
-            `@import "~igniteui-angular/core/styles/themes/index";`
-        );
-        appTree.create(
-            '/testSrc/testSrc/styles.sass',
-            `@import "~igniteui-angular/core/styles/themes/_index.scss";`
-        );
-        const tree = await schematicRunner.runSchematicAsync('migration-03', {}, appTree)
-            .toPromise();
-        expect(tree.readContent('/testSrc/appPrefix/component/test.component.sass')).toEqual(
-            `@import "~igniteui-angular/lib/core/styles/themes/index";`
-        );
-        expect(tree.readContent('/testSrc/testSrc/styles.sass')).toEqual(
-            `@import "~igniteui-angular/lib/core/styles/themes/_index.scss";`
-        );
-    });
 });

projects/igniteui-angular/migrations/update-6_02/index.spec.ts

@@ -11,27 +11,17 @@ const version = '6.0.2';
 
 export default function(): Rule {
     return (host: Tree, context: SchematicContext) => {
-        let globalStyleExt: string;
         const themeImport = '~igniteui-angular/core/styles/themes';
         const newThemeImport = '~igniteui-angular/lib/core/styles/themes';
         const config = getWorkspace(host);
         const projects = getProjects(config);
 
         context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
 
-        if (config.schematics && config.schematics['@schematics/angular:component']) {
-            // updated projects have global prefix rather than per-project:
-            globalStyleExt = config.schematics['@schematics/angular:component'].styleext;
-        }
-
         for (const proj of projects) {
             const dir = host.getDir(proj.sourceRoot);
-            let ext = globalStyleExt || 'scss';
-            if (proj.schematics && proj.schematics['@schematics/angular:component']) {
-                ext = proj.schematics['@schematics/angular:component'].styleext || ext;
-            }
             dir.visit((path, entry) => {
-                if (path.endsWith('.' + ext)) {
+                if (path.endsWith('.scss')) {
                     let content = entry.content.toString();
                     if (content.indexOf(themeImport) !== -1) {
                         content = content.replace(themeImport, newThemeImport);

projects/igniteui-angular/migrations/update-6_02/index.ts

@@ -28,7 +28,6 @@ export default function(): Rule {
         '$_default-shape-pagination',
         '$_square-shape-pagination'];
 
-        let globalStyleExt: string;
         const gridPaginatorComponentImport = '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-component';
         const gridPaginatorThemeImport = '~igniteui-angular/lib/core/styles/components/grid-paginator/grid-paginator-theme';
         const paginatorComponentImport = '~igniteui-angular/lib/core/styles/components/paginator/paginator-component';
@@ -40,19 +39,10 @@ export default function(): Rule {
 
         const update = new UpdateChanges(__dirname, host, context);
 
-        if (config.schematics && config.schematics['@schematics/angular:component']) {
-            // updated projects have global prefix rather than per-project:
-            globalStyleExt = config.schematics['@schematics/angular:component'].styleext;
-        }
-
         for (const proj of projects) {
             const dir = host.getDir(proj.sourceRoot);
-            let ext = globalStyleExt || 'scss';
-            if (proj.schematics && proj.schematics['@schematics/angular:component']) {
-                ext = proj.schematics['@schematics/angular:component'].styleext || ext;
-            }
             dir.visit((path, entry) => {
-                if (path.endsWith('.' + ext)) {
+                if (path.endsWith('.scss')) {
                     let content = entry.content.toString();
                     if (content.match(/\bigx-grid-paginator\b/g)) {
                         content = content.replace(/\bigx-grid-paginator\b/g, 'igx-paginator');

projects/igniteui-angular/migrations/update-8_2_6/index.ts

@@ -2,7 +2,7 @@ import { IgxActionStripComponent } from './action-strip.component';
 import { Component, ViewChild, ElementRef, ViewContainerRef } from '@angular/core';
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { IgxIconModule } from '../icon/public_api';
-import { TestBed, async, fakeAsync } from '@angular/core/testing';
+import { TestBed, fakeAsync, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { wait } from '../test-utils/ui-interactions.spec';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -45,7 +45,7 @@ describe('igxActionStrip', () => {
 
     describe('Initialization and rendering tests: ', () => {
         configureTestSuite();
-        beforeAll(async(() => {
+        beforeAll(waitForAsync(() => {
             TestBed.configureTestingModule({
                 declarations: [
                     IgxActionStripTestingComponent
@@ -103,7 +103,7 @@ describe('igxActionStrip', () => {
 
     describe('render content as menu', () => {
         configureTestSuite();
-        beforeAll(async(() => {
+        beforeAll(waitForAsync(() => {
             TestBed.configureTestingModule({
                 declarations: [
                     IgxActionStripMenuTestingComponent,

projects/igniteui-angular/src/lib/action-strip/action-strip.component.spec.ts

@@ -1,7 +1,7 @@
 import { Component, ViewChild, OnInit } from '@angular/core';
 import { IgxActionStripComponent } from '../action-strip.component';
 import { configureTestSuite } from '../../test-utils/configure-suite';
-import { TestBed, async, fakeAsync } from '@angular/core/testing';
+import { TestBed, fakeAsync, waitForAsync } from '@angular/core/testing';
 import { IgxIconModule } from '../../icon/public_api';
 import { IgxGridModule, IgxGridComponent } from '../../grids/grid/public_api';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -16,7 +16,7 @@ describe('igxGridEditingActions #grid ', () => {
     let actionStrip: IgxActionStripComponent;
     let grid: IgxGridComponent;
     configureTestSuite();
-    beforeAll(async(() => {
+    beforeAll(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
                 IgxActionStripTestingComponent,

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts

@@ -1,7 +1,7 @@
 import { Component, ViewChild, OnInit } from '@angular/core';
 import { IgxActionStripComponent } from '../action-strip.component';
 import { configureTestSuite } from '../../test-utils/configure-suite';
-import { TestBed, async, fakeAsync } from '@angular/core/testing';
+import { TestBed, fakeAsync, waitForAsync } from '@angular/core/testing';
 import { IgxIconModule } from '../../icon/public_api';
 import { IgxGridModule, IgxGridComponent } from '../../grids/grid/public_api';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
@@ -15,7 +15,7 @@ describe('igxGridPinningActions #grid ', () => {
     let actionStrip: IgxActionStripComponent;
     let grid: IgxGridComponent;
     configureTestSuite();
-    beforeAll(async(() => {
+    beforeAll(waitForAsync(() => {
         TestBed.configureTestingModule({
             declarations: [
                 IgxActionStripTestingComponent,