fix(template): update dependencies of angular template (#12184)

Fixes TIMOB-28200

templates/app/angular-default/template/.eslintrc.json

@@ -0,0 +1,104 @@
+/**
+ * -----------------------------------------------------
+ * NOTES ON CONFIGURATION STRUCTURE
+ * -----------------------------------------------------
+ *
+ * Out of the box, ESLint does not support TypeScript or HTML. Naturally those are the two
+ * main file types we care about in Angular projects, so we have to do a little extra work
+ * to configure ESLint exactly how we need to.
+ *
+ * Fortunately, ESLint gives us an "overrides" configuration option which allows us to set
+ * different lint tooling (parser, plugins, rules etc) for different file types, which is
+ * critical because our .ts files require a different parser and different rules to our
+ * .html (and our inline Component) templates.
+ */
+ {
+  "root": true,
+  "overrides": [
+    /**
+     * -----------------------------------------------------
+     * TYPESCRIPT FILES (COMPONENTS, SERVICES ETC) (.ts)
+     * -----------------------------------------------------
+     */
+    {
+      "files": ["*.ts"],
+      "parserOptions": {
+        "project": [
+          "tsconfig.*?.json"
+        ],
+        "createDefaultProgram": true
+      },
+      "extends": ["plugin:@angular-eslint/recommended"],
+      "rules": {
+        /**
+         * Any TypeScript related rules you wish to use/reconfigure over and above the
+         * recommended set provided by the @angular-eslint project would go here.
+         *
+         * There are some examples below from the @angular-eslint plugin and ESLint core:
+         */
+        "@angular-eslint/directive-selector": [
+          "error",
+          { "type": "attribute", "prefix": "app", "style": "camelCase" }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          { "type": "element", "prefix": "app", "style": "kebab-case" }
+        ],
+        "quotes": ["error", "single", { "allowTemplateLiterals": true }]
+      }
+    },
+
+    /**
+     * -----------------------------------------------------
+     * COMPONENT TEMPLATES
+     * -----------------------------------------------------
+     *
+     * If you use inline templates, make sure you read the notes on the configuration
+     * object after this one to understand how they relate to this configuration directly
+     * below.
+     */
+    {
+      "files": ["*.component.html"],
+      "extends": ["plugin:@angular-eslint/template/recommended"],
+      "rules": {
+        /**
+         * Any template/HTML related rules you wish to use/reconfigure over and above the
+         * recommended set provided by the @angular-eslint project would go here.
+         *
+         * There is an example below from ESLint core (note, this specific example is not
+         * necessarily recommended for all projects):
+         */
+        "max-len": ["error", { "code": 140 }]
+      }
+    },
+
+    /**
+     * -----------------------------------------------------
+     * EXTRACT INLINE TEMPLATES (from within .component.ts)
+     * -----------------------------------------------------
+     *
+     * This extra piece of configuration is necessary to extract inline
+     * templates from within Component metadata, e.g.:
+     *
+     * @Component({
+     *  template: `<h1>Hello, World!</h1>`
+     * })
+     * ...
+     *
+     * It works by extracting the template part of the file and treating it as
+     * if it were a full .html file, and it will therefore match the configuration
+     * specific for *.component.html above when it comes to actual rules etc.
+     *
+     * NOTE: This processor will skip a lot of work when it runs if you don't use
+     * inline templates in your projects currently, so there is no great benefit
+     * in removing it, but you can if you want to.
+     *
+     * You won't specify any rules here. As noted above, the rules that are relevant
+     * to inline templates are the same as the ones defined for *.component.html.
+     */
+    {
+      "files": ["*.component.ts"],
+      "extends": ["plugin:@angular-eslint/template/process-inline-templates"]
+    }
+  ]
+}

templates/app/angular-default/template/package.json

@@ -17,20 +17,20 @@
     "reflect-metadata": "^0.1.13",
     "rxjs": "^6.5.4",
     "titanium-angular": "^0.2.0",
-    "zone.js": "^0.10.3"
+    "zone.js": "^0.11.1"
   },
   "devDependencies": {
-    "@angular-eslint/eslint-plugin": "0.0.1-alpha.32",
-    "@angular-eslint/eslint-plugin-template": "0.0.1-alpha.32",
-    "@angular-eslint/template-parser": "0.0.1-alpha.32",
+    "@angular-eslint/eslint-plugin": "0.5.0-beta.4",
+    "@angular-eslint/eslint-plugin-template": "0.5.0-beta.4",
+    "@angular-eslint/template-parser": "0.5.0-beta.4",
     "@angular/compiler-cli": "~9.1.0",
     "@ngtools/webpack": "~9.1.0",
     "@titanium-sdk/webpack-plugin-angular": "^0.1.2",
-    "@types/titanium": "^9.0.1",
-    "@typescript-eslint/eslint-plugin": "^3.6.1",
-    "@typescript-eslint/parser": "^3.6.1",
-    "eslint": "^7.4.0",
+    "@types/titanium": "~9.1.0",
+    "@typescript-eslint/eslint-plugin": "^4.4.1",
+    "@typescript-eslint/parser": "^4.4.1",
+    "eslint": "^7.11.0",
     "typescript": "~3.8.0",
-    "webpack": "^4.43.0"
+    "webpack": "^4.44.0"
   }
 }

templates/app/angular-default/template/src/main.aot.ts

@@ -1,4 +1,4 @@
 import { platformTitanium } from 'titanium-angular';
-import { AppModuleNgFactory } from "./app/app.module.ngfactory";
+import { AppModuleNgFactory } from './app/app.module.ngfactory';
 
 platformTitanium().bootstrapModuleFactory(AppModuleNgFactory);

templates/app/angular-default/template/tsconfig.json

@@ -14,11 +14,7 @@
       "es2018",
       "dom"
     ],
-    "preserveSymlinks": true,
-    "typeRoots": [
-      "typings",
-      "node_modules/@types"
-    ]
+    "preserveSymlinks": true
   },
   "files": [
     "src/main.ts",