From 8a096434f1b0400d3922722b4207eb63f4803f56 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Wed, 26 Feb 2020 15:56:20 +0300 Subject: [PATCH] feat: update the app template to support Angular 9 #2345 --- templates/app/angular/.gitignore | 6 +- templates/app/angular/.prettierrc | 4 ++ templates/app/angular/e2e/protractor.conf.js | 2 +- templates/app/angular/e2e/src/app.e2e-spec.ts | 2 +- templates/app/angular/e2e/src/app.po.ts | 8 +-- templates/app/angular/karma.conf.js | 2 +- templates/app/angular/package.json | 62 +++++++++---------- templates/app/angular/src/app/app.module.ts | 8 +-- .../angular/src/app/shared/shared.module.ts | 9 +-- .../src/environments/environment.hmr.ts | 25 -------- .../src/environments/environment.prod.ts | 13 ++-- .../angular/src/environments/environment.ts | 13 ++-- templates/app/angular/src/main.ts | 13 +--- templates/app/angular/src/polyfills.ts | 6 +- templates/app/angular/src/test.ts | 7 ++- templates/app/angular/tsconfig.app.json | 6 +- templates/app/angular/tsconfig.json | 15 +++-- templates/app/angular/tslint.json | 3 +- 18 files changed, 87 insertions(+), 117 deletions(-) create mode 100644 templates/app/angular/.prettierrc delete mode 100644 templates/app/angular/src/environments/environment.hmr.ts diff --git a/templates/app/angular/.gitignore b/templates/app/angular/.gitignore index c3569131e4..a8e3c659a1 100644 --- a/templates/app/angular/.gitignore +++ b/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* \ No newline at end of file +yarn.lock \ No newline at end of file diff --git a/templates/app/angular/.prettierrc b/templates/app/angular/.prettierrc new file mode 100644 index 0000000000..554f2a3baa --- /dev/null +++ b/templates/app/angular/.prettierrc @@ -0,0 +1,4 @@ +{ + "singleQuote": true, + "printWidth": 100 +} diff --git a/templates/app/angular/e2e/protractor.conf.js b/templates/app/angular/e2e/protractor.conf.js index 73e4e6806c..7c798cfff0 100644 --- a/templates/app/angular/e2e/protractor.conf.js +++ b/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/', diff --git a/templates/app/angular/e2e/src/app.e2e-spec.ts b/templates/app/angular/e2e/src/app.e2e-spec.ts index ddea6e46a7..544eb2359f 100644 --- a/templates/app/angular/e2e/src/app.e2e-spec.ts +++ b/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 () => { diff --git a/templates/app/angular/e2e/src/app.po.ts b/templates/app/angular/e2e/src/app.po.ts index 5776aa9eb8..b68475e0fc 100644 --- a/templates/app/angular/e2e/src/app.po.ts +++ b/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; + navigateTo(): Promise { + return browser.get(browser.baseUrl) as Promise; } - getTitleText() { - return element(by.css('app-root h1')).getText() as Promise; + getTitleText(): Promise { + return element(by.css('app-root .content span')).getText() as Promise; } } diff --git a/templates/app/angular/karma.conf.js b/templates/app/angular/karma.conf.js index 4e919a630c..2b8c5f5f68 100644 --- a/templates/app/angular/karma.conf.js +++ b/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 }, diff --git a/templates/app/angular/package.json b/templates/app/angular/package.json index c5d6c4e161..7f6036a454 100644 --- a/templates/app/angular/package.json +++ b/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" } } diff --git a/templates/app/angular/src/app/app.module.ts b/templates/app/angular/src/app/app.module.ts index 61312cd801..5df354fb38 100644 --- a/templates/app/angular/src/app/app.module.ts +++ b/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 {} diff --git a/templates/app/angular/src/app/shared/shared.module.ts b/templates/app/angular/src/app/shared/shared.module.ts index 6c4c9b016c..7081b28baf 100644 --- a/templates/app/angular/src/app/shared/shared.module.ts +++ b/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 {} diff --git a/templates/app/angular/src/environments/environment.hmr.ts b/templates/app/angular/src/environments/environment.hmr.ts deleted file mode 100644 index 64e134b252..0000000000 --- a/templates/app/angular/src/environments/environment.hmr.ts +++ /dev/null @@ -1,25 +0,0 @@ -export const environment = { - production: false, - hmr: true, - application: { - name: 'MyProjectName', - logoUrl: '', - }, - oAuthConfig: { - issuer: 'https://localhost:44305', - clientId: 'MyProjectName_App', - dummyClientSecret: '1q2w3e*', - scope: 'MyProjectName', - showDebugInformation: true, - oidc: false, - requireHttps: true, - }, - apis: { - default: { - url: 'https://localhost:44305', - }, - }, - localization: { - defaultResourceName: 'MyProjectName', - }, -}; diff --git a/templates/app/angular/src/environments/environment.prod.ts b/templates/app/angular/src/environments/environment.prod.ts index 5b42ebace3..bf1c0ea488 100644 --- a/templates/app/angular/src/environments/environment.prod.ts +++ b/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' + } }; diff --git a/templates/app/angular/src/environments/environment.ts b/templates/app/angular/src/environments/environment.ts index ca462ff043..6f2a182746 100644 --- a/templates/app/angular/src/environments/environment.ts +++ b/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' + } }; diff --git a/templates/app/angular/src/main.ts b/templates/app/angular/src/main.ts index bbdf75c32d..fa4e0aef33 100644 --- a/templates/app/angular/src/main.ts +++ b/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)); diff --git a/templates/app/angular/src/polyfills.ts b/templates/app/angular/src/polyfills.ts index aa665d6b87..01e24d6f6e 100644 --- a/templates/app/angular/src/polyfills.ts +++ b/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. * diff --git a/templates/app/angular/src/test.ts b/templates/app/angular/src/test.ts index 16317897b1..50193eb0f2 100644 --- a/templates/app/angular/src/test.ts +++ b/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[]; + (id: string): T; + }; +}; // First, initialize the Angular testing environment. getTestBed().initTestEnvironment( diff --git a/templates/app/angular/tsconfig.app.json b/templates/app/angular/tsconfig.app.json index b750221da5..29f5f5864e 100644 --- a/templates/app/angular/tsconfig.app.json +++ b/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"] } diff --git a/templates/app/angular/tsconfig.json b/templates/app/angular/tsconfig.json index 0a91f81078..2f67131c75 100644 --- a/templates/app/angular/tsconfig.json +++ b/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 } } diff --git a/templates/app/angular/tslint.json b/templates/app/angular/tslint.json index 188bd78d32..c8d70f1520 100644 --- a/templates/app/angular/tslint.json +++ b/templates/app/angular/tslint.json @@ -4,7 +4,7 @@ "array-type": false, "arrow-parens": false, "deprecation": { - "severity": "warn" + "severity": "warning" }, "component-class-suffix": true, "contextual-lifecycle": true, @@ -60,7 +60,6 @@ "no-non-null-assertion": true, "no-redundant-jsdoc": true, "no-switch-case-fall-through": true, - "no-use-before-declare": true, "no-var-requires": false, "object-literal-key-quotes": [ true,