feat: update the app template to support Angular 9

#2345

templates/app/angular/.gitignore

@@ -11,8 +11,8 @@
 /node_modules
 
 # profiling files
-chrome-profiler-events.json
-speed-measure-plugin.json
+chrome-profiler-events*.json
+speed-measure-plugin*.json
 
 # IDEs and editors
 /.idea
@@ -45,4 +45,4 @@ testem.log
 .DS_Store
 Thumbs.db
 
-yarn.lock*
+yarn.lock

templates/app/angular/.prettierrc

@@ -0,0 +1,4 @@
+{
+  "singleQuote": true,
+  "printWidth": 100
+}

templates/app/angular/e2e/protractor.conf.js

@@ -13,7 +13,7 @@ exports.config = {
     './src/**/*.e2e-spec.ts'
   ],
   capabilities: {
-    'browserName': 'chrome'
+    browserName: 'chrome'
   },
   directConnect: true,
   baseUrl: 'http://localhost:4200/',

templates/app/angular/e2e/src/app.e2e-spec.ts

@@ -10,7 +10,7 @@ describe('workspace-project App', () => {
 
   it('should display welcome message', () => {
     page.navigateTo();
-    expect(page.getTitleText()).toEqual('Welcome to myProjectName!');
+    expect(page.getTitleText()).toEqual('ng9-abp app is running!');
   });
 
   afterEach(async () => {

templates/app/angular/e2e/src/app.po.ts

@@ -1,11 +1,11 @@
 import { browser, by, element } from 'protractor';
 
 export class AppPage {
-  navigateTo() {
-    return browser.get(browser.baseUrl) as Promise<any>;
+  navigateTo(): Promise<unknown> {
+    return browser.get(browser.baseUrl) as Promise<unknown>;
   }
 
-  getTitleText() {
-    return element(by.css('app-root h1')).getText() as Promise<string>;
+  getTitleText(): Promise<string> {
+    return element(by.css('app-root .content span')).getText() as Promise<string>;
   }
 }

templates/app/angular/karma.conf.js

@@ -16,7 +16,7 @@ module.exports = function (config) {
       clearContext: false // leave Jasmine Spec Runner output visible in browser
     },
     coverageIstanbulReporter: {
-      dir: require('path').join(__dirname, './coverage/myProjectName'),
+      dir: require('path').join(__dirname, './coverage/ng9-abp'),
       reports: ['html', 'lcovonly', 'text-summary'],
       fixWebpackSourcePaths: true
     },

templates/app/angular/package.json

@@ -1,58 +1,54 @@
 {
-  "name": "MyProjectName",
+  "name": "ng9-abp",
   "version": "0.0.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
-    "start:hmr": "ng serve --configuration hmr",
     "build": "ng build",
-    "build:prod": "ng build --prod",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
   "private": true,
   "dependencies": {
-    "@abp/ng.account": "^2.1.0",
-    "@abp/ng.identity": "^2.1.0",
-    "@abp/ng.setting-management": "^2.1.0",
-    "@abp/ng.tenant-management": "^2.1.0",
-    "@abp/ng.theme.basic": "^2.1.0",
-    "@angular/animations": "~8.2.14",
-    "@angular/common": "~8.2.14",
-    "@angular/compiler": "~8.2.14",
+    "@abp/ng.account": "^2.2.0-rc.7",
+    "@abp/ng.identity": "^2.2.0-rc.7",
+    "@abp/ng.setting-management": "^2.2.0-rc.7",
+    "@abp/ng.tenant-management": "^2.2.0-rc.7",
+    "@abp/ng.theme.basic": "^2.2.0-rc.7",
+    "@angular/animations": "~9.0.2",
+    "@angular/common": "~9.0.2",
+    "@angular/compiler": "~9.0.2",
     "@angular/core": "~9.0.2",
-    "@angular/forms": "~8.2.14",
-    "@angular/platform-browser": "~8.2.14",
-    "@angular/platform-browser-dynamic": "~8.2.14",
-    "@angular/router": "~8.2.14",
+    "@angular/forms": "~9.0.2",
+    "@angular/platform-browser": "~9.0.2",
+    "@angular/platform-browser-dynamic": "~9.0.2",
+    "@angular/router": "~9.0.2",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
-    "zone.js": "~0.9.1"
+    "zone.js": "~0.10.2"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~0.803.20",
+    "@angular-devkit/build-angular": "~0.900.3",
     "@angular/cli": "~9.0.3",
-    "@angular/compiler-cli": "~8.2.14",
-    "@angular/language-service": "~8.2.14",
-    "@angularclass/hmr": "^2.1.3",
-    "@ngxs/hmr-plugin": "^3.5.1",
-    "@ngxs/logger-plugin": "^3.5.1",
-    "@types/jasmine": "~3.3.8",
+    "@angular/compiler-cli": "~9.0.2",
+    "@angular/language-service": "~9.0.2",
+    "@ngxs/logger-plugin": "^3.6.2",
+    "@types/jasmine": "~3.5.0",
     "@types/jasminewd2": "~2.0.3",
-    "@types/node": "~8.9.4",
-    "codelyzer": "^5.0.0",
-    "jasmine-core": "~3.4.0",
+    "@types/node": "^12.11.1",
+    "codelyzer": "^5.1.2",
+    "jasmine-core": "~3.5.0",
     "jasmine-spec-reporter": "~4.2.1",
-    "karma": "~4.1.0",
-    "karma-chrome-launcher": "~2.2.0",
-    "karma-coverage-istanbul-reporter": "~2.0.1",
+    "karma": "~4.3.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~2.1.0",
     "karma-jasmine": "~2.0.1",
-    "karma-jasmine-html-reporter": "^1.4.0",
+    "karma-jasmine-html-reporter": "^1.4.2",
     "ngxs-schematic": "^1.1.9",
-    "protractor": "~5.4.0",
-    "ts-node": "~7.0.0",
-    "tslint": "~5.15.0",
+    "protractor": "~5.4.3",
+    "ts-node": "~8.3.0",
+    "tslint": "~5.18.0",
     "typescript": "~3.7.5"
   }
 }

templates/app/angular/src/app/app.module.ts

@@ -22,8 +22,8 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
     CoreModule.forRoot({
       environment,
       requirements: {
-        layouts: LAYOUTS,
-      },
+        layouts: LAYOUTS
+      }
     }),
     ThemeSharedModule.forRoot(),
     AccountConfigModule.forRoot({ redirectUrl: '/' }),
@@ -35,9 +35,9 @@ const LOGGERS = [NgxsLoggerPluginModule.forRoot({ disabled: false })];
     BrowserAnimationsModule,
     AppRoutingModule,
     SharedModule,
-    ...(environment.production ? [] : LOGGERS),
+    ...(environment.production ? [] : LOGGERS)
   ],
   declarations: [AppComponent],
-  bootstrap: [AppComponent],
+  bootstrap: [AppComponent]
 })
 export class AppModule {}

templates/app/angular/src/app/shared/shared.module.ts

@@ -3,7 +3,6 @@ import { NgbDropdownModule } from '@ng-bootstrap/ng-bootstrap';
 import { NgModule } from '@angular/core';
 import { ThemeBasicModule } from '@abp/ng.theme.basic';
 import { ThemeSharedModule } from '@abp/ng.theme.shared';
-import { TableModule } from 'primeng/table';
 import { NgxValidateCoreModule } from '@ngx-validate/core';
 
 @NgModule({
@@ -12,18 +11,16 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';
     CoreModule,
     ThemeSharedModule,
     ThemeBasicModule,
-    TableModule,
     NgbDropdownModule,
-    NgxValidateCoreModule,
+    NgxValidateCoreModule
   ],
   exports: [
     CoreModule,
     ThemeSharedModule,
     ThemeBasicModule,
-    TableModule,
     NgbDropdownModule,
-    NgxValidateCoreModule,
+    NgxValidateCoreModule
   ],
-  providers: [],
+  providers: []
 })
 export class SharedModule {}

templates/app/angular/src/environments/environment.prod.ts

@@ -1,9 +1,8 @@
 export const environment = {
   production: true,
-  hmr: false,
   application: {
     name: 'MyProjectName',
-    logoUrl: '',
+    logoUrl: ''
   },
   oAuthConfig: {
     issuer: 'https://localhost:44305',
@@ -12,14 +11,14 @@ export const environment = {
     scope: 'MyProjectName',
     showDebugInformation: true,
     oidc: false,
-    requireHttps: true,
+    requireHttps: true
   },
   apis: {
     default: {
-      url: 'https://localhost:44305',
-    },
+      url: 'https://localhost:44305'
+    }
   },
   localization: {
-    defaultResourceName: 'MyProjectName',
-  },
+    defaultResourceName: 'MyProjectName'
+  }
 };

templates/app/angular/src/environments/environment.ts

@@ -1,9 +1,8 @@
 export const environment = {
   production: false,
-  hmr: false,
   application: {
     name: 'MyProjectName',
-    logoUrl: '',
+    logoUrl: ''
   },
   oAuthConfig: {
     issuer: 'https://localhost:44305',
@@ -12,14 +11,14 @@ export const environment = {
     scope: 'MyProjectName',
     showDebugInformation: true,
     oidc: false,
-    requireHttps: true,
+    requireHttps: true
   },
   apis: {
     default: {
-      url: 'https://localhost:44305',
-    },
+      url: 'https://localhost:44305'
+    }
   },
   localization: {
-    defaultResourceName: 'MyProjectName',
-  },
+    defaultResourceName: 'MyProjectName'
+  }
 };

templates/app/angular/src/main.ts

@@ -1,20 +1,13 @@
 import { enableProdMode } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { BootstrapModuleFn as Bootstrap, hmr, WebpackModule } from '@ngxs/hmr-plugin';
 
 import { AppModule } from './app/app.module';
 import { environment } from './environments/environment';
 
-declare const module: WebpackModule;
-
 if (environment.production) {
   enableProdMode();
 }
 
-const bootstrap: Bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);
-
-if (environment.hmr) {
-  hmr(module, bootstrap).catch(err => console.error(err));
-} else {
-  bootstrap().catch(err => console.log(err));
-}
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch(err => console.error(err));

templates/app/angular/src/polyfills.ts

@@ -1,3 +1,7 @@
+/***************************************************************************************************
+ * Load `$localize` onto the global scope - used if i18n tags appear in Angular templates.
+ */
+import '@angular/localize/init';
 /**
  * This file includes polyfills needed by Angular and is loaded before the app.
  * You can add your own extra polyfills to this file.
@@ -35,7 +39,7 @@
  * will put import in the top of bundle, so user need to create a separate file
  * in this directory (for example: zone-flags.ts), and put the following flags
  * into that file, and then add the following code before importing zone.js.
- * import './zone-flags.ts';
+ * import './zone-flags';
  *
  * The flags allowed in zone-flags.ts are listed here.
  *

templates/app/angular/src/test.ts

@@ -7,7 +7,12 @@ import {
   platformBrowserDynamicTesting
 } from '@angular/platform-browser-dynamic/testing';
 
-declare const require: any;
+declare const require: {
+  context(path: string, deep?: boolean, filter?: RegExp): {
+    keys(): string[];
+    <T>(id: string): T;
+  };
+};
 
 // First, initialize the Angular testing environment.
 getTestBed().initTestEnvironment(

templates/app/angular/tsconfig.app.json

@@ -2,8 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "outDir": "./out-tsc/app",
-    "types": ["node"]
+    "types": []
   },
-  "include": ["src/**/*.ts"],
-  "exclude": ["src/test.ts", "src/**/*.spec.ts"]
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
 }

templates/app/angular/tsconfig.json

@@ -6,18 +6,17 @@
     "sourceMap": true,
     "declaration": false,
     "downlevelIteration": true,
-    "emitDecoratorMetadata": true,
     "experimentalDecorators": true,
     "module": "esnext",
     "moduleResolution": "node",
     "importHelpers": true,
     "target": "es2015",
-    "typeRoots": [
-      "node_modules/@types"
-    ],
-    "lib": [
-      "es2018",
-      "dom"
-    ]
+    "typeRoots": ["node_modules/@types"],
+    "lib": ["es2018", "dom"]
+  },
+  "angularCompilerOptions": {
+    "fullTemplateTypeCheck": true,
+    "strictInjectionParameters": true,
+    "enableIvy": true
   }
 }