refactor(transformers): use Angular downlevel-ctor transformer (#1099)

Since we don't support Angular 9 anymore, it is safe to import `downlevel-ctor` transformer from `@angular/compiler-cli`

examples/example-app-v10/src/app/app.component.ts

@@ -1,10 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { FooService } from './foo.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'example-app-v10';
+
+  constructor(private fooService: FooService) {}
+
+  ngOnInit(): void {
+    this.fooService.getFoo();
+  }
 }

examples/example-app-v10/src/app/foo.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FooService {
+  getFoo(): string {
+    return 'foo';
+  }
+}

examples/example-app-v11/src/app/app.component.ts

@@ -1,10 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { FooService } from './foo.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'example-app-v11';
+
+  constructor(private fooService: FooService) {}
+
+  ngOnInit(): void {
+    this.fooService.getFoo();
+  }
 }

examples/example-app-v11/src/app/foo.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FooService {
+  getFoo(): string {
+    return 'foo';
+  }
+}

examples/example-app-v12-monorepo/projects/app1/src/app/app.component.ts

@@ -1,10 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { FooService } from './foo.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'app1';
+
+  constructor(private fooService: FooService) {}
+
+  ngOnInit(): void {
+    this.fooService.getFoo();
+  }
 }

examples/example-app-v12-monorepo/projects/app1/src/app/foo.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FooService {
+  getFoo(): string {
+    return 'foo';
+  }
+}

examples/example-app-v12-monorepo/projects/app2/src/app/app.component.ts

@@ -1,10 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { FooService } from './foo.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'app2';
+
+  constructor(private fooService: FooService) {}
+
+  ngOnInit(): void {
+    this.fooService.getFoo();
+  }
 }

examples/example-app-v12-monorepo/projects/app2/src/app/foo.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FooService {
+  getFoo(): string {
+    return 'foo';
+  }
+}

examples/example-app-v12/src/app/app.component.ts

@@ -1,10 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { FooService } from './foo.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'example-app-v12';
+
+  constructor(private fooService: FooService) {}
+
+  ngOnInit(): void {
+    this.fooService.getFoo();
+  }
 }

examples/example-app-v12/src/app/foo.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FooService {
+  getFoo(): string {
+    return 'foo';
+  }
+}

examples/example-app-yarn-workspace/packages/angular-app/package.json

@@ -10,27 +10,26 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.2.2",
-    "@angular/common": "~12.2.2",
-    "@angular/compiler": "~12.2.2",
-    "@angular/core": "~12.2.2",
-    "@angular/forms": "~12.2.2",
-    "@angular/platform-browser": "~12.2.2",
-    "@angular/platform-browser-dynamic": "~12.2.2",
-    "@angular/router": "~12.2.2",
-    "angular-gridster2": "^12.1.0",
+    "@angular/animations": "~12.2.10",
+    "@angular/common": "~12.2.10",
+    "@angular/compiler": "~12.2.10",
+    "@angular/core": "~12.2.10",
+    "@angular/forms": "~12.2.10",
+    "@angular/platform-browser": "~12.2.10",
+    "@angular/platform-browser-dynamic": "~12.2.10",
+    "@angular/router": "~12.2.10",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.2",
-    "@angular/cli": "~12.2.2",
-    "@angular/compiler-cli": "~12.2.2",
-    "@types/jest": "^27.0.1",
+    "@angular-devkit/build-angular": "~12.2.10",
+    "@angular/cli": "~12.2.10",
+    "@angular/compiler-cli": "~12.2.10",
+    "@types/jest": "^27.0.2",
     "@types/node": "^12.11.1",
-    "jest": "^27.0.6",
-    "jest-preset-angular": "^10.0.0",
+    "jest": "^27.3.0",
+    "jest-preset-angular": "^10.0.1",
     "typescript": "~4.3.2"
   }
-}
+}

examples/example-app-yarn-workspace/packages/angular-app/src/app/app.component.ts

@@ -1,10 +1,18 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+
+import { FooService } from './foo.service';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css'],
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'example-app-yarn-workspace';
+
+  constructor(private fooService: FooService) {}
+
+  ngOnInit(): void {
+    this.fooService.getFoo();
+  }
 }

examples/example-app-yarn-workspace/packages/angular-app/src/app/foo.service.ts

@@ -0,0 +1,10 @@
+import { Injectable } from '@angular/core';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class FooService {
+  getFoo(): string {
+    return 'foo';
+  }
+}