Upgrade to Angular 13 (#894)

* upgrade to angular 13

* 7.0.0

* fix linting issues

.gitignore

@@ -25,6 +25,7 @@
 !.vscode/extensions.json
 
 # misc
+/.angular/cache
 /.sass-cache
 /connect.lock
 /coverage

angular.json

@@ -139,15 +139,6 @@
             "devServerTarget": "app:serve"
           },
           "configurations": {}
-        },
-        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
-          "options": {
-            "tsConfig": "e2e/tsconfig.e2e.json",
-            "exclude": [
-              "**/node_modules/**"
-            ]
-          }
         }
       }
     },

package.json

@@ -1,14 +1,14 @@
 {
   "name": "@ngstack/core",
   "description": "An open source toolkit for enterprise Angular applications.",
-  "version": "6.0.0",
+  "version": "7.0.0",
   "license": "MIT",
   "author": "Denys Vuika <denys.vuika@gmail.com>",
   "scripts": {
     "postinstall": "ngcc",
     "ng": "ng",
     "start": "ng build translate && ng serve --open",
-    "build": "ng build translate && cp -r README.md dist/@ngstack/translate",
+    "build": "ng build translate --configuration=production && cp -r README.md dist/@ngstack/translate",
     "test": "ng test translate --code-coverage",
     "test:ci": "ng test translate --watch=false --code-coverage",
     "lint": "ng lint translate --format=stylish",
@@ -21,56 +21,56 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^12.0.5",
-    "@angular/cdk": "^12.0.5",
-    "@angular/common": "^12.0.5",
-    "@angular/compiler": "^12.0.5",
-    "@angular/core": "^12.0.5",
-    "@angular/forms": "^12.0.5",
-    "@angular/material": "^12.0.5",
-    "@angular/platform-browser": "^12.0.5",
-    "@angular/platform-browser-dynamic": "^12.0.5",
-    "@angular/router": "^12.0.5",
+    "@angular/animations": "^13.3.3",
+    "@angular/cdk": "^13.3.3",
+    "@angular/common": "^13.3.3",
+    "@angular/compiler": "^13.3.3",
+    "@angular/core": "^13.3.3",
+    "@angular/forms": "^13.3.3",
+    "@angular/material": "^13.3.3",
+    "@angular/platform-browser": "^13.3.3",
+    "@angular/platform-browser-dynamic": "^13.3.3",
+    "@angular/router": "^13.3.3",
     "rxjs": "^6.6.7",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.0.5",
-    "@angular-eslint/builder": "12.1.0",
-    "@angular-eslint/eslint-plugin": "12.1.0",
-    "@angular-eslint/eslint-plugin-template": "12.1.0",
-    "@angular-eslint/schematics": "12.1.0",
-    "@angular-eslint/template-parser": "12.1.0",
-    "@angular/cli": "^12.0.5",
-    "@angular/compiler-cli": "^12.0.5",
-    "@angular/language-service": "^12.0.5",
+    "@angular-devkit/build-angular": "~13.3.3",
+    "@angular-eslint/builder": "13.2.1",
+    "@angular-eslint/eslint-plugin": "13.2.1",
+    "@angular-eslint/eslint-plugin-template": "13.2.1",
+    "@angular-eslint/schematics": "13.2.1",
+    "@angular-eslint/template-parser": "13.2.1",
+    "@angular/cli": "^13.3.3",
+    "@angular/compiler-cli": "^13.3.3",
+    "@angular/language-service": "^13.3.3",
     "@size-limit/preset-small-lib": "^4.12.0",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "~2.0.9",
     "@types/node": "^15.12.2",
-    "@typescript-eslint/eslint-plugin": "4.23.0",
-    "@typescript-eslint/parser": "4.23.0",
+    "@typescript-eslint/eslint-plugin": "5.3.0",
+    "@typescript-eslint/parser": "5.3.0",
     "cspell": "^5.19.7",
-    "eslint": "^7.26.0",
+    "eslint": "^8.2.0",
     "jasmine-core": "~3.6.0",
     "jasmine-spec-reporter": "~5.0.0",
     "karma": "^6.3.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "^2.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.5.0",
-    "ng-packagr": "^12.0.0",
+    "ng-packagr": "^13.3.1",
     "prettier": "^2.3.1",
     "protractor": "~7.0.0",
     "puppeteer": "^10.0.0",
     "size-limit": "^4.12.0",
     "ts-node": "~10.0.0",
     "tslib": "^2.0.0",
-    "typescript": "4.2.4"
+    "typescript": "4.6.3"
   },
   "size-limit": [
     {
-      "path": "dist/@ngstack/translate/fesm2015/ngstack-translate.js",
+      "path": "dist/@ngstack/translate/fesm2020/ngstack-translate.mjs",
       "limit": "5 KB",
       "webpack": false
     }

projects/translate/src/test.ts

@@ -13,7 +13,10 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(),
+  {
+    teardown: { destroyAfterEach: false },
+  }
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);

projects/translate/tsconfig.lib.prod.json

@@ -4,6 +4,6 @@
     "declarationMap": false
   },
   "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial"
   }
 }

src/app/app.component.spec.ts

@@ -5,37 +5,29 @@ import { TranslateModule } from '@ngstack/translate';
 import { HttpClientModule } from '@angular/common/http';
 
 describe('AppComponent', () => {
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [
-          HttpClientModule,
-          RouterTestingModule,
-          TranslateModule.forRoot(),
-        ],
-        declarations: [AppComponent],
-      }).compileComponents();
-    })
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        HttpClientModule,
+        RouterTestingModule,
+        TranslateModule.forRoot(),
+      ],
+      declarations: [AppComponent],
+    }).compileComponents();
+  }));
 
-  it(
-    'should create the app',
-    waitForAsync(() => {
-      const fixture = TestBed.createComponent(AppComponent);
-      const app = fixture.debugElement.componentInstance;
-      expect(app).toBeTruthy();
-    })
-  );
+  it('should create the app', waitForAsync(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
 
-  it(
-    'should render title in a h1 tag',
-    waitForAsync(() => {
-      const fixture = TestBed.createComponent(AppComponent);
-      fixture.detectChanges();
-      const compiled = fixture.debugElement.nativeElement;
-      expect(compiled.querySelector('h1').textContent).toContain(
-        'Welcome to NgStack components.'
-      );
-    })
-  );
+  it('should render title in a h1 tag', waitForAsync(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain(
+      'Welcome to NgStack components.'
+    );
+  }));
 });

src/app/translate-demo/translate-demo.component.spec.ts

@@ -9,14 +9,12 @@ describe('TranslateDemoComponent', () => {
   let component: TranslateDemoComponent;
   let fixture: ComponentFixture<TranslateDemoComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [HttpClientModule, TranslateModule.forRoot()],
-        declarations: [CustomTranslatePipe, TranslateDemoComponent],
-      }).compileComponents();
-    })
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientModule, TranslateModule.forRoot()],
+      declarations: [CustomTranslatePipe, TranslateDemoComponent],
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(TranslateDemoComponent);

src/app/translate-lazy-demo/demo-page/demo-page.component.spec.ts

@@ -8,14 +8,12 @@ describe('DemoPageComponent', () => {
   let component: DemoPageComponent;
   let fixture: ComponentFixture<DemoPageComponent>;
 
-  beforeEach(
-    waitForAsync(() => {
-      TestBed.configureTestingModule({
-        imports: [HttpClientModule, TranslateModule.forRoot()],
-        declarations: [DemoPageComponent],
-      }).compileComponents();
-    })
-  );
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [HttpClientModule, TranslateModule.forRoot()],
+      declarations: [DemoPageComponent],
+    }).compileComponents();
+  }));
 
   beforeEach(() => {
     fixture = TestBed.createComponent(DemoPageComponent);

src/polyfills.ts

@@ -18,16 +18,6 @@
  * BROWSER POLYFILLS
  */
 
-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
-// import 'classlist.js';  // Run `npm install --save classlist.js`.
-
-/**
- * Web Animations `@angular/platform-browser/animations`
- * Only required if AnimationBuilder is used within the application and using IE/Edge or Safari.
- * Standard animation support in Angular DOES NOT require any polyfills (as of Angular 6.0).
- */
-// import 'web-animations-js';  // Run `npm install --save web-animations-js`.
-
 /**
  * By default, zone.js will patch all possible macroTask and DomEvents
  * user can disable parts of macroTask/DomEvents patch by setting following flags

src/test.ts

@@ -12,7 +12,10 @@ declare const require: any;
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(
   BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
+  platformBrowserDynamicTesting(),
+  {
+    teardown: { destroyAfterEach: false },
+  }
 );
 // Then we find all the tests.
 const context = require.context('./', true, /\.spec\.ts$/);