From 20df573da592577de3316da2ef4774148fdefe54 Mon Sep 17 00:00:00 2001 From: Oliver Cooper Date: Fri, 20 Mar 2020 16:35:32 +0000 Subject: [PATCH 01/23] Add Angular 9 '@Injectable()' to tutorials and book store sample. --- docs/en/Tutorials/Part-1.md | 2 ++ docs/en/Tutorials/Part-2.md | 4 ++++ docs/pt-BR/Tutorials/Angular/Part-I.md | 2 ++ 3 files changed, 8 insertions(+) diff --git a/docs/en/Tutorials/Part-1.md b/docs/en/Tutorials/Part-1.md index 9f8671d92a..a0aa6612e9 100644 --- a/docs/en/Tutorials/Part-1.md +++ b/docs/en/Tutorials/Part-1.md @@ -982,11 +982,13 @@ import { GetBooks } from '../actions/books.actions'; import { Books } from '../models/books'; import { BooksService } from '../../books/shared/books.service'; import { tap } from 'rxjs/operators'; +import { Injectable } from '@angular/core'; @State({ name: 'BooksState', defaults: { books: {} } as Books.State, }) +@Injectable() export class BooksState { @Selector() static getBooks(state: Books.State) { diff --git a/docs/en/Tutorials/Part-2.md b/docs/en/Tutorials/Part-2.md index a754893114..9565724cb8 100644 --- a/docs/en/Tutorials/Part-2.md +++ b/docs/en/Tutorials/Part-2.md @@ -574,11 +574,13 @@ import { GetBooks, CreateUpdateBook } from '../actions/books.actions'; //<== add import { Books } from '../models/books'; import { BooksService } from '../../books/shared/books.service'; import { tap } from 'rxjs/operators'; +import { Injectable } from '@angular/core'; @State({ name: 'BooksState', defaults: { books: {} } as Books.State, }) +@Injectable() export class BooksState { @Selector() static getBooks(state: Books.State) { @@ -1330,11 +1332,13 @@ import { GetBooks, CreateUpdateBook, DeleteBook } from '../actions/books.actions import { Books } from '../models/books'; import { BooksService } from '../../books/shared/books.service'; import { tap } from 'rxjs/operators'; +import { Injectable } from '@angular/core'; @State({ name: 'BooksState', defaults: { books: {} } as Books.State, }) +@Injectable() export class BooksState { @Selector() static getBooks(state: Books.State) { diff --git a/docs/pt-BR/Tutorials/Angular/Part-I.md b/docs/pt-BR/Tutorials/Angular/Part-I.md index 3b79483cd3..3b0b1daf1b 100644 --- a/docs/pt-BR/Tutorials/Angular/Part-I.md +++ b/docs/pt-BR/Tutorials/Angular/Part-I.md @@ -537,11 +537,13 @@ import { GetBooks } from '../actions/books.actions'; import { Books } from '../models/books'; import { BooksService } from '../../books/shared/books.service'; import { tap } from 'rxjs/operators'; +import { Injectable } from '@angular/core'; @State({ name: 'BooksState', defaults: { books: {} } as Books.State, }) +@Injectable() export class BooksState { @Selector() static getBooks(state: Books.State) { From 22a4916ac379ae397fb39a5cf16987c469938516 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 21 Apr 2020 16:25:29 +0300 Subject: [PATCH 02/23] chore: upgrade typescript version --- templates/module/angular/package.json | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/templates/module/angular/package.json b/templates/module/angular/package.json index a8d63e389d..56812cb9ca 100644 --- a/templates/module/angular/package.json +++ b/templates/module/angular/package.json @@ -13,10 +13,10 @@ "private": true, "dependencies": { "@abp/ng.account": "~2.6.0", - "@abp/ng.theme.basic": "~2.6.0", "@abp/ng.identity": "~2.6.0", - "@abp/ng.tenant-management": "~2.6.0", "@abp/ng.setting-management": "~2.6.0", + "@abp/ng.tenant-management": "~2.6.0", + "@abp/ng.theme.basic": "~2.6.0", "@angular/animations": "~8.2.14", "@angular/common": "~8.2.14", "@angular/compiler": "~8.2.14", @@ -55,6 +55,6 @@ "ts-node": "~7.0.0", "tsickle": "^0.37.0", "tslint": "~5.15.0", - "typescript": "~3.5.3" + "typescript": "~3.8.3" } } From 76361fb6fb89a13c04afaa04b37feebb1cc9c3d7 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 21 Apr 2020 16:31:11 +0300 Subject: [PATCH 03/23] fix(module-template): fix some bugs in module template --- templates/app/angular/angular.json | 24 ++++++-- templates/module/angular/angular.json | 60 ++++++++++--------- templates/module/angular/package.json | 4 +- .../module/angular/src/app/app.component.ts | 19 +++++- .../angular/src/app/shared/shared.module.ts | 3 - .../src/environments/environment.hmr.ts | 25 -------- .../src/environments/environment.prod.ts | 1 - .../angular/src/environments/environment.ts | 1 - templates/module/angular/src/main.ts | 13 +--- .../appsettings.json | 4 +- .../appsettings.json | 4 +- 11 files changed, 77 insertions(+), 81 deletions(-) delete mode 100644 templates/module/angular/src/environments/environment.hmr.ts diff --git a/templates/app/angular/angular.json b/templates/app/angular/angular.json index e66c47ad63..567b8f95c7 100644 --- a/templates/app/angular/angular.json +++ b/templates/app/angular/angular.json @@ -26,8 +26,12 @@ "extractCss": true, "assets": ["src/favicon.ico", "src/assets"], "styles": [ + { + "input": "node_modules/bootstrap/dist/css/bootstrap.min.css", + "inject": true, + "bundleName": "bootstrap.min" + }, "src/styles.scss", - "node_modules/bootstrap/dist/css/bootstrap.min.css", { "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css", "inject": false, @@ -98,10 +102,22 @@ "karmaConfig": "karma.conf.js", "assets": ["src/favicon.ico", "src/assets"], "styles": [ + { + "input": "node_modules/bootstrap/dist/css/bootstrap.min.css", + "inject": true, + "bundleName": "bootstrap.min" + }, "src/styles.scss", - "node_modules/bootstrap/dist/css/bootstrap.min.css", - "node_modules/@fortawesome/fontawesome-free/css/all.min.css", - "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css" + { + "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css", + "inject": false, + "bundleName": "fontawesome-all.min" + }, + { + "input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css", + "inject": false, + "bundleName": "fontawesome-v4-shims.min" + } ], "scripts": [] } diff --git a/templates/module/angular/angular.json b/templates/module/angular/angular.json index 1f298b967c..cd9a9ed936 100644 --- a/templates/module/angular/angular.json +++ b/templates/module/angular/angular.json @@ -26,12 +26,22 @@ "extractCss": true, "assets": ["src/favicon.ico", "src/assets"], "styles": [ + { + "input": "node_modules/bootstrap/dist/css/bootstrap.min.css", + "inject": true, + "bundleName": "bootstrap.min" + }, "src/styles.scss", - "node_modules/bootstrap/dist/css/bootstrap.min.css", - "node_modules/font-awesome/css/font-awesome.min.css", - "node_modules/primeng/resources/themes/nova-light/theme.css", - "node_modules/primeicons/primeicons.css", - "node_modules/primeng/resources/primeng.min.css" + { + "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css", + "inject": false, + "bundleName": "fontawesome-all.min" + }, + { + "input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css", + "inject": false, + "bundleName": "fontawesome-v4-shims.min" + } ], "scripts": [] }, @@ -59,14 +69,6 @@ "maximumError": "5mb" } ] - }, - "hmr": { - "fileReplacements": [ - { - "replace": "src/environments/environment.ts", - "with": "src/environments/environment.hmr.ts" - } - ] } } }, @@ -78,10 +80,6 @@ "configurations": { "production": { "browserTarget": "myProjectName:build:production" - }, - "hmr": { - "hmr": true, - "browserTarget": "myProjectName:build:hmr" } } }, @@ -100,12 +98,22 @@ "karmaConfig": "karma.conf.js", "assets": ["src/favicon.ico", "src/assets"], "styles": [ + { + "input": "node_modules/bootstrap/dist/css/bootstrap.min.css", + "inject": true, + "bundleName": "bootstrap.min" + }, "src/styles.scss", - "node_modules/bootstrap/dist/css/bootstrap.min.css", - "node_modules/font-awesome/css/font-awesome.min.css", - "node_modules/primeng/resources/themes/nova-light/theme.css", - "node_modules/primeicons/primeicons.css", - "node_modules/primeng/resources/primeng.min.css" + { + "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css", + "inject": false, + "bundleName": "fontawesome-all.min" + }, + { + "input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css", + "inject": false, + "bundleName": "fontawesome-v4-shims.min" + } ], "scripts": [] } @@ -159,9 +167,7 @@ "projects/my-project-name/tsconfig.lib.json", "projects/my-project-name/tsconfig.spec.json" ], - "exclude": [ - "**/node_modules/**" - ] + "exclude": ["**/node_modules/**"] } } } @@ -194,9 +200,7 @@ "projects/my-project-name-config/tsconfig.lib.json", "projects/my-project-name-config/tsconfig.spec.json" ], - "exclude": [ - "**/node_modules/**" - ] + "exclude": ["**/node_modules/**"] } } } diff --git a/templates/module/angular/package.json b/templates/module/angular/package.json index 56812cb9ca..435df6136e 100644 --- a/templates/module/angular/package.json +++ b/templates/module/angular/package.json @@ -4,7 +4,7 @@ "scripts": { "ng": "ng", "start": "ng serve", - "start:hmr": "ng serve --configuration hmr", + "start:hmr": "ng serve --open", "build": "ng build my-project-name", "test": "ng test my-project-name", "lint": "ng lint my-project-name", @@ -35,8 +35,6 @@ "@angular/cli": "~8.3.20", "@angular/compiler-cli": "~8.2.14", "@angular/language-service": "~8.2.14", - "@angularclass/hmr": "^2.1.3", - "@ngxs/hmr-plugin": "^3.5.0", "@ngxs/logger-plugin": "^3.5.1", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", diff --git a/templates/module/angular/src/app/app.component.ts b/templates/module/angular/src/app/app.component.ts index bf2a27962a..8187365734 100644 --- a/templates/module/angular/src/app/app.component.ts +++ b/templates/module/angular/src/app/app.component.ts @@ -1,4 +1,6 @@ -import { Component } from '@angular/core'; +import { LazyLoadService, LOADING_STRATEGY } from '@abp/ng.core'; +import { Component, OnInit } from '@angular/core'; +import { forkJoin } from 'rxjs'; @Component({ selector: 'app-root', @@ -7,4 +9,17 @@ import { Component } from '@angular/core'; `, }) -export class AppComponent {} +export class AppComponent implements OnInit { + constructor(private lazyLoadService: LazyLoadService) {} + + ngOnInit() { + forkJoin( + this.lazyLoadService.load( + LOADING_STRATEGY.PrependAnonymousStyleToHead('fontawesome-v4-shims.min.css'), + ), + this.lazyLoadService.load( + LOADING_STRATEGY.PrependAnonymousStyleToHead('fontawesome-all.min.css'), + ), + ).subscribe(); + } +} diff --git a/templates/module/angular/src/app/shared/shared.module.ts b/templates/module/angular/src/app/shared/shared.module.ts index 6c4c9b016c..1f268b4572 100644 --- a/templates/module/angular/src/app/shared/shared.module.ts +++ b/templates/module/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,7 +11,6 @@ import { NgxValidateCoreModule } from '@ngx-validate/core'; CoreModule, ThemeSharedModule, ThemeBasicModule, - TableModule, NgbDropdownModule, NgxValidateCoreModule, ], @@ -20,7 +18,6 @@ import { NgxValidateCoreModule } from '@ngx-validate/core'; CoreModule, ThemeSharedModule, ThemeBasicModule, - TableModule, NgbDropdownModule, NgxValidateCoreModule, ], diff --git a/templates/module/angular/src/environments/environment.hmr.ts b/templates/module/angular/src/environments/environment.hmr.ts deleted file mode 100644 index 4c6c9fd343..0000000000 --- a/templates/module/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:44301', - clientId: 'MyProjectName_ConsoleTestApp', - dummyClientSecret: '1q2w3e*', - scope: 'MyProjectName', - showDebugInformation: true, - oidc: false, - requireHttps: true, - }, - apis: { - default: { - url: 'https://localhost:44300', - }, - }, - localization: { - defaultResourceName: 'MyProjectName', - }, -}; diff --git a/templates/module/angular/src/environments/environment.prod.ts b/templates/module/angular/src/environments/environment.prod.ts index 093c7f6f98..ce43f45c24 100644 --- a/templates/module/angular/src/environments/environment.prod.ts +++ b/templates/module/angular/src/environments/environment.prod.ts @@ -1,6 +1,5 @@ export const environment = { production: true, - hmr: false, application: { name: 'MyProjectName', logoUrl: '', diff --git a/templates/module/angular/src/environments/environment.ts b/templates/module/angular/src/environments/environment.ts index 2fe4e73868..f1c21c40ac 100644 --- a/templates/module/angular/src/environments/environment.ts +++ b/templates/module/angular/src/environments/environment.ts @@ -1,6 +1,5 @@ export const environment = { production: false, - hmr: false, application: { name: 'MyProjectName', logoUrl: '', diff --git a/templates/module/angular/src/main.ts b/templates/module/angular/src/main.ts index bbdf75c32d..d9a2e7e4a5 100644 --- a/templates/module/angular/src/main.ts +++ b/templates/module/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/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/appsettings.json b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/appsettings.json index 6dceb9c4b9..6152adf169 100644 --- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/appsettings.json +++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/appsettings.json @@ -3,7 +3,7 @@ "CorsOrigins": "https://*.MyProjectName.com,http://localhost:4200" }, "ConnectionStrings": { - "Default": "Server=(LocalDb)\\MSSQLLocalDB;Database=MyProjectName_Main;Trusted_Connection=True;MultipleActiveResultSets=true", + "Default": "Server=localhost;Database=MyProjectName_Main;User Id=sa;password=myPassw0rd;MultipleActiveResultSets=true", "MyProjectName": "Server=(LocalDb)\\MSSQLLocalDB;Database=MyProjectName_Module;Trusted_Connection=True;MultipleActiveResultSets=true" }, "Redis": { @@ -12,4 +12,4 @@ "AuthServer": { "Authority": "https://localhost:44301/" } -} \ No newline at end of file +} diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/appsettings.json b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/appsettings.json index 0386db1e6a..f880341925 100644 --- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/appsettings.json +++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/appsettings.json @@ -5,7 +5,7 @@ }, "AppSelfUrl": "https://localhost:44301/", "ConnectionStrings": { - "Default": "Server=(LocalDb)\\MSSQLLocalDB;Database=MyProjectName_Main;Trusted_Connection=True;MultipleActiveResultSets=true" + "Default": "Server=localhost;Database=MyProjectName_Main;User Id=sa;password=myPassw0rd;MultipleActiveResultSets=true" }, "Redis": { "Configuration": "127.0.0.1" @@ -25,4 +25,4 @@ } } } -} \ No newline at end of file +} From 86d7a5eeb79dae2c9f7235e61be7f42a82ace025 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 21 Apr 2020 16:32:37 +0300 Subject: [PATCH 04/23] fix: undo appsettings files changes --- .../MyCompanyName.MyProjectName.HttpApi.Host/appsettings.json | 2 +- .../MyCompanyName.MyProjectName.IdentityServer/appsettings.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/appsettings.json b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/appsettings.json index 6152adf169..ed2fa02f22 100644 --- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/appsettings.json +++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/appsettings.json @@ -3,7 +3,7 @@ "CorsOrigins": "https://*.MyProjectName.com,http://localhost:4200" }, "ConnectionStrings": { - "Default": "Server=localhost;Database=MyProjectName_Main;User Id=sa;password=myPassw0rd;MultipleActiveResultSets=true", + "Default": "Server=(LocalDb)\\MSSQLLocalDB;Database=MyProjectName_Main;Trusted_Connection=True;MultipleActiveResultSets=true", "MyProjectName": "Server=(LocalDb)\\MSSQLLocalDB;Database=MyProjectName_Module;Trusted_Connection=True;MultipleActiveResultSets=true" }, "Redis": { diff --git a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/appsettings.json b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/appsettings.json index f880341925..d3a8325f90 100644 --- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/appsettings.json +++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/appsettings.json @@ -5,7 +5,7 @@ }, "AppSelfUrl": "https://localhost:44301/", "ConnectionStrings": { - "Default": "Server=localhost;Database=MyProjectName_Main;User Id=sa;password=myPassw0rd;MultipleActiveResultSets=true" + "Default": "Server=(LocalDb)\\MSSQLLocalDB;Database=MyProjectName_Main;Trusted_Connection=True;MultipleActiveResultSets=true" }, "Redis": { "Configuration": "127.0.0.1" From 60e1fb7a71376f1943827a3100e55121fdc4e437 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 21 Apr 2020 16:33:22 +0300 Subject: [PATCH 05/23] chore: update pofyfills.ts --- templates/module/angular/src/polyfills.ts | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/templates/module/angular/src/polyfills.ts b/templates/module/angular/src/polyfills.ts index aa665d6b87..6e00c561ed 100644 --- a/templates/module/angular/src/polyfills.ts +++ b/templates/module/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. * @@ -55,8 +59,7 @@ /*************************************************************************************************** * Zone JS is required by default for Angular itself. */ -import 'zone.js/dist/zone'; // Included with Angular CLI. - +import 'zone.js/dist/zone'; // Included with Angular CLI. /*************************************************************************************************** * APPLICATION IMPORTS From 5b6d417fa36bab30e1a3462aba4d4b8328b39516 Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 21 Apr 2020 17:13:52 +0300 Subject: [PATCH 06/23] feat(module-template): upgrade angular version to v9 --- templates/module/angular/angular.json | 52 +++++++++++++++---- templates/module/angular/package.json | 39 +++++++------- .../my-project-name-config/tsconfig.lib.json | 1 - .../tsconfig.lib.prod.json | 6 +++ .../my-project-name/tsconfig.lib.json | 1 - .../my-project-name/tsconfig.lib.prod.json | 6 +++ templates/module/angular/tsconfig.app.json | 7 ++- 7 files changed, 78 insertions(+), 34 deletions(-) create mode 100644 templates/module/angular/projects/my-project-name-config/tsconfig.lib.prod.json create mode 100644 templates/module/angular/projects/my-project-name/tsconfig.lib.prod.json diff --git a/templates/module/angular/angular.json b/templates/module/angular/angular.json index cd9a9ed936..7120592c4d 100644 --- a/templates/module/angular/angular.json +++ b/templates/module/angular/angular.json @@ -22,9 +22,12 @@ "main": "src/main.ts", "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.app.json", - "aot": false, + "aot": true, "extractCss": true, - "assets": ["src/favicon.ico", "src/assets"], + "assets": [ + "src/favicon.ico", + "src/assets" + ], "styles": [ { "input": "node_modules/bootstrap/dist/css/bootstrap.min.css", @@ -58,7 +61,6 @@ "sourceMap": false, "extractCss": true, "namedChunks": false, - "aot": true, "extractLicenses": true, "vendorChunk": false, "buildOptimizer": true, @@ -67,6 +69,10 @@ "type": "initial", "maximumWarning": "2mb", "maximumError": "5mb" + }, + { + "type": "anyComponentStyle", + "maximumWarning": "6kb" } ] } @@ -96,7 +102,10 @@ "polyfills": "src/polyfills.ts", "tsConfig": "tsconfig.spec.json", "karmaConfig": "karma.conf.js", - "assets": ["src/favicon.ico", "src/assets"], + "assets": [ + "src/favicon.ico", + "src/assets" + ], "styles": [ { "input": "node_modules/bootstrap/dist/css/bootstrap.min.css", @@ -121,8 +130,14 @@ "lint": { "builder": "@angular-devkit/build-angular:tslint", "options": { - "tsConfig": ["tsconfig.app.json", "tsconfig.spec.json", "e2e/tsconfig.json"], - "exclude": ["**/node_modules/**"] + "tsConfig": [ + "tsconfig.app.json", + "tsconfig.spec.json", + "e2e/tsconfig.json" + ], + "exclude": [ + "**/node_modules/**" + ] } }, "e2e": { @@ -150,6 +165,11 @@ "options": { "tsConfig": "projects/my-project-name/tsconfig.lib.json", "project": "projects/my-project-name/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "projects/my-project-name/tsconfig.lib.prod.json" + } } }, "test": { @@ -167,7 +187,9 @@ "projects/my-project-name/tsconfig.lib.json", "projects/my-project-name/tsconfig.spec.json" ], - "exclude": ["**/node_modules/**"] + "exclude": [ + "**/node_modules/**" + ] } } } @@ -183,6 +205,11 @@ "options": { "tsConfig": "projects/my-project-name-config/tsconfig.lib.json", "project": "projects/my-project-name-config/ng-package.json" + }, + "configurations": { + "production": { + "tsConfig": "projects/my-project-name-config/tsconfig.lib.prod.json" + } } }, "test": { @@ -200,11 +227,16 @@ "projects/my-project-name-config/tsconfig.lib.json", "projects/my-project-name-config/tsconfig.spec.json" ], - "exclude": ["**/node_modules/**"] + "exclude": [ + "**/node_modules/**" + ] } } } } }, - "defaultProject": "myProjectName" -} + "defaultProject": "myProjectName", + "cli": { + "analytics": false + } +} \ No newline at end of file diff --git a/templates/module/angular/package.json b/templates/module/angular/package.json index 435df6136e..ef0dec09c1 100644 --- a/templates/module/angular/package.json +++ b/templates/module/angular/package.json @@ -17,29 +17,29 @@ "@abp/ng.setting-management": "~2.6.0", "@abp/ng.tenant-management": "~2.6.0", "@abp/ng.theme.basic": "~2.6.0", - "@angular/animations": "~8.2.14", - "@angular/common": "~8.2.14", - "@angular/compiler": "~8.2.14", - "@angular/core": "~8.2.14", - "@angular/forms": "~8.2.14", - "@angular/platform-browser": "~8.2.14", - "@angular/platform-browser-dynamic": "~8.2.14", - "@angular/router": "~8.2.14", - "rxjs": "~6.4.0", + "@angular/animations": "~9.1.2", + "@angular/common": "~9.1.2", + "@angular/compiler": "~9.1.2", + "@angular/core": "~9.1.2", + "@angular/forms": "~9.1.2", + "@angular/platform-browser": "~9.1.2", + "@angular/platform-browser-dynamic": "~9.1.2", + "@angular/router": "~9.1.2", + "rxjs": "~6.5.5", "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-ng-packagr": "~0.803.20", - "@angular/cli": "~8.3.20", - "@angular/compiler-cli": "~8.2.14", - "@angular/language-service": "~8.2.14", + "@angular-devkit/build-angular": "~0.901.1", + "@angular-devkit/build-ng-packagr": "~0.901.1", + "@angular/cli": "~9.1.1", + "@angular/compiler-cli": "~9.1.2", + "@angular/language-service": "~9.1.2", "@ngxs/logger-plugin": "^3.5.1", "@types/jasmine": "~3.3.8", "@types/jasminewd2": "~2.0.3", - "@types/node": "~8.9.4", - "codelyzer": "^5.0.0", + "@types/node": "^12.11.1", + "codelyzer": "^5.1.2", "jasmine-core": "~3.4.0", "jasmine-spec-reporter": "~4.2.1", "karma": "~4.1.0", @@ -47,12 +47,11 @@ "karma-coverage-istanbul-reporter": "~2.0.1", "karma-jasmine": "~2.0.1", "karma-jasmine-html-reporter": "^1.4.0", - "ng-packagr": "^5.7.1", + "ng-packagr": "^9.0.0", "ngxs-schematic": "^1.1.9", "protractor": "~5.4.0", "ts-node": "~7.0.0", - "tsickle": "^0.37.0", "tslint": "~5.15.0", "typescript": "~3.8.3" } -} +} \ No newline at end of file diff --git a/templates/module/angular/projects/my-project-name-config/tsconfig.lib.json b/templates/module/angular/projects/my-project-name-config/tsconfig.lib.json index bd23948e59..0e0b9c45d1 100644 --- a/templates/module/angular/projects/my-project-name-config/tsconfig.lib.json +++ b/templates/module/angular/projects/my-project-name-config/tsconfig.lib.json @@ -12,7 +12,6 @@ ] }, "angularCompilerOptions": { - "annotateForClosureCompiler": true, "skipTemplateCodegen": true, "strictMetadataEmit": true, "fullTemplateTypeCheck": true, diff --git a/templates/module/angular/projects/my-project-name-config/tsconfig.lib.prod.json b/templates/module/angular/projects/my-project-name-config/tsconfig.lib.prod.json new file mode 100644 index 0000000000..b1d501abbc --- /dev/null +++ b/templates/module/angular/projects/my-project-name-config/tsconfig.lib.prod.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.lib.json", + "angularCompilerOptions": { + "enableIvy": false + } +} \ No newline at end of file diff --git a/templates/module/angular/projects/my-project-name/tsconfig.lib.json b/templates/module/angular/projects/my-project-name/tsconfig.lib.json index bd23948e59..0e0b9c45d1 100644 --- a/templates/module/angular/projects/my-project-name/tsconfig.lib.json +++ b/templates/module/angular/projects/my-project-name/tsconfig.lib.json @@ -12,7 +12,6 @@ ] }, "angularCompilerOptions": { - "annotateForClosureCompiler": true, "skipTemplateCodegen": true, "strictMetadataEmit": true, "fullTemplateTypeCheck": true, diff --git a/templates/module/angular/projects/my-project-name/tsconfig.lib.prod.json b/templates/module/angular/projects/my-project-name/tsconfig.lib.prod.json new file mode 100644 index 0000000000..b1d501abbc --- /dev/null +++ b/templates/module/angular/projects/my-project-name/tsconfig.lib.prod.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig.lib.json", + "angularCompilerOptions": { + "enableIvy": false + } +} \ No newline at end of file diff --git a/templates/module/angular/tsconfig.app.json b/templates/module/angular/tsconfig.app.json index b750221da5..9fa880f878 100644 --- a/templates/module/angular/tsconfig.app.json +++ b/templates/module/angular/tsconfig.app.json @@ -4,6 +4,9 @@ "outDir": "./out-tsc/app", "types": ["node"] }, - "include": ["src/**/*.ts"], - "exclude": ["src/test.ts", "src/**/*.spec.ts"] + "files": [ + "src/main.ts", + "src/polyfills.ts" + ], + "include": ["src/**/*.d.ts"] } From de1ae0ac6bc9909f506156e7aeee125f6ec5309a Mon Sep 17 00:00:00 2001 From: mehmet-erim Date: Tue, 21 Apr 2020 17:20:13 +0300 Subject: [PATCH 07/23] chore(module-template): update npm scripts --- templates/module/angular/package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/templates/module/angular/package.json b/templates/module/angular/package.json index ef0dec09c1..06812af67d 100644 --- a/templates/module/angular/package.json +++ b/templates/module/angular/package.json @@ -1,14 +1,14 @@ { - "name": "my-project-name", + "name": "MyProjectName", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "start:hmr": "ng serve --open", - "build": "ng build my-project-name", - "test": "ng test my-project-name", - "lint": "ng lint my-project-name", - "e2e": "ng e2e my-project-name" + "build": "ng build", + "test": "ng test", + "lint": "ng lint", + "e2e": "ng e2e" }, "private": true, "dependencies": { @@ -54,4 +54,4 @@ "tslint": "~5.15.0", "typescript": "~3.8.3" } -} \ No newline at end of file +} From 33a852724de51bea99e902396ee3bc3e5e00298f Mon Sep 17 00:00:00 2001 From: liangshiwei Date: Tue, 21 Apr 2020 22:30:21 +0800 Subject: [PATCH 08/23] Translate some of angular documents --- docs/en/UI/Angular/Lazy-Load-Service.md | 2 +- docs/zh-Hans/UI/Angular/HTTP-Requests.md | 178 +++++++++++++++++- docs/zh-Hans/UI/Angular/Lazy-Load-Service.md | 188 ++++++++++++++++++- 3 files changed, 365 insertions(+), 3 deletions(-) diff --git a/docs/en/UI/Angular/Lazy-Load-Service.md b/docs/en/UI/Angular/Lazy-Load-Service.md index a03381869e..b4eddf7b25 100644 --- a/docs/en/UI/Angular/Lazy-Load-Service.md +++ b/docs/en/UI/Angular/Lazy-Load-Service.md @@ -52,7 +52,7 @@ class DemoComponent { The `load` method returns an observable to which you can subscibe in your component or with an `async` pipe. In the example above, the `NgIf` directive will render `` only **if the script gets successfully loaded or is already loaded before**. -> You can subscribe multiple times in your template with `async` pipe. The styles will only be loaded once. +> You can subscribe multiple times in your template with `async` pipe. The Scripts will only be loaded once. Please refer to [LoadingStrategy](./Loading-Strategy.md) to see all available loading strategies and how you can build your own loading strategy. diff --git a/docs/zh-Hans/UI/Angular/HTTP-Requests.md b/docs/zh-Hans/UI/Angular/HTTP-Requests.md index d40493cd1b..47f871d6e6 100644 --- a/docs/zh-Hans/UI/Angular/HTTP-Requests.md +++ b/docs/zh-Hans/UI/Angular/HTTP-Requests.md @@ -1,3 +1,179 @@ ## HTTP请求 -TODO... \ No newline at end of file +## 关于 HttpClient + +Angular具有很棒的 `HttpClient` 与后端服务进行通信. 它位于顶层,是[XMLHttpRequest Web API](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest)的封装. 同时也是Angular建议用于任何HTTP请求的代理,在你的ABP项目中使用 `HttpClient` 是最佳做法. + +但是 `HttpClient` 将错误处理留给调用方,换句话说HTTP错误是通过手动处理的,通过挂接到返回的 `Observable` 的观察者中来处理. + +```js +getConfig() { + this.http.get(this.configUrl).subscribe( + config => this.updateConfig(config), + error => { + // Handle error here + }, + ); +} +``` + +上面的代码尽管清晰灵活,但即使将错误处理委派给Store或任何其他注入. 以这种方式处理错误也是重复性的工作. + +`HttpInterceptor` 能够捕获 `HttpErrorResponse` 并可用于集中的错误处理. 然而,在必须放置错误处理程序(也就是拦截器)的情况下,需要额外的工作以及对Angular内部机制的理解. 检查[这个issue](https://github.com/angular/angular/issues/20203)了解详情. + +## RestService + +ABP核心模块有用于HTTP请求的实用程序服务: `RestService`. 除非另有明确配置,否则它将捕获HTTP错误并调度 `RestOccurError` 操作, 然后由 `ThemeSharedModule` 引入的 `ErrorHandler` 捕获此操作. 你应该已经在应用程序中导入了此模块,在使用 `RestService` 时,默认情况下将自动处理所有HTTP错误. + +### RestService 入门 + +为了使用 `RestService`, 你必须将它注入到你的类中. + +```js +import { RestService } from '@abp/ng.core'; + +@Injectable({ + /* class metadata here */ +}) +class DemoService { + constructor(private rest: RestService) {} +} +``` + +你不必在模块或组件/指令级别提供 `estService`,因为它已经在**根中**中提供了. + +### 如何使用RestService发出请求 + +你可以使用 `RestService` 的 `request` 方法来处理HTTP请求. 示例: + +```js +getFoo(id: number) { + const request: Rest.Request = { + method: 'GET', + url: '/api/some/path/to/foo/' + id, + }; + + return this.rest.request(request); +} +``` + +`request` 方法始终返回 `Observable`. 无论何时使用 `getFoo` 方法,都可以执行以下操作: + +```js +doSomethingWithFoo(id: number) { + this.demoService.getFoo(id).subscribe( + foo => { + // Do something with foo. + } + ) +} +``` + +**你不必担心关于取消订阅**. `RestService` 在内部使用 `HttpClient`,因此它返回的每个可观察对象都是有限的可观察对象,成功或出错后将自动关闭订阅. + +如你所见,`request` 方法获取一个具有 `Rest.Reques` 类型的请求选项对象. 此泛型类型需要请求主体的接口. 当没有正文时,例如在 `GET` 或 `DELETE` 请求中,你可以传递 `null`. 示例: + +```js +postFoo(body: Foo) { + const request: Rest.Request = { + method: 'POST', + url: '/api/some/path/to/foo', + body + }; + + return this.rest.request(request); +} +``` + +你可以在[此处检查](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/rest.ts#L23)完整的 `Rest.Request` 类型,与Angular中的[HttpRequest](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/rest.ts#L23)类相比只有很少的改动. + +### 如何禁用RestService的默认错误处理程序 + +默认 `request` 方法始终处理错误. 让我们看看如何改变这种行为并由自己处理错误: + +```js +deleteFoo(id: number) { + const request: Rest.Request = { + method: 'DELETE', + url: '/api/some/path/to/foo/' + id, + }; + + return this.rest.request(request, { skipHandleError: true }); +} +``` + +`skipHandleError` 配置选项设置为 `true` 时,禁用错误处理程序,并返回 `observable` 引发错误,你可以在订阅中捕获该错误. + +```js +removeFooFromList(id: number) { + this.demoService.deleteFoo(id).subscribe( + foo => { + // Do something with foo. + }, + error => { + // Do something with error. + } + ) +} +``` + +### 如何从应用程序配置获取特定的API端点 + +`request` 方法接收到的另一个配置选项是 `apiName` (在v2.4中可用),它用于从应用程序配置获取特定的模块端点. + +```js +putFoo(body: Foo, id: string) { + const request: Rest.Request = { + method: 'PUT', + url: '/' + id, + body + }; + + return this.rest.request(request, {apiName: 'foo'}); +} +``` + +上面的putFoo将请求 `https://localhost:44305/api/some/path/to/foo/{id}` 当环境变量如下: + +```js +// environment.ts + +export const environment = { + apis: { + default: { + url: 'https://localhost:44305', + }, + foo: { + url: 'https://localhost:44305/api/some/path/to/foo', + }, + }, + + /* rest of the environment variables here */ +} +``` + +### 如何观察响应对象或HTTP事件而不是正文 + +`RestService` 假定你通常对响应的正文感兴趣,默认情况下将 `observe` 属性设置为 `body`. 但是有时你可能对其他内容(例如自定义标头)非常感兴趣. 为此, `request` 方法在 `config` 对象中接收 `watch` 属性. + +```js +getSomeCustomHeaderValue() { + const request: Rest.Request = { + method: 'GET', + url: '/api/some/path/that/sends/some-custom-header', + }; + + return this.rest.request>( + request, + {observe: Rest.Observe.Response}, + ).pipe( + map(response => response.headers.get('Some-Custom-Header')) + ); +} +``` + +你可以在[此处](https://github.com/abpframework/abp/blob/dev/npm/ng-packs/packages/core/src/lib/models/rest.ts#L10)找到 `Rest.Observe` 枚举. + +## 下一步是什么? + +* [本地化](./Localization.md) \ No newline at end of file diff --git a/docs/zh-Hans/UI/Angular/Lazy-Load-Service.md b/docs/zh-Hans/UI/Angular/Lazy-Load-Service.md index df313555a9..abd08a0410 100644 --- a/docs/zh-Hans/UI/Angular/Lazy-Load-Service.md +++ b/docs/zh-Hans/UI/Angular/Lazy-Load-Service.md @@ -1,3 +1,189 @@ # 如何懒加载 Scripts 与 Styles -TODO... \ No newline at end of file +你可以使用@abp/ng.core包中的 `LazyLoadService` 以简单明了的方式延迟加载脚本和样式. + +## 入门 + +你不必在模块或组件/指令级别提供 `LazyLoadService`,因为它已经在**根中**中提供了. 你可以在组件,指令或服务中注入并使用它. + +```js +import { LazyLoadService } from '@abp/ng.core'; + +@Component({ + /* class metadata here */ +}) +class DemoComponent { + constructor(private lazyLoadService: LazyLoadService) {} +} +``` + +## 用法 + +你可以使用 `LazyLoadService` 的 `load` 方法在DOM中的所需位置创建 `