Merge pull request #3694 from abpframework/fix/module-template-bugs

Fixed Angular UI module template bugs and upgraded Angular version to v9
6 years ago · e16c8e07f1
17 changed files with 157 additions and 114 deletions
--- 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": []
          }
--- a/templates/module/angular/angular.json
+++ b/templates/module/angular/angular.json
@ -22,16 +22,29 @@
            "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",
+                "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": []
          },
@ -48,7 +61,6 @@
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
-              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
@ -57,14 +69,10 @@
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
-                }
-              ]
-            },
-            "hmr": {
-              "fileReplacements": [
+                },
                {
-                  "replace": "src/environments/environment.ts",
-                  "with": "src/environments/environment.hmr.ts"
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb"
                }
              ]
            }
@ -78,10 +86,6 @@
          "configurations": {
            "production": {
              "browserTarget": "myProjectName:build:production"
-            },
-            "hmr": {
-              "hmr": true,
-              "browserTarget": "myProjectName:build:hmr"
            }
          }
        },
@ -98,14 +102,27 @@
            "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",
+                "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": []
          }
@ -113,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": {
@ -142,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": {
@ -177,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": {
@ -202,5 +235,8 @@
      }
    }
  },
-  "defaultProject": "myProjectName"
-}
+  "defaultProject": "myProjectName",
+  "cli": {
+    "analytics": false
+  }
+}
--- a/templates/module/angular/package.json
+++ b/templates/module/angular/package.json
@ -1,47 +1,45 @@
 {
-  "name": "my-project-name",
+  "name": "MyProjectName",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
-    "start:hmr": "ng serve --configuration hmr",
-    "build": "ng build my-project-name",
-    "test": "ng test my-project-name",
-    "lint": "ng lint my-project-name",
-    "e2e": "ng e2e my-project-name"
+    "start:hmr": "ng serve --open",
+    "build": "ng build",
+    "test": "ng test",
+    "lint": "ng lint",
+    "e2e": "ng e2e"
  },
  "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",
-    "@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",
+    "@abp/ng.tenant-management": "~2.6.0",
+    "@abp/ng.theme.basic": "~2.6.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",
-    "@angularclass/hmr": "^2.1.3",
-    "@ngxs/hmr-plugin": "^3.5.0",
+    "@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",
@ -49,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.5.3"
+    "typescript": "~3.8.3"
  }
 }
--- 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,
--- 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
@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}
--- 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,
--- a/templates/module/angular/projects/my-project-name/tsconfig.lib.prod.json
+++ b/templates/module/angular/projects/my-project-name/tsconfig.lib.prod.json
@ -0,0 +1,6 @@
+{
+  "extends": "./tsconfig.lib.json",
+  "angularCompilerOptions": {
+    "enableIvy": false
+  }
+}
--- 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';
    <router-outlet></router-outlet>
  `,
 })
-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();
+  }
+}
--- 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,
  ],
--- a/templates/module/angular/src/environments/environment.hmr.ts
+++ b/templates/module/angular/src/environments/environment.hmr.ts
@ -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',
-  },
-};
--- 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: '',
--- 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: '',
--- 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));
--- 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
--- 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"]
 }
--- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/appsettings.json
+++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.HttpApi.Host/appsettings.json
@ -12,4 +12,4 @@
  "AuthServer": {
    "Authority": "https://localhost:44301/"
  }
-}
+}
--- a/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/appsettings.json
+++ b/templates/module/aspnet-core/host/MyCompanyName.MyProjectName.IdentityServer/appsettings.json
@ -25,4 +25,4 @@
      }
    }
  }
-}
+}