Merge pull request #9837 from abpframework/feat/9783

Angular UI: Migrated the ng-packs project into an Nx workspace
5 years ago · c8714283a6
351 changed files with 12990 additions and 8183 deletions
--- a/.github/workflows/angular.yml
+++ b/.github/workflows/angular.yml
@ -12,9 +12,11 @@ on:
      - 'dev'
 jobs:
  build-test-lint:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
    steps:
-      - uses: actions/checkout@v1
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0

      - uses: actions/cache@v2
        with:
@ -31,25 +33,13 @@ jobs:
        working-directory: npm/ng-packs

      - name: Run lint
-        run: yarn ng lint
+        run: yarn affected:lint --base=remotes/origin/${{ github.base_ref }}
        working-directory: npm/ng-packs

-      - name: Run prepare workspace
-        run: yarn prepare:workspace
+      - name: Run build
+        run: yarn affected:build --base=remotes/origin/${{ github.base_ref }}
        working-directory: npm/ng-packs

      - name: Run test
-        run: yarn ci:test
-        working-directory: npm/ng-packs
-
-      - name: Build dev-app
-        run: yarn build --prod
+        run: yarn affected:test --base=remotes/origin/${{ github.base_ref }}
        working-directory: npm/ng-packs
-
-      - name: Install packages of app template
-        run: yarn install
-        working-directory: templates/app/angular
-
-      - name: Build app template
-        run: yarn build --prod
-        working-directory: templates/app/angular
--- a/npm/ng-packs/.editorconfig
+++ b/npm/ng-packs/.editorconfig
@ -1,4 +1,4 @@
-# Editor configuration, see https://editorconfig.org
+# Editor configuration, see http://editorconfig.org
 root = true

 [*]
--- a/npm/ng-packs/.eslintignore
+++ b/npm/ng-packs/.eslintignore
@ -0,0 +1 @@
+*.d.ts
--- a/npm/ng-packs/.eslintrc.json
+++ b/npm/ng-packs/.eslintrc.json
@ -0,0 +1,38 @@
+{
+  "root": true,
+  "ignorePatterns": ["**/*"],
+  "plugins": ["@nrwl/nx"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {
+        "@nrwl/nx/enforce-module-boundaries": [
+          "error",
+          {
+            "enforceBuildableLibDependency": true,
+            "allow": [],
+            "depConstraints": [
+              {
+                "sourceTag": "*",
+                "onlyDependOnLibsWithTags": ["*"]
+              }
+            ]
+          }
+        ]
+      }
+    },  
+    {
+      "files": ["*.ts", "*.tsx"],
+      "extends": ["plugin:@nrwl/nx/typescript"],
+      "rules": {
+        "@typescript-eslint/no-namespace": "off",
+        "@typescript-eslint/no-empty-function": ["warn"]
+      }
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "extends": ["plugin:@nrwl/nx/javascript"],
+      "rules": {}
+    }
+  ]
+}
--- a/npm/ng-packs/.prettierignore
+++ b/npm/ng-packs/.prettierignore
@ -0,0 +1,4 @@
+# Add files here to ignore them from prettier formatting
+
+/dist
+/coverage
--- a/npm/ng-packs/.vscode/extensions.json
+++ b/npm/ng-packs/.vscode/extensions.json
@ -1,7 +1,10 @@
 {
  "recommendations": [
    "angular.ng-template",
+    "nrwl.angular-console",
    "esbenp.prettier-vscode",
+    "firsttris.vscode-jest-runner",
+    "dbaeumer.vscode-eslint",
    "ms-vscode.vscode-typescript-tslint-plugin",
    "visualstudioexptteam.vscodeintellicode",
    "christian-kohler.path-intellisense",
--- a/npm/ng-packs/CONTRIBUTING.md
+++ b/npm/ng-packs/CONTRIBUTING.md
@ -8,16 +8,11 @@ Run `yarn` to install all dependencies, then run `yarn prepare:workspace` to pr

 Run `yarn start` to start the `dev-app`. Navigate to http://localhost:4200/.

-## Package
-
-[Symlink Manager](https://github.com/mehmet-erim/symlink-manager) is used to manage symbolic link processes. Run `yarn symlink copy` to select the packages to develop.

 ## Application

 The `dev-app` project is the same as the Angular UI template project. `dev-app` is used to see changes instantly.

-If you will only develop the `dev-app`, you don't need to run `symlink-manager`.
-
 > Reminder! If you have developed the `dev-app` template, you should do the same for the application and module templates.

 For more information, see the [docs.abp.io](https://docs.abp.io)
--- a/npm/ng-packs/README.md
+++ b/npm/ng-packs/README.md
@ -8,20 +8,15 @@

 ## Getting started

-Run `yarn` to install all dependencies, then run `yarn prepare:workspace` to prepare the ABP packages (might take 2 minutes).
+Run `yarn` to install all dependencies.

 Run `yarn start` to start the `dev-app`. Navigate to http://localhost:4200/.

 ## Development

-### Package
-[Symlink Manager](https://github.com/mehmet-erim/symlink-manager) is used to manage symbolic link processes. Run `yarn symlink copy` to select the packages to develop.
-
 ### Application
 The `dev-app` project is the same as the Angular UI template project. `dev-app` is used to see changes instantly.

-If you will only develop the `dev-app`, you don't need to run `symlink-manager`.
-
 > Reminder! If you have developed the `dev-app` template, you should do the same for the application and module templates.

 For more information, see the [docs.abp.io](https://docs.abp.io)
--- a/npm/ng-packs/angular.json
+++ b/npm/ng-packs/angular.json
@ -1,75 +1,81 @@
 {
-  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
-  "newProjectRoot": "packages",
  "projects": {
-    "core": {
+    "account": {
      "projectType": "library",
-      "root": "packages/core",
-      "sourceRoot": "packages/core/src",
+      "root": "packages/account",
+      "sourceRoot": "packages/account/src",
      "prefix": "abp",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@nrwl/angular:package",
+          "outputs": ["dist/packages/account"],
          "options": {
-            "tsConfig": "packages/core/tsconfig.lib.json",
-            "project": "packages/core/ng-package.json"
+            "project": "packages/account/ng-package.json"
          },
          "configurations": {
            "production": {
-              "tsConfig": "packages/core/tsconfig.lib.prod.json"
+              "tsConfig": "packages/account/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "packages/account/tsconfig.lib.json"
            }
-          }
+          },
+          "defaultConfiguration": "production"
        },
        "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/packages/account"],
          "options": {
-            "coverage": true,
+            "jestConfig": "packages/account/jest.config.js",
            "passWithNoTests": true
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": ["packages/core/tsconfig.lib.json", "packages/core/tsconfig.spec.json"],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": ["packages/account/src/**/*.ts", "packages/account/src/**/*.html"]
          }
        }
      }
    },
-    "theme-shared": {
+    "account-core": {
      "projectType": "library",
-      "root": "packages/theme-shared",
-      "sourceRoot": "packages/theme-shared/src",
+      "root": "packages/account-core",
+      "sourceRoot": "packages/account-core/src",
      "prefix": "abp",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@nrwl/angular:package",
+          "outputs": ["dist/packages/account-core"],
          "options": {
-            "tsConfig": "packages/theme-shared/tsconfig.lib.json",
-            "project": "packages/theme-shared/ng-package.json"
+            "project": "packages/account-core/ng-package.json"
          },
          "configurations": {
            "production": {
-              "tsConfig": "packages/theme-shared/tsconfig.lib.prod.json"
+              "tsConfig": "packages/account-core/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "packages/account-core/tsconfig.lib.json"
            }
-          }
+          },
+          "defaultConfiguration": "production"
        },
        "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/packages/account-core"],
          "options": {
-            "coverage": true,
+            "jestConfig": "packages/account-core/jest.config.js",
            "passWithNoTests": true
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": [
-              "packages/theme-shared/tsconfig.lib.json",
-              "packages/theme-shared/tsconfig.spec.json"
-            ],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": [
+              "packages/account-core/src/**/*.ts",
+              "packages/account-core/src/**/*.html"
+            ]
          }
        }
      }
@ -81,180 +87,267 @@
      "prefix": "abp",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@nrwl/angular:package",
+          "outputs": ["dist/packages/components"],
          "options": {
-            "tsConfig": "packages/components/tsconfig.lib.json",
            "project": "packages/components/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "packages/components/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "packages/components/tsconfig.lib.json"
            }
-          }
+          },
+          "defaultConfiguration": "production"
        },
        "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/packages/components"],
          "options": {
-            "coverage": true,
+            "jestConfig": "packages/components/jest.config.js",
            "passWithNoTests": true
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": [
-              "packages/components/tsconfig.lib.json",
-              "packages/components/tsconfig.spec.json"
-            ],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": [
+              "packages/components/src/**/*.ts",
+              "packages/components/src/**/*.html"
+            ]
          }
        }
      }
    },
-    "account-core": {
+    "core": {
      "projectType": "library",
-      "root": "packages/account-core",
-      "sourceRoot": "packages/account-core/src",
-      "prefix": "lib",
+      "root": "packages/core",
+      "sourceRoot": "packages/core/src",
+      "prefix": "abp",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-angular:ng-packagr",
+          "builder": "@nrwl/angular:package",
+          "outputs": ["dist/packages/core"],
          "options": {
-            "tsConfig": "packages/account-core/tsconfig.lib.json",
-            "project": "packages/account-core/ng-package.json"
+            "project": "packages/core/ng-package.json"
          },
          "configurations": {
            "production": {
-              "tsConfig": "packages/account-core/tsconfig.lib.prod.json"
+              "tsConfig": "packages/core/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "packages/core/tsconfig.lib.json"
            }
-          }
+          },
+          "defaultConfiguration": "production"
        },
        "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/packages/core"],
          "options": {
-            "tsConfig": "tsconfig.json",
-            "coverage": true,
+            "jestConfig": "packages/core/jest.config.js",
            "passWithNoTests": true
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": [
-              "packages/account-core/tsconfig.lib.json",
-              "packages/account-core/tsconfig.spec.json"
-            ],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": ["packages/core/src/**/*.ts", "packages/core/src/**/*.html"]
          }
        }
      }
    },
-    "theme-basic": {
-      "projectType": "library",
-      "root": "packages/theme-basic",
-      "sourceRoot": "packages/theme-basic/src",
-      "prefix": "abp",
+    "dev-app": {
+      "projectType": "application",
+      "root": "apps/dev-app",
+      "sourceRoot": "apps/dev-app/src",
+      "prefix": "app",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@angular-devkit/build-angular:browser",
+          "outputs": ["{options.outputPath}"],
          "options": {
-            "tsConfig": "packages/theme-basic/tsconfig.lib.json",
-            "project": "packages/theme-basic/ng-package.json"
+            "outputPath": "dist/apps/dev-app",
+            "index": "apps/dev-app/src/index.html",
+            "main": "apps/dev-app/src/main.ts",
+            "polyfills": "apps/dev-app/src/polyfills.ts",
+            "tsConfig": "apps/dev-app/tsconfig.app.json",
+            "inlineStyleLanguage": "scss",
+            "allowedCommonJsDependencies": ["chart.js", "js-sha256"],
+            "assets": ["apps/dev-app/src/favicon.ico", "apps/dev-app/src/assets"],
+            "styles": [
+              {
+                "input": "node_modules/@abp/ng.theme.shared/styles/bootstrap-rtl.min.css",
+                "inject": false,
+                "bundleName": "bootstrap-rtl.min"
+              },
+              {
+                "input": "node_modules/bootstrap/dist/css/bootstrap.min.css",
+                "inject": true,
+                "bundleName": "bootstrap-ltr.min"
+              },
+              {
+                "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
+                "inject": true,
+                "bundleName": "fontawesome-all.min"
+              },
+              {
+                "input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css",
+                "inject": true,
+                "bundleName": "fontawesome-v4-shims.min"
+              },
+              {
+                "input": "node_modules/@swimlane/ngx-datatable/index.css",
+                "inject": true,
+                "bundleName": "ngx-datatable-index"
+              },
+              {
+                "input": "node_modules/@swimlane/ngx-datatable/assets/icons.css",
+                "inject": true,
+                "bundleName": "ngx-datatable-icons"
+              },
+              {
+                "input": "node_modules/@swimlane/ngx-datatable/themes/material.css",
+                "inject": true,
+                "bundleName": "ngx-datatable-material"
+              },
+              "apps/dev-app/src/styles.scss"
+            ],
+            "scripts": []
          },
          "configurations": {
            "production": {
-              "tsConfig": "packages/theme-basic/tsconfig.lib.prod.json"
+              "tsConfig": "apps/dev-app/tsconfig.prod.json",
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "1mb",
+                  "maximumError": "5mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "6kb",
+                  "maximumError": "10kb"
+                }
+              ],
+              "fileReplacements": [
+                {
+                  "replace": "apps/dev-app/src/environments/environment.ts",
+                  "with": "apps/dev-app/src/environments/environment.prod.ts"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
            }
-          }
+          },
+          "defaultConfiguration": "production"
        },
-        "test": {
-          "builder": "@angular-builders/jest:run",
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "dev-app:build:production"
+            },
+            "development": {
+              "browserTarget": "dev-app:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
-            "coverage": true,
-            "passWithNoTests": true
+            "browserTarget": "dev-app:build"
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": [
-              "packages/theme-basic/tsconfig.lib.json",
-              "packages/theme-basic/tsconfig.spec.json"
-            ],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": ["apps/dev-app/src/**/*.ts", "apps/dev-app/src/**/*.html"]
+          }
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/apps/dev-app"],
+          "options": {
+            "jestConfig": "apps/dev-app/jest.config.js",
+            "passWithNoTests": true
          }
        }
      }
    },
-    "permission-management": {
-      "projectType": "library",
-      "root": "packages/permission-management",
-      "sourceRoot": "packages/permission-management/src",
-      "prefix": "abp",
+    "dev-app-e2e": {
+      "root": "apps/dev-app-e2e",
+      "sourceRoot": "apps/dev-app-e2e/src",
+      "projectType": "application",
      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+        "e2e": {
+          "builder": "@nrwl/cypress:cypress",
          "options": {
-            "tsConfig": "packages/permission-management/tsconfig.lib.json",
-            "project": "packages/permission-management/ng-package.json"
+            "cypressConfig": "apps/dev-app-e2e/cypress.json",
+            "tsConfig": "apps/dev-app-e2e/tsconfig.e2e.json",
+            "devServerTarget": "dev-app:serve:development"
          },
          "configurations": {
            "production": {
-              "tsConfig": "packages/permission-management/tsconfig.lib.prod.json"
+              "devServerTarget": "dev-app:serve:production"
            }
          }
        },
-        "test": {
-          "builder": "@angular-builders/jest:run",
-          "options": {
-            "coverage": true,
-            "passWithNoTests": true
-          }
-        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": [
-              "packages/permission-management/tsconfig.lib.json",
-              "packages/permission-management/tsconfig.spec.json"
-            ]
+            "lintFilePatterns": ["apps/dev-app-e2e/**/*.{js,ts}"]
          }
        }
      }
    },
-    "account": {
+    "feature-management": {
      "projectType": "library",
-      "root": "packages/account",
-      "sourceRoot": "packages/account/src",
+      "root": "packages/feature-management",
+      "sourceRoot": "packages/feature-management/src",
      "prefix": "abp",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@nrwl/angular:package",
+          "outputs": ["dist/packages/feature-management"],
          "options": {
-            "tsConfig": "packages/account/tsconfig.lib.json",
-            "project": "packages/account/ng-package.json"
+            "project": "packages/feature-management/ng-package.json"
          },
          "configurations": {
            "production": {
-              "tsConfig": "packages/account/tsconfig.lib.prod.json"
+              "tsConfig": "packages/feature-management/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "packages/feature-management/tsconfig.lib.json"
            }
-          }
+          },
+          "defaultConfiguration": "production"
        },
        "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/packages/feature-management"],
          "options": {
-            "coverage": true,
+            "jestConfig": "packages/feature-management/jest.config.js",
            "passWithNoTests": true
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": [
-              "packages/account/tsconfig.lib.json",
-              "packages/account/tsconfig.spec.json"
-            ],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": [
+              "packages/feature-management/src/**/*.ts",
+              "packages/feature-management/src/**/*.html"
+            ]
          }
        }
      }
@ -266,103 +359,98 @@
      "prefix": "abp",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@nrwl/angular:package",
+          "outputs": ["dist/packages/identity"],
          "options": {
-            "tsConfig": "packages/identity/tsconfig.lib.json",
            "project": "packages/identity/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "packages/identity/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "packages/identity/tsconfig.lib.json"
            }
-          }
+          },
+          "defaultConfiguration": "production"
        },
        "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/packages/identity"],
          "options": {
-            "coverage": true,
+            "jestConfig": "packages/identity/jest.config.js",
            "passWithNoTests": true
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": [
-              "packages/identity/tsconfig.lib.json",
-              "packages/identity/tsconfig.spec.json"
-            ],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": ["packages/identity/src/**/*.ts", "packages/identity/src/**/*.html"]
          }
        }
      }
    },
-    "feature-management": {
+    "permission-management": {
      "projectType": "library",
-      "root": "packages/feature-management",
-      "sourceRoot": "packages/feature-management/src",
+      "root": "packages/permission-management",
+      "sourceRoot": "packages/permission-management/src",
      "prefix": "abp",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@nrwl/angular:package",
+          "outputs": ["dist/packages/permission-management"],
          "options": {
-            "tsConfig": "packages/feature-management/tsconfig.lib.json",
-            "project": "packages/feature-management/ng-package.json"
+            "project": "packages/permission-management/ng-package.json"
          },
          "configurations": {
            "production": {
-              "tsConfig": "packages/feature-management/tsconfig.lib.prod.json"
+              "tsConfig": "packages/permission-management/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "packages/permission-management/tsconfig.lib.json"
            }
-          }
+          },
+          "defaultConfiguration": "production"
        },
        "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/packages/permission-management"],
          "options": {
-            "coverage": true,
+            "jestConfig": "packages/permission-management/jest.config.js",
            "passWithNoTests": true
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": [
-              "packages/feature-management/tsconfig.lib.json",
-              "packages/feature-management/tsconfig.spec.json"
+            "lintFilePatterns": [
+              "packages/permission-management/src/**/*.ts",
+              "packages/permission-management/src/**/*.html"
            ]
          }
        }
      }
    },
-    "tenant-management": {
+    "schematics": {
      "projectType": "library",
-      "root": "packages/tenant-management",
-      "sourceRoot": "packages/tenant-management/src",
+      "root": "packages/schematics",
+      "sourceRoot": "packages/schematics/src",
      "prefix": "abp",
      "architect": {
-        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
-          "options": {
-            "tsConfig": "packages/tenant-management/tsconfig.lib.json",
-            "project": "packages/tenant-management/ng-package.json"
-          },
-          "configurations": {
-            "production": {
-              "tsConfig": "packages/tenant-management/tsconfig.lib.prod.json"
-            }
-          }
-        },
        "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/packages/schematics"],
          "options": {
-            "coverage": true,
+            "jestConfig": "packages/schematics/jest.config.js",
            "passWithNoTests": true
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": [
-              "packages/tenant-management/tsconfig.lib.json",
-              "packages/tenant-management/tsconfig.spec.json"
+            "lintFilePatterns": [
+              "packages/schematics/src/**/*.ts",
+              "packages/schematics/src/**/*.html"
            ]
          }
        }
@ -375,214 +463,194 @@
      "prefix": "abp",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-ng-packagr:build",
+          "builder": "@nrwl/angular:package",
+          "outputs": ["dist/packages/setting-management"],
          "options": {
-            "tsConfig": "packages/setting-management/tsconfig.lib.json",
            "project": "packages/setting-management/ng-package.json"
          },
          "configurations": {
            "production": {
              "tsConfig": "packages/setting-management/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "packages/setting-management/tsconfig.lib.json"
            }
-          }
+          },
+          "defaultConfiguration": "production"
        },
        "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/packages/setting-management"],
          "options": {
-            "coverage": true,
+            "jestConfig": "packages/setting-management/jest.config.js",
            "passWithNoTests": true
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": [
-              "packages/setting-management/tsconfig.lib.json",
-              "packages/setting-management/tsconfig.spec.json"
+            "lintFilePatterns": [
+              "packages/setting-management/src/**/*.ts",
+              "packages/setting-management/src/**/*.html"
            ]
          }
        }
      }
    },
-    "schematics": {
+    "tenant-management": {
      "projectType": "library",
-      "root": "packages/schematics",
-      "sourceRoot": "packages/schematics/src",
+      "root": "packages/tenant-management",
+      "sourceRoot": "packages/tenant-management/src",
      "prefix": "abp",
      "architect": {
        "build": {
+          "builder": "@nrwl/angular:package",
+          "outputs": ["dist/packages/tenant-management"],
          "options": {
-            "tsConfig": "packages/schematics/tsconfig.lib.json",
-            "project": "packages/schematics/ng-package.json"
-          }
+            "project": "packages/tenant-management/ng-package.json"
+          },
+          "configurations": {
+            "production": {
+              "tsConfig": "packages/tenant-management/tsconfig.lib.prod.json"
+            },
+            "development": {
+              "tsConfig": "packages/tenant-management/tsconfig.lib.json"
+            }
+          },
+          "defaultConfiguration": "production"
        },
        "test": {
-          "builder": "@angular-builders/jest:run",
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/packages/tenant-management"],
          "options": {
-            "tsConfig": "tsconfig.json",
-            "coverage": true,
+            "jestConfig": "packages/tenant-management/jest.config.js",
            "passWithNoTests": true
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": ["packages/schematics/tsconfig.json"],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": [
+              "packages/tenant-management/src/**/*.ts",
+              "packages/tenant-management/src/**/*.html"
+            ]
          }
        }
      }
    },
-    "dev-app": {
-      "projectType": "application",
-      "schematics": {
-        "@schematics/angular:component": {
-          "style": "scss"
-        }
-      },
-      "root": "apps/dev-app",
-      "sourceRoot": "apps/dev-app/src",
+    "theme-basic": {
+      "projectType": "library",
+      "root": "packages/theme-basic",
+      "sourceRoot": "packages/theme-basic/src",
      "prefix": "abp",
      "architect": {
        "build": {
-          "builder": "@angular-devkit/build-angular:browser",
+          "builder": "@nrwl/angular:package",
+          "outputs": ["dist/packages/theme-basic"],
          "options": {
-            "outputPath": "dist/dev-app",
-            "index": "apps/dev-app/src/index.html",
-            "main": "apps/dev-app/src/main.ts",
-            "polyfills": "apps/dev-app/src/polyfills.ts",
-            "tsConfig": "apps/dev-app/tsconfig.dev.json",
-            "aot": true,
-            "allowedCommonJsDependencies": ["chart.js", "js-sha256"],
-            "assets": ["apps/dev-app/src/favicon.ico", "apps/dev-app/src/assets"],
-            "styles": [
-              {
-                "input": "node_modules/@abp/ng.theme.shared/styles/bootstrap-rtl.min.css",
-                "inject": false,
-                "bundleName": "bootstrap-rtl.min"
-              },
-              {
-                "input": "node_modules/bootstrap/dist/css/bootstrap.min.css",
-                "inject": true,
-                "bundleName": "bootstrap-ltr.min"
-              },
-              {
-                "input": "node_modules/@fortawesome/fontawesome-free/css/all.min.css",
-                "inject": true,
-                "bundleName": "fontawesome-all.min"
-              },
-              {
-                "input": "node_modules/@fortawesome/fontawesome-free/css/v4-shims.min.css",
-                "inject": true,
-                "bundleName": "fontawesome-v4-shims.min"
-              },
-              {
-                "input": "node_modules/@swimlane/ngx-datatable/index.css",
-                "inject": true,
-                "bundleName": "ngx-datatable-index"
-              },
-              {
-                "input": "node_modules/@swimlane/ngx-datatable/assets/icons.css",
-                "inject": true,
-                "bundleName": "ngx-datatable-icons"
-              },
-              {
-                "input": "node_modules/@swimlane/ngx-datatable/themes/material.css",
-                "inject": true,
-                "bundleName": "ngx-datatable-material"
-              },
-              "apps/dev-app/src/styles.scss"
-            ],
-            "scripts": []
+            "project": "packages/theme-basic/ng-package.json"
          },
          "configurations": {
-            "tsConfig": "apps/dev-app/tsconfig.prod.json",
            "production": {
-              "fileReplacements": [
-                {
-                  "replace": "apps/dev-app/src/environments/environment.ts",
-                  "with": "apps/dev-app/src/environments/environment.prod.ts"
-                }
-              ],
-              "optimization": true,
-              "outputHashing": "all",
-              "sourceMap": false,
-              "namedChunks": false,
-              "extractLicenses": true,
-              "vendorChunk": false,
-              "buildOptimizer": true,
-              "budgets": [
-                {
-                  "type": "initial",
-                  "maximumWarning": "1mb",
-                  "maximumError": "5mb"
-                },
-                {
-                  "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
-                }
-              ]
-            },
-            "internal": {
-              "tsConfig": "apps/dev-app/tsconfig.dev.json",
-              "fileReplacements": [
-                {
-                  "replace": "apps/dev-app/src/environments/environment.ts",
-                  "with": "apps/dev-app/src/environments/environment.internal.ts"
-                }
-              ]
+              "tsConfig": "packages/theme-basic/tsconfig.lib.prod.json"
            },
-            "regression": {
-              "tsConfig": "apps/dev-app/tsconfig.dev.json",
-              "fileReplacements": [
-                {
-                  "replace": "apps/dev-app/src/environments/environment.ts",
-                  "with": "apps/dev-app/src/environments/environment.regression.ts"
-                }
-              ]
+            "development": {
+              "tsConfig": "packages/theme-basic/tsconfig.lib.json"
            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/packages/theme-basic"],
+          "options": {
+            "jestConfig": "packages/theme-basic/jest.config.js",
+            "passWithNoTests": true
          }
        },
-        "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+        "lint": {
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "browserTarget": "dev-app:build"
+            "lintFilePatterns": [
+              "packages/theme-basic/src/**/*.ts",
+              "packages/theme-basic/src/**/*.html"
+            ]
+          }
+        }
+      }
+    },
+    "theme-shared": {
+      "projectType": "library",
+      "root": "packages/theme-shared",
+      "sourceRoot": "packages/theme-shared/src",
+      "prefix": "abp",
+      "architect": {
+        "build": {
+          "builder": "@nrwl/angular:package",
+          "outputs": ["dist/packages/theme-shared"],
+          "options": {
+            "project": "packages/theme-shared/ng-package.json"
          },
          "configurations": {
            "production": {
-              "browserTarget": "dev-app:build:production"
-            },
-            "internal": {
-              "browserTarget": "dev-app:build:internal"
+              "tsConfig": "packages/theme-shared/tsconfig.lib.prod.json"
            },
-            "regression": {
-              "browserTarget": "dev-app:build:regression"
+            "development": {
+              "tsConfig": "packages/theme-shared/tsconfig.lib.json"
            }
-          }
+          },
+          "defaultConfiguration": "production"
        },
-        "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n",
+        "test": {
+          "builder": "@nrwl/jest:jest",
+          "outputs": ["coverage/packages/theme-shared"],
          "options": {
-            "browserTarget": "dev-app:build"
+            "jestConfig": "packages/theme-shared/jest.config.js",
+            "passWithNoTests": true
          }
        },
        "lint": {
-          "builder": "@angular-devkit/build-angular:tslint",
+          "builder": "@nrwl/linter:eslint",
          "options": {
-            "tsConfig": [
-              "apps/dev-app/tsconfig.dev.json",
-              "apps/dev-app/tsconfig.prod.json",
-              "apps/dev-app/tsconfig.spec.json"
-            ],
-            "exclude": ["**/node_modules/**"]
+            "lintFilePatterns": [
+              "packages/theme-shared/src/**/*.ts",
+              "packages/theme-shared/src/**/*.html"
+            ]
          }
        }
      }
    }
  },
  "cli": {
-    "analytics": false
+    "defaultCollection": "@nrwl/angular"
+  },
+  "schematics": {
+    "@nrwl/angular": {
+      "application": {
+        "linter": "eslint"
+      },
+      "library": {
+        "linter": "eslint"
+      },
+      "storybook-configuration": {
+        "linter": "eslint"
+      }
+    },
+    "@nrwl/angular:application": {
+      "style": "scss",
+      "linter": "eslint",
+      "unitTestRunner": "jest",
+      "e2eTestRunner": "cypress"
+    },
+    "@nrwl/angular:library": {
+      "style": "scss",
+      "linter": "eslint",
+      "unitTestRunner": "jest",
+      "strict": false
+    },
+    "@nrwl/angular:component": {
+      "style": "scss"
+    }
  },
  "defaultProject": "dev-app"
 }
--- a/npm/ng-packs/packages/components/src/lib/.gitkeep
+++ b/npm/ng-packs/packages/components/src/lib/.gitkeep
--- a/npm/ng-packs/apps/dev-app-e2e/.eslintrc.json
+++ b/npm/ng-packs/apps/dev-app-e2e/.eslintrc.json
@ -0,0 +1,17 @@
+{
+  "extends": ["plugin:cypress/recommended", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["src/plugins/index.js"],
+      "rules": {
+        "@typescript-eslint/no-var-requires": "off",
+        "no-undef": "off"
+      }
+    }
+  ]
+}
--- a/npm/ng-packs/apps/dev-app-e2e/cypress.json
+++ b/npm/ng-packs/apps/dev-app-e2e/cypress.json
@ -0,0 +1,12 @@
+{
+  "fileServerFolder": ".",
+  "fixturesFolder": "./src/fixtures",
+  "integrationFolder": "./src/integration",
+  "modifyObstructiveCode": false,
+  "pluginsFile": "./src/plugins/index",
+  "supportFile": "./src/support/index.ts",
+  "video": true,
+  "videosFolder": "../../dist/cypress/apps/dev-app-e2e/videos",
+  "screenshotsFolder": "../../dist/cypress/apps/dev-app-e2e/screenshots",
+  "chromeWebSecurity": false
+}
--- a/npm/ng-packs/apps/dev-app-e2e/src/fixtures/example.json
+++ b/npm/ng-packs/apps/dev-app-e2e/src/fixtures/example.json
@ -0,0 +1,4 @@
+{
+  "name": "Using fixtures to represent data",
+  "email": "hello@cypress.io"
+}
--- a/npm/ng-packs/apps/dev-app-e2e/src/integration/app.spec.ts
+++ b/npm/ng-packs/apps/dev-app-e2e/src/integration/app.spec.ts
@ -0,0 +1,13 @@
+import { getGreeting } from '../support/app.po';
+
+describe('dev-app', () => {
+  beforeEach(() => cy.visit('/'));
+
+  it('should display welcome message', () => {
+    // Custom command example, see `../support/commands.ts` file
+    cy.login('my-email@something.com', 'myPassword');
+
+    // Function helper example, see `../support/app.po.ts` file
+    getGreeting().contains('Welcome to dev-app!');
+  });
+});
--- a/npm/ng-packs/apps/dev-app-e2e/src/plugins/index.js
+++ b/npm/ng-packs/apps/dev-app-e2e/src/plugins/index.js
@ -0,0 +1,22 @@
+// ***********************************************************
+// This example plugins/index.js can be used to load plugins
+//
+// You can change the location of this file or turn off loading
+// the plugins file with the 'pluginsFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/plugins-guide
+// ***********************************************************
+
+// This function is called when a project is opened or re-opened (e.g. due to
+// the project's config changing)
+
+const { preprocessTypescript } = require('@nrwl/cypress/plugins/preprocessor');
+
+module.exports = (on, config) => {
+  // `on` is used to hook into various events Cypress emits
+  // `config` is the resolved Cypress config
+
+  // Preprocess Typescript file using Nx helper
+  on('file:preprocessor', preprocessTypescript(config));
+};
--- a/npm/ng-packs/apps/dev-app-e2e/src/support/app.po.ts
+++ b/npm/ng-packs/apps/dev-app-e2e/src/support/app.po.ts
@ -0,0 +1 @@
+export const getGreeting = () => cy.get('h1');
--- a/npm/ng-packs/apps/dev-app-e2e/src/support/commands.ts
+++ b/npm/ng-packs/apps/dev-app-e2e/src/support/commands.ts
@ -0,0 +1,33 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+
+// eslint-disable-next-line @typescript-eslint/no-namespace
+declare namespace Cypress {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  interface Chainable<Subject> {
+    login(email: string, password: string): void;
+  }
+}
+//
+// -- This is a parent command --
+Cypress.Commands.add('login', (email, password) => {
+  console.log('Custom command example: Login', email, password);
+});
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
--- a/npm/ng-packs/apps/dev-app-e2e/src/support/index.ts
+++ b/npm/ng-packs/apps/dev-app-e2e/src/support/index.ts
@ -0,0 +1,17 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands';
--- a/npm/ng-packs/apps/dev-app-e2e/tsconfig.e2e.json
+++ b/npm/ng-packs/apps/dev-app-e2e/tsconfig.e2e.json
@ -0,0 +1,21 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "sourceMap": false,
+    "outDir": "../../dist/out-tsc",
+    "allowJs": true,
+    "types": ["cypress", "node"],
+    "forceConsistentCasingInFileNames": true,
+    "strict": false,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+
+  },
+  "include": ["src/**/*.ts", "src/**/*.js"],
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": false,
+    "strictTemplates": false
+  }
+}
--- a/npm/ng-packs/apps/dev-app-e2e/tsconfig.json
+++ b/npm/ng-packs/apps/dev-app-e2e/tsconfig.json
@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.e2e.json"
+    }
+  ]
+}
--- a/npm/ng-packs/apps/dev-app/.browserslistrc
+++ b/npm/ng-packs/apps/dev-app/.browserslistrc
@ -2,11 +2,16 @@
 # For additional information regarding the format and rule options, please see:
 # https://github.com/browserslist/browserslist#queries

+# For the full list of supported browsers by the Angular framework, please see:
+# https://angular.io/guide/browser-support
+
 # You can see what browsers were selected by your queries by running:
 #   npx browserslist

-> 0.5%
-last 2 versions
+last 1 Chrome version
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
 Firefox ESR
-not dead
-not IE 9-11 # For IE 9-11 support, remove 'not'.
+not IE 11 # Angular supports IE 11 only as an opt-in. To opt-in, remove the 'not' prefix on this line.
--- a/npm/ng-packs/apps/dev-app/.eslintrc.json
+++ b/npm/ng-packs/apps/dev-app/.eslintrc.json
@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "ngPacks",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "app",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
--- a/npm/ng-packs/apps/dev-app/jest.config.js
+++ b/npm/ng-packs/apps/dev-app/jest.config.js
@ -0,0 +1,20 @@
+module.exports = {
+  displayName: 'dev-app',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: '../../coverage/apps/dev-app',
+  transform: {
+    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
+};
--- a/npm/ng-packs/apps/dev-app/src/app/app.module.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/app.module.ts
@ -9,15 +9,12 @@ import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { NgModule } from '@angular/core';
 import { BrowserModule } from '@angular/platform-browser';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NgxsLoggerPluginModule } from '@ngxs/logger-plugin';
 import { NgxsModule } from '@ngxs/store';
 import { environment } from '../environments/environment';
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
 import { APP_ROUTE_PROVIDER } from './route.provider';

-const INSPECTION_TOOLS = [NgxsLoggerPluginModule.forRoot({ disabled: true })];
-
@NgModule({
  imports: [
    BrowserModule,
@ -36,7 +33,6 @@ const INSPECTION_TOOLS = [NgxsLoggerPluginModule.forRoot({ disabled: true })];
    SettingManagementConfigModule.forRoot(),
    NgxsModule.forRoot(),
    ThemeBasicModule.forRoot(),
-    ...(environment.production || environment.test ? [] : INSPECTION_TOOLS),
  ],
  providers: [APP_ROUTE_PROVIDER],
  declarations: [AppComponent],
--- a/npm/ng-packs/apps/dev-app/src/app/shared/shared.module.ts
+++ b/npm/ng-packs/apps/dev-app/src/app/shared/shared.module.ts
@ -6,18 +6,8 @@ import { NgxValidateCoreModule } from '@ngx-validate/core';

@NgModule({
  declarations: [],
-  imports: [
-    CoreModule,
-    ThemeSharedModule,
-    NgbDropdownModule,
-    NgxValidateCoreModule,
-  ],
-  exports: [
-    CoreModule,
-    ThemeSharedModule,
-    NgbDropdownModule,
-    NgxValidateCoreModule,
-  ],
+  imports: [CoreModule, ThemeSharedModule, NgbDropdownModule, NgxValidateCoreModule],
+  exports: [CoreModule, ThemeSharedModule, NgbDropdownModule, NgxValidateCoreModule],
  providers: [],
 })
 export class SharedModule {}
--- a/npm/ng-packs/apps/dev-app/src/environments/environment.regression.ts
+++ b/npm/ng-packs/apps/dev-app/src/environments/environment.regression.ts
@ -1,43 +0,0 @@
-import { Config } from '@abp/ng.core';
-
-const baseUrl = 'http://localhost:4200';
-
-export const environment = {
-  test: true,
-  production: false,
-  hmr: false,
-  application: {
-    baseUrl,
-    name: 'MyProjectName',
-    logoUrl: '',
-  },
-  oAuthConfig: {
-    issuer: 'https://localhost:44305',
-    redirectUri: baseUrl,
-    clientId: 'MyProjectName_App',
-    responseType: 'code',
-    scope: 'offline_access MyProjectName',
-  },
-  apis: {
-    default: {
-      url: 'https://localhost:44305',
-      rootNamespace: 'MyCompanyName.MyProjectName',
-    },
-    AbpFeatureManagement: {
-      url: 'https://localhost:44305',
-      rootNamespace: 'Volo.Abp',
-    },
-    AbpPermissionManagement: {
-      url: 'https://localhost:44305',
-      rootNamespace: 'Volo.Abp.PermissionManagement',
-    },
-    AbpTenantManagement: {
-      url: 'https://localhost:44305',
-      rootNamespace: 'Volo.Abp.TenantManagement',
-    },
-    AbpIdentity: {
-      url: 'https://localhost:44305',
-      rootNamespace: 'Volo.Abp',
-    },
-  },
-} as Config.Environment;
--- a/npm/ng-packs/apps/dev-app/src/polyfills.ts
+++ b/npm/ng-packs/apps/dev-app/src/polyfills.ts
@ -1,7 +1,3 @@
-/***************************************************************************************************
- * 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.
@ -22,7 +18,9 @@ import '@angular/localize/init';
 * BROWSER POLYFILLS
 */

-/** IE10 and IE11 requires the following for NgClass support on SVG elements */
+/**
+ * IE11 requires the following for NgClass support on SVG elements
+ */
 // import 'classlist.js';  // Run `npm install --save classlist.js`.

 /**
@ -39,7 +37,7 @@ import '@angular/localize/init';
 * 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.
 *
@ -59,7 +57,7 @@ import '@angular/localize/init';
 /***************************************************************************************************
 * Zone JS is required by default for Angular itself.
 */
-import 'zone.js/dist/zone'; // Included with Angular CLI.
+import 'zone.js'; // Included with Angular CLI.

 /***************************************************************************************************
 * APPLICATION IMPORTS
--- a/npm/ng-packs/apps/dev-app/src/test-setup.ts
+++ b/npm/ng-packs/apps/dev-app/src/test-setup.ts
@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';
--- a/npm/ng-packs/apps/dev-app/tsconfig.app.json
+++ b/npm/ng-packs/apps/dev-app/tsconfig.app.json
@ -0,0 +1,9 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": []
+  },
+  "files": ["src/main.ts", "src/polyfills.ts"],
+  "include": ["src/**/*.d.ts"]
+}
--- a/npm/ng-packs/apps/dev-app/tsconfig.dev.json
+++ b/npm/ng-packs/apps/dev-app/tsconfig.dev.json
@ -1,10 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "outDir": "../../out-tsc/app",
-    "types": []
-  },
-  "files": ["src/main.ts", "src/polyfills.ts"],
-  "include": ["src/**/*.ts"],
-  "exclude": ["src/test.ts", "src/**/*.spec.ts", "src/environments/*.ts"]
-}
--- a/npm/ng-packs/apps/dev-app/tsconfig.editor.json
+++ b/npm/ng-packs/apps/dev-app/tsconfig.editor.json
@ -0,0 +1,7 @@
+{
+  "extends": "./tsconfig.json",
+  "include": ["**/*.ts"],
+  "compilerOptions": {
+    "types": ["jest", "node"]
+  }
+}
--- a/npm/ng-packs/apps/dev-app/tsconfig.json
+++ b/npm/ng-packs/apps/dev-app/tsconfig.json
@ -0,0 +1,28 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.app.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.editor.json"
+    }
+  ],
+  "compilerOptions": {
+    "forceConsistentCasingInFileNames": true,
+    "strict": false,
+    "noImplicitReturns": false,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+  },
+  "angularCompilerOptions": {
+    "strictInjectionParameters": true,
+    "strictInputAccessModifiers": false,
+    "strictTemplates": false
+  }
+}
--- a/npm/ng-packs/apps/dev-app/tsconfig.spec.json
+++ b/npm/ng-packs/apps/dev-app/tsconfig.spec.json
@ -1,9 +1,11 @@
 {
-  "extends": "../../tsconfig.json",
+  "extends": "./tsconfig.json",
  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": ["node", "jest"]
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"],
+    "esModuleInterop": true
  },
-  "files": ["src/polyfills.ts"],
-  "include": ["src/**/*.spec.ts", "src/**/*.d.ts"]
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
 }
--- a/npm/ng-packs/apps/dev-app/tslint.json
+++ b/npm/ng-packs/apps/dev-app/tslint.json
@ -1,7 +0,0 @@
-{
-  "extends": "../../tslint.json",
-  "rules": {
-    "directive-selector": [true, "attribute", "app", "camelCase"],
-    "component-selector": [true, "element", "app", "kebab-case"]
-  }
-}
--- a/npm/ng-packs/decorate-angular-cli.js
+++ b/npm/ng-packs/decorate-angular-cli.js
@ -0,0 +1,73 @@
+/**
+ * This file decorates the Angular CLI with the Nx CLI to enable features such as computation caching
+ * and faster execution of tasks.
+ *
+ * It does this by:
+ *
+ * - Patching the Angular CLI to warn you in case you accidentally use the undecorated ng command.
+ * - Symlinking the ng to nx command, so all commands run through the Nx CLI
+ * - Updating the package.json postinstall script to give you control over this script
+ *
+ * The Nx CLI decorates the Angular CLI, so the Nx CLI is fully compatible with it.
+ * Every command you run should work the same when using the Nx CLI, except faster.
+ *
+ * Because of symlinking you can still type `ng build/test/lint` in the terminal. The ng command, in this case,
+ * will point to nx, which will perform optimizations before invoking ng. So the Angular CLI is always invoked.
+ * The Nx CLI simply does some optimizations before invoking the Angular CLI.
+ *
+ * To opt out of this patch:
+ * - Replace occurrences of nx with ng in your package.json
+ * - Remove the script from your postinstall script in your package.json
+ * - Delete and reinstall your node_modules
+ */
+
+const fs = require('fs');
+const os = require('os');
+const cp = require('child_process');
+const isWindows = os.platform() === 'win32';
+let output;
+try {
+  output = require('@nrwl/workspace').output;
+} catch (e) {
+  console.warn(
+    'Angular CLI could not be decorated to enable computation caching. Please ensure @nrwl/workspace is installed.',
+  );
+  process.exit(0);
+}
+
+/**
+ * Symlink of ng to nx, so you can keep using `ng build/test/lint` and still
+ * invoke the Nx CLI and get the benefits of computation caching.
+ */
+function symlinkNgCLItoNxCLI() {
+  try {
+    const ngPath = './node_modules/.bin/ng';
+    const nxPath = './node_modules/.bin/nx';
+    if (isWindows) {
+      /**
+       * This is the most reliable way to create symlink-like behavior on Windows.
+       * Such that it works in all shells and works with npx.
+       */
+      ['', '.cmd', '.ps1'].forEach(ext => {
+        if (fs.existsSync(nxPath + ext))
+          fs.writeFileSync(ngPath + ext, fs.readFileSync(nxPath + ext));
+      });
+    } else {
+      // If unix-based, symlink
+      cp.execSync(`ln -sf ./nx ${ngPath}`);
+    }
+  } catch (e) {
+    output.error({
+      title: 'Unable to create a symlink from the Angular CLI to the Nx CLI:' + e.message,
+    });
+    throw e;
+  }
+}
+
+try {
+  symlinkNgCLItoNxCLI();
+  require('@nrwl/cli/lib/decorate-cli').decorateCli();
+  output.log({ title: 'Angular CLI has been decorated to enable computation caching.' });
+} catch (e) {
+  output.error({ title: 'Decoration of the Angular CLI did not complete successfully' });
+}
--- a/npm/ng-packs/jest.config.js
+++ b/npm/ng-packs/jest.config.js
@ -1,19 +1,5 @@
+const { getJestProjects } = require('@nrwl/jest');
+
 module.exports = {
-  globals: {
-    'ts-jest': {
-      allowSyntheticDefaultImports: true,
-    },
-  },
-  transform: {
-    '^.+\\.(ts|js|html)$': 'ts-jest',
-  },
-  moduleFileExtensions: ['ts', 'js', 'html'],
-  coverageDirectory: '<rootDir>/coverage',
-  coverageReporters: ['html'],
-  preset: 'jest-preset-angular',
-  setupFilesAfterEnv: ['<rootDir>/test-setup.ts', 'jest-canvas-mock'],
-  // snapshotSerializers: [
-  //   'jest-preset-angular/AngularSnapshotSerializer.js',
-  //   'jest-preset-angular/HTMLCommentSerializer.js',
-  // ],
+  projects: getJestProjects(),
 };
--- a/npm/ng-packs/jest.preset.js
+++ b/npm/ng-packs/jest.preset.js
@ -0,0 +1,3 @@
+const nxPreset = require('@nrwl/jest/preset');
+
+module.exports = { ...nxPreset };
--- a/npm/ng-packs/lerna.publish.json
+++ b/npm/ng-packs/lerna.publish.json
@ -1,5 +1,5 @@
 {
-  "version": "1.1.1",
-  "packages": ["dist/*"],
+  "version": "1.0.0",
+  "packages": ["dist/packages/*"],
  "npmClient": "yarn"
 }
--- a/npm/ng-packs/lerna.version.json
+++ b/npm/ng-packs/lerna.version.json
@ -1,5 +1,5 @@
 {
-  "version": "4.4.0-rc.2",
+  "version": "4.4.0",
  "packages": [
    "packages/*"
  ],
--- a/npm/ng-packs/nx.json
+++ b/npm/ng-packs/nx.json
@ -0,0 +1,88 @@
+{
+  "npmScope": "abp",
+  "affected": {
+    "defaultBase": "dev"
+  },
+  "implicitDependencies": {
+    "package.json": {
+      "dependencies": "*",
+      "devDependencies": "*"
+    },
+    ".eslintrc.json": "*"
+  },
+  "tasksRunnerOptions": {
+    "default": {
+      "runner": "@nrwl/workspace/tasks-runners/default",
+      "options": {
+        "cacheableOperations": ["build", "lint", "test", "e2e"]
+      }
+    }
+  },
+  "targetDependencies": {
+    "build": [
+      {
+        "target": "build",
+        "projects": "dependencies"
+      }
+    ]
+  },
+  "workspaceLayout": {
+    "libsDir": "packages",
+    "appsDir": ""
+  },
+  "projects": {
+    "account": {
+      "tags": [],
+      "implicitDependencies": ["core", "theme-shared"]
+    },
+    "account-core": {
+      "tags": [],
+      "implicitDependencies": ["core", "theme-shared"]
+    },
+    "components": {
+      "tags": [],
+      "implicitDependencies": ["core", "theme-shared"]
+    },
+    "core": {
+      "tags": []
+    },
+    "dev-app": {
+      "tags": []
+    },
+    "dev-app-e2e": {
+      "tags": [],
+      "implicitDependencies": ["dev-app"]
+    },
+    "feature-management": {
+      "tags": [],
+      "implicitDependencies": ["core", "theme-shared"]
+    },
+    "identity": {
+      "tags": [],
+      "implicitDependencies": ["core", "theme-shared", "permission-management"]
+    },
+    "permission-management": {
+      "tags": [],
+      "implicitDependencies": ["core", "theme-shared"]
+    },
+    "schematics": {
+      "tags": []
+    },
+    "setting-management": {
+      "tags": [],
+      "implicitDependencies": ["core", "theme-shared", "components"]
+    },
+    "tenant-management": {
+      "tags": [],
+      "implicitDependencies": ["core", "theme-shared", "feature-management"]
+    },
+    "theme-basic": {
+      "tags": [],
+      "implicitDependencies": ["core", "theme-shared", "account-core"]
+    },
+    "theme-shared": {
+      "tags": [],
+      "implicitDependencies": ["core"]
+    }
+  }
+}
--- a/npm/ng-packs/package.json
+++ b/npm/ng-packs/package.json
@ -1,32 +1,44 @@
 {
-  "homepage": "https://abp.io",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/abpframework/abp.git"
-  },
+  "name": "abp-ng-packs",
+  "version": "0.0.0",
+  "license": "MIT",
  "scripts": {
-    "ng": "ng",
-    "symlink": "symlink",
-    "symlink-all": "symlink copy --angular --prod --all-packages --no-watch --sync --excluded-packages @abp/ng.schematics",
-    "start": "ng serve dev-app",
-    "start:internal": "ng serve dev-app --configuration=internal",
-    "start:regression": "ng serve dev-app --configuration=regression",
+    "ng": "nx",
+    "nx": "nx",
+    "start": "ng serve",
    "build": "ng build",
-    "test": "ng test --watchAll --runInBand",
-    "commit": "git-cz",
-    "lint": "ng lint",
+    "build:all": "nx run-many --target=build --all --exclude=dev-app,schematics --prod && yarn build:schematics",
+    "test": "ng test --detect-open-handles=true --run-in-band=true --watch-all=true",
+    "test:all": "nx run-many --target=test --all",
+    "lint": "nx workspace-lint && ng lint",
+    "lint:all": "nx run-many --target=lint --all",
+    "e2e": "ng e2e",
+    "affected:apps": "nx affected:apps",
+    "affected:libs": "nx affected:libs",
+    "affected:build": "nx affected:build",
+    "affected:e2e": "nx affected:e2e",
+    "affected:test": "nx affected:test",
+    "affected:lint": "nx affected:lint",
+    "affected:dep-graph": "nx affected:dep-graph",
+    "affected": "nx affected",
+    "format": "nx format:write",
+    "format:write": "nx format:write",
+    "format:check": "nx format:check",
+    "update": "nx migrate latest",
+    "workspace-generator": "nx workspace-generator",
+    "dep-graph": "nx dep-graph",
+    "help": "nx help",
+    "compile:ivy": "yarn ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points --tsconfig './tsconfig.prod.json' --source node_modules",
+    "postinstall": "node ./decorate-angular-cli.js && yarn compile:ivy",
    "build:schematics": "cd scripts && yarn && yarn build:schematics && cd ..",
    "dev:schematics": "tsc -p packages/schematics/tsconfig.json -w",
-    "scripts:build": "cd scripts && yarn && yarn build",
-    "prepare:workspace": "yarn scripts:build --noInstall",
-    "ci": "yarn ng lint && yarn prepare:workspace && yarn ci:test && yarn ci:build",
-    "ci:test": "ng test --coverage=false --silent",
-    "ci:build": "cd scripts && yarn install && yarn build:prod",
-    "lerna": "lerna",
-    "compile:ivy": "yarn ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points --tsconfig './tsconfig.prod.json' --source node_modules",
-    "postinstall": "npm run compile:ivy"
+    "ci": "yarn affected:lint && yarn affected:build && yarn affected:test",
+    "lerna": "lerna"
  },
+  "private": true,
  "devDependencies": {
+    "@abp/ng.account": "~4.4.0",
+    "@abp/ng.account.core": "~4.4.0",
    "@abp/ng.core": "~4.4.0",
    "@abp/ng.feature-management": "~4.4.0",
    "@abp/ng.identity": "~4.4.0",
@ -37,70 +49,87 @@
    "@abp/ng.theme.basic": "~4.4.0",
    "@abp/ng.theme.shared": "~4.4.0",
    "@abp/utils": "^4.4.0",
-    "@angular-builders/jest": "^10.0.0",
-    "@angular-devkit/build-angular": "~0.1101.0",
-    "@angular-devkit/build-ng-packagr": "~0.1001.2",
-    "@angular-devkit/schematics-cli": "^0.1001.1",
-    "@angular/animations": "~11.1.0",
-    "@angular/cli": "~11.1.0",
-    "@angular/common": "~11.1.0",
-    "@angular/compiler": "11.1.0",
-    "@angular/compiler-cli": "11.1.0",
-    "@angular/core": "~11.1.0",
-    "@angular/forms": "~11.1.0",
-    "@angular/language-service": "~11.1.0",
-    "@angular/localize": "~11.1.0",
-    "@angular/platform-browser": "~11.1.0",
-    "@angular/platform-browser-dynamic": "~11.1.0",
-    "@angular/router": "~11.1.0",
+    "@angular-devkit/build-angular": "~12.2.0",
+    "@angular-devkit/build-ng-packagr": "^0.1002.0",
+    "@angular-devkit/schematics-cli": "~12.2.0",
+    "@angular-eslint/eslint-plugin": "~12.3.0",
+    "@angular-eslint/eslint-plugin-template": "~12.3.0",
+    "@angular-eslint/template-parser": "~12.3.0",
+    "@angular/animations": "~12.2.0",
+    "@angular/cli": "~12.2.0",
+    "@angular/common": "~12.2.0",
+    "@angular/compiler": "~12.2.0",
+    "@angular/compiler-cli": "^12.2.0",
+    "@angular/core": "~12.2.0",
+    "@angular/forms": "~12.2.0",
+    "@angular/language-service": "^12.2.0",
+    "@angular/localize": "~12.2.0",
+    "@angular/platform-browser": "~12.2.0",
+    "@angular/platform-browser-dynamic": "~12.2.0",
+    "@angular/router": "~12.2.0",
    "@fortawesome/fontawesome-free": "^5.14.0",
    "@ng-bootstrap/ng-bootstrap": "^7.0.0",
-    "@ngneat/spectator": "^5.13.0",
+    "@ngneat/spectator": "^8.0.3",
    "@ngx-validate/core": "^0.0.13",
-    "@ngxs/devtools-plugin": "^3.7.0",
-    "@ngxs/logger-plugin": "^3.7.0",
    "@ngxs/store": "^3.7.0",
-    "@schematics/angular": "~10.0.5",
-    "@swimlane/ngx-datatable": "^18.0.0",
-    "@types/jest": "^25.2.3",
-    "@types/node": "^12.11.1",
-    "angular-oauth2-oidc": "^10.0.3",
+    "@nrwl/angular": "12.6.5",
+    "@nrwl/cli": "12.6.5",
+    "@nrwl/cypress": "12.6.5",
+    "@nrwl/eslint-plugin-nx": "12.6.5",
+    "@nrwl/jest": "12.6.5",
+    "@nrwl/linter": "12.6.5",
+    "@nrwl/tao": "12.6.5",
+    "@nrwl/workspace": "12.6.5",
+    "@schematics/angular": "~12.2.0",
+    "@swimlane/ngx-datatable": "^17.1.0",
+    "@types/jest": "26.0.24",
+    "@types/node": "14.14.33",
+    "@typescript-eslint/eslint-plugin": "~4.28.3",
+    "@typescript-eslint/parser": "~4.28.3",
+    "angular-oauth2-oidc": "^12.0.2",
    "bootstrap": "^4.5.0",
    "chart.js": "^2.9.3",
-    "codelyzer": "^6.0.0",
-    "conventional-changelog-cli": "^2.0.31",
-    "cz-conventional-changelog": "3.0.2",
-    "font-awesome": "^4.7.0",
+    "cypress": "^7.3.0",
+    "dotenv": "~10.0.0",
+    "eslint": "7.22.0",
+    "eslint-config-prettier": "8.1.0",
+    "eslint-plugin-cypress": "^2.10.3",
    "got": "^11.5.2",
-    "jest": "^25.0.0",
-    "jest-canvas-mock": "^2.2.0",
-    "jest-preset-angular": "^8.2.0",
+    "jest": "27.0.3",
+    "jest-canvas-mock": "^2.3.1",
+    "jest-preset-angular": "9.0.4",
    "jsonc-parser": "^2.3.0",
    "just-clone": "^3.1.0",
    "just-compare": "^1.3.0",
    "lerna": "^3.19.0",
-    "ng-packagr": "^11.0.1",
+    "ng-packagr": "^12.2.0",
    "ng-zorro-antd": "^11.0.1",
    "ngxs-schematic": "^1.1.9",
-    "prettier": "^2.2.0",
+    "prettier": "^2.3.1",
    "protractor": "~7.0.0",
-    "rxjs": "~6.6.3",
+    "rxjs": "~6.6.0",
    "should-quote": "^1.0.0",
    "snq": "^1.0.3",
-    "symlink-manager": "^1.5.0",
-    "ts-node": "~7.0.0",
+    "ts-jest": "27.0.3",
+    "ts-node": "~9.1.1",
    "ts-toolbelt": "6.15.4",
    "tsickle": "^0.39.1",
+    "tslib": "^2.0.0",
    "tslint": "~6.1.0",
-    "typescript": "~4.1.3",
-    "zone.js": "~0.10.2"
+    "typescript": "~4.3.5",
+    "zone.js": "~0.11.4"
  },
  "dependencies": {
-    "tslib": "^2.0.0"
-  },
-  "config": {
-    "commitizen": {
-      "path": "cz-conventional-changelog"
-    }
+    "@angular/animations": "^12.1.0",
+    "@angular/common": "^12.1.0",
+    "@angular/compiler": "^12.1.0",
+    "@angular/core": "^12.1.0",
+    "@angular/forms": "^12.1.0",
+    "@angular/platform-browser": "^12.1.0",
+    "@angular/platform-browser-dynamic": "^12.1.0",
+    "@angular/router": "^12.1.0",
+    "rxjs": "~6.6.0",
+    "tslib": "^2.0.0",
+    "zone.js": "~0.11.4"
  }
 }
--- a/npm/ng-packs/packages/.gitkeep
+++ b/npm/ng-packs/packages/.gitkeep
--- a/npm/ng-packs/packages/account-core/.eslintrc.json
+++ b/npm/ng-packs/packages/account-core/.eslintrc.json
@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "abp",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "abp",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
--- a/npm/ng-packs/packages/account-core/jest.config.js
+++ b/npm/ng-packs/packages/account-core/jest.config.js
@ -1,6 +1,20 @@
-const jestConfig = require('../../jest.config');
-
 module.exports = {
-  ...jestConfig,
-  name: 'account-core',
+  displayName: 'account-core',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: '../../coverage/packages/account-core',
+  transform: {
+    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
 };
--- a/npm/ng-packs/packages/account-core/ng-package.json
+++ b/npm/ng-packs/packages/account-core/ng-package.json
@ -1,6 +1,6 @@
 {
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/account-core",
+  "dest": "../../dist/packages/account-core",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
--- a/npm/ng-packs/packages/account-core/package.json
+++ b/npm/ng-packs/packages/account-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@abp/ng.account.core",
-  "version": "4.4.0-rc.2",
+  "version": "4.4.0",
  "homepage": "https://abp.io",
  "repository": {
    "type": "git",
@ -9,8 +9,8 @@
  "peerDependencies": {
    "@abp/ng.core": "~4.4.0",
    "@abp/ng.theme.shared": "~4.4.0",
-    "@angular/common": ">=11.1.2",
-    "@angular/core": ">=11.1.2"
+    "@angular/common": ">=12.0.0",
+    "@angular/core": ">=12.0.0"
  },
  "dependencies": {
    "tslib": "^2.0.0"
--- a/npm/ng-packs/packages/account-core/src/lib/auth-wrapper.service.spec.ts
+++ b/npm/ng-packs/packages/account-core/src/lib/auth-wrapper.service.spec.ts
@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { AuthWrapperService } from './auth-wrapper.service';
-
-describe('AuthWrapperService', () => {
-  let service: AuthWrapperService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(AuthWrapperService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
--- a/npm/ng-packs/packages/account-core/src/lib/tenant-box.service.spec.ts
+++ b/npm/ng-packs/packages/account-core/src/lib/tenant-box.service.spec.ts
@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { TenantBoxService } from './tenant-box.service';
-
-describe('TenantBoxService', () => {
-  let service: TenantBoxService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(TenantBoxService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});
--- a/npm/ng-packs/packages/account-core/src/test-setup.ts
+++ b/npm/ng-packs/packages/account-core/src/test-setup.ts
@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';
--- a/npm/ng-packs/packages/account-core/src/test.ts
+++ b/npm/ng-packs/packages/account-core/src/test.ts
@ -1,26 +0,0 @@
-// This file is required by karma.conf.js and loads recursively all the .spec and framework files
-
-import 'zone.js/dist/zone';
-import 'zone.js/dist/zone-testing';
-import { getTestBed } from '@angular/core/testing';
-import {
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting
-} from '@angular/platform-browser-dynamic/testing';
-
-declare const require: {
-  context(path: string, deep?: boolean, filter?: RegExp): {
-    keys(): string[];
-    <T>(id: string): T;
-  };
-};
-
-// First, initialize the Angular testing environment.
-getTestBed().initTestEnvironment(
-  BrowserDynamicTestingModule,
-  platformBrowserDynamicTesting()
-);
-// Then we find all the tests.
-const context = require.context('./', true, /\.spec\.ts$/);
-// And load the modules.
-context.keys().map(context);
--- a/npm/ng-packs/packages/account-core/tsconfig.json
+++ b/npm/ng-packs/packages/account-core/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
--- a/npm/ng-packs/packages/account-core/tsconfig.lib.json
+++ b/npm/ng-packs/packages/account-core/tsconfig.lib.json
@ -1,20 +1,14 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "../../tsconfig.prod.json",
+  "extends": "./tsconfig.json",
  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
+    "outDir": "../../dist/out-tsc",
    "target": "es2015",
    "declaration": true,
+    "declarationMap": true,
    "inlineSources": true,
    "types": [],
    "lib": ["dom", "es2018"]
  },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true,
-    "enableResourceInlining": true
-  },
-  "exclude": ["src/test.ts", "**/*.spec.ts"]
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
+  "include": ["**/*.ts"]
 }
--- a/npm/ng-packs/packages/account-core/tsconfig.lib.prod.json
+++ b/npm/ng-packs/packages/account-core/tsconfig.lib.prod.json
@ -1,6 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
  "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial",
+    "enableIvy": true
  }
 }
--- a/npm/ng-packs/packages/account-core/tsconfig.spec.json
+++ b/npm/ng-packs/packages/account-core/tsconfig.spec.json
@ -1,17 +1,11 @@
-/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
-  "extends": "../../tsconfig.json",
+  "extends": "./tsconfig.json",
  "compilerOptions": {
-    "outDir": "../../out-tsc/spec",
-    "types": [
-      "jasmine"
-    ]
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"],
+    "esModuleInterop": true
  },
-  "files": [
-    "src/test.ts"
-  ],
-  "include": [
-    "**/*.spec.ts",
-    "**/*.d.ts"
-  ]
+  "files": ["src/test-setup.ts"],
+  "include": ["**/*.spec.ts", "**/*.d.ts"]
 }
--- a/npm/ng-packs/packages/account-core/tslint.json
+++ b/npm/ng-packs/packages/account-core/tslint.json
@ -1,17 +0,0 @@
-{
-  "extends": "../../tslint.json",
-  "rules": {
-    "directive-selector": [
-      true,
-      "attribute",
-      "lib",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "lib",
-      "kebab-case"
-    ]
-  }
-}
--- a/npm/ng-packs/packages/account/.eslintrc.json
+++ b/npm/ng-packs/packages/account/.eslintrc.json
@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "abp",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "abp",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
--- a/npm/ng-packs/packages/account/config/ng-package.json
+++ b/npm/ng-packs/packages/account/config/ng-package.json
@ -1,6 +1,6 @@
 {
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/account/config",
+  "dest": "../../../dist/packages/account/config",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
--- a/npm/ng-packs/packages/account/jest.config.js
+++ b/npm/ng-packs/packages/account/jest.config.js
@ -1,6 +1,20 @@
-const jestConfig = require('../../jest.config');
-
 module.exports = {
-  ...jestConfig,
-  name: 'account',
+  displayName: 'account',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: '../../coverage/packages/account',
+  transform: {
+    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
 };
--- a/npm/ng-packs/packages/account/ng-package.json
+++ b/npm/ng-packs/packages/account/ng-package.json
@ -1,6 +1,6 @@
 {
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/account",
+  "dest": "../../dist/packages/account",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
--- a/npm/ng-packs/packages/account/ngcc.config.js
+++ b/npm/ng-packs/packages/account/ngcc.config.js
@ -1,6 +0,0 @@
-module.exports = {
-  entryPoints: {
-    '.': {},
-    './config': {}
-  },
-};
--- a/npm/ng-packs/packages/account/package.json
+++ b/npm/ng-packs/packages/account/package.json
@ -1,6 +1,6 @@
 {
  "name": "@abp/ng.account",
-  "version": "4.4.0-rc.2",
+  "version": "4.4.0",
  "homepage": "https://abp.io",
  "repository": {
    "type": "git",
--- a/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/change-password/change-password.component.ts
@ -18,7 +18,8 @@ const PASSWORD_FIELDS = ['newPassword', 'repeatNewPassword'];
  exportAs: 'abpChangePasswordForm',
 })
 export class ChangePasswordComponent
-  implements OnInit, Account.ChangePasswordComponentInputs, Account.ChangePasswordComponentOutputs {
+  implements OnInit, Account.ChangePasswordComponentInputs, Account.ChangePasswordComponentOutputs
+{
  form: FormGroup;

  inProgress: boolean;
--- a/npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/forgot-password/forgot-password.component.ts
@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component } from '@angular/core';
 import { FormBuilder, FormGroup, Validators } from '@angular/forms';
 import { finalize } from 'rxjs/operators';
 import { AccountService } from '../../proxy/account/account.service';
@ -26,7 +26,10 @@ export class ForgotPasswordComponent {
    this.inProgress = true;

    this.accountService
-      .sendPasswordResetCode({ email: this.form.get('email').value, appName: 'Angular' })
+      .sendPasswordResetCode({
+        email: this.form.get('email').value,
+        appName: 'Angular',
+      })
      .pipe(finalize(() => (this.inProgress = false)))
      .subscribe(() => {
        this.isEmailSent = true;
--- a/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
+++ b/npm/ng-packs/packages/account/src/lib/components/manage-profile/manage-profile.component.html
@ -1,6 +1,6 @@
 <div id="AbpContentToolbar"></div>

-<div class="card border-0 shadow-sm min-h-400" [abpLoading]="!(profile$ | async)">
+<div class="card border-0 shadow-sm min-h-400" [abpLoading]="!(profile$ | async)?.userName">
  <div class="card-body">
    <div class="row">
      <div class="col-12 col-md-3">
--- a/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts
+++ b/npm/ng-packs/packages/account/src/lib/components/personal-settings/personal-settings.component.ts
@ -17,7 +17,8 @@ export class PersonalSettingsComponent
  implements
    OnInit,
    Account.PersonalSettingsComponentInputs,
-    Account.PersonalSettingsComponentOutputs {
+    Account.PersonalSettingsComponentOutputs
+{
  form: FormGroup;

  inProgress: boolean;
--- a/npm/ng-packs/packages/account/src/lib/models/account.ts
+++ b/npm/ng-packs/packages/account/src/lib/models/account.ts
@ -1,12 +1,10 @@
-import { TemplateRef } from '@angular/core';
+/* eslint-disable @typescript-eslint/no-empty-interface */

 export namespace Account {
-  //tslint:disable
  export interface TenantBoxComponentInputs {}
  export interface TenantBoxComponentOutputs {}
  export interface PersonalSettingsComponentInputs {}
  export interface PersonalSettingsComponentOutputs {}
  export interface ChangePasswordComponentInputs {}
  export interface ChangePasswordComponentOutputs {}
-  // tslint:enable
 }
--- a/npm/ng-packs/packages/account/src/lib/proxy/account/account.service.ts
+++ b/npm/ng-packs/packages/account/src/lib/proxy/account/account.service.ts
@ -10,28 +10,34 @@ export class AccountService {
  apiName = 'AbpAccount';

  register = (input: RegisterDto) =>
-    this.restService.request<any, IdentityUserDto>({
-      method: 'POST',
-      url: '/api/account/register',
-      body: input,
-    },
-    { apiName: this.apiName });
+    this.restService.request<any, IdentityUserDto>(
+      {
+        method: 'POST',
+        url: '/api/account/register',
+        body: input,
+      },
+      { apiName: this.apiName },
+    );

  resetPassword = (input: ResetPasswordDto) =>
-    this.restService.request<any, void>({
-      method: 'POST',
-      url: '/api/account/reset-password',
-      body: input,
-    },
-    { apiName: this.apiName });
+    this.restService.request<any, void>(
+      {
+        method: 'POST',
+        url: '/api/account/reset-password',
+        body: input,
+      },
+      { apiName: this.apiName },
+    );

  sendPasswordResetCode = (input: SendPasswordResetCodeDto) =>
-    this.restService.request<any, void>({
-      method: 'POST',
-      url: '/api/account/send-password-reset-code',
-      body: input,
-    },
-    { apiName: this.apiName });
+    this.restService.request<any, void>(
+      {
+        method: 'POST',
+        url: '/api/account/send-password-reset-code',
+        body: input,
+      },
+      { apiName: this.apiName },
+    );

  constructor(private restService: RestService) {}
 }
--- a/npm/ng-packs/packages/account/src/lib/proxy/account/web/areas/account/controllers/account.service.ts
+++ b/npm/ng-packs/packages/account/src/lib/proxy/account/web/areas/account/controllers/account.service.ts
@ -9,27 +9,33 @@ export class AccountService {
  apiName = 'AbpAccount';

  checkPasswordByLogin = (login: UserLoginInfo) =>
-    this.restService.request<any, AbpLoginResult>({
-      method: 'POST',
-      url: '/api/account/check-password',
-      body: login,
-    },
-    { apiName: this.apiName });
+    this.restService.request<any, AbpLoginResult>(
+      {
+        method: 'POST',
+        url: '/api/account/check-password',
+        body: login,
+      },
+      { apiName: this.apiName },
+    );

  loginByLogin = (login: UserLoginInfo) =>
-    this.restService.request<any, AbpLoginResult>({
-      method: 'POST',
-      url: '/api/account/login',
-      body: login,
-    },
-    { apiName: this.apiName });
+    this.restService.request<any, AbpLoginResult>(
+      {
+        method: 'POST',
+        url: '/api/account/login',
+        body: login,
+      },
+      { apiName: this.apiName },
+    );

  logout = () =>
-    this.restService.request<any, void>({
-      method: 'GET',
-      url: '/api/account/logout',
-    },
-    { apiName: this.apiName });
+    this.restService.request<any, void>(
+      {
+        method: 'GET',
+        url: '/api/account/logout',
+      },
+      { apiName: this.apiName },
+    );

  constructor(private restService: RestService) {}
 }
--- a/npm/ng-packs/packages/account/src/test-setup.ts
+++ b/npm/ng-packs/packages/account/src/test-setup.ts
@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';
--- a/npm/ng-packs/packages/account/tsconfig.json
+++ b/npm/ng-packs/packages/account/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
--- a/npm/ng-packs/packages/account/tsconfig.lib.json
+++ b/npm/ng-packs/packages/account/tsconfig.lib.json
@ -1,19 +1,14 @@
 {
-  "extends": "../../tsconfig.prod.json",
+  "extends": "./tsconfig.json",
  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
+    "outDir": "../../dist/out-tsc",
    "target": "es2015",
    "declaration": true,
+    "declarationMap": true,
    "inlineSources": true,
    "types": [],
    "lib": ["dom", "es2018"]
  },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true,
-    "enableResourceInlining": true
-  },
-  "exclude": ["src/test.ts", "**/*.spec.ts"]
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
+  "include": ["**/*.ts"]
 }
--- a/npm/ng-packs/packages/account/tsconfig.lib.prod.json
+++ b/npm/ng-packs/packages/account/tsconfig.lib.prod.json
@ -1,6 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
  "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial",
+    "enableIvy": true
  }
-}
+}
--- a/npm/ng-packs/packages/account/tsconfig.spec.json
+++ b/npm/ng-packs/packages/account/tsconfig.spec.json
@ -1,11 +1,11 @@
 {
-  "extends": "../../tsconfig.prod.json",
+  "extends": "./tsconfig.json",
  "compilerOptions": {
-    "emitDecoratorMetadata": true,
-    "esModuleInterop": true,
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "esModuleInterop": true
  },
+  "files": ["src/test-setup.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]
 }
--- a/npm/ng-packs/packages/account/tslint.json
+++ b/npm/ng-packs/packages/account/tslint.json
@ -1,17 +0,0 @@
-{
-  "extends": "../../tslint.json",
-  "rules": {
-    "directive-selector": [
-      true,
-      "attribute",
-      "abp",
-      "camelCase"
-    ],
-    "component-selector": [
-      true,
-      "element",
-      "abp",
-      "kebab-case"
-    ]
-  }
-}
--- a/npm/ng-packs/packages/components/.eslintrc.json
+++ b/npm/ng-packs/packages/components/.eslintrc.json
@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "abp",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "abp",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
--- a/npm/ng-packs/packages/components/jest.config.js
+++ b/npm/ng-packs/packages/components/jest.config.js
@ -1,6 +1,20 @@
-const jestConfig = require('../../jest.config');
-
 module.exports = {
-  ...jestConfig,
-  name: 'components',
+  displayName: 'components',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: '../../coverage/packages/components',
+  transform: {
+    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
 };
--- a/npm/ng-packs/packages/components/ng-package.json
+++ b/npm/ng-packs/packages/components/ng-package.json
@ -1,7 +1,6 @@
 {
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/components",
-  "assets": ["./styles/**/*"],
+  "dest": "../../dist/packages/components",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
--- a/npm/ng-packs/packages/components/ngcc.config.js
+++ b/npm/ng-packs/packages/components/ngcc.config.js
@ -1,8 +0,0 @@
-module.exports = {
-  entryPoints: {
-    '.': {},
-    './tree': {},
-    './page': {},
-    './dist': { ignore: true },
-  },
-};
--- a/npm/ng-packs/packages/components/package.json
+++ b/npm/ng-packs/packages/components/package.json
@ -1,6 +1,6 @@
 {
  "name": "@abp/ng.components",
-  "version": "4.4.0-rc.2",
+  "version": "4.4.0",
  "homepage": "https://abp.io",
  "repository": {
    "type": "git",
--- a/npm/ng-packs/packages/components/page/ng-package.json
+++ b/npm/ng-packs/packages/components/page/ng-package.json
@ -1,6 +1,6 @@
 {
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/components/page",
+  "dest": "../../../dist/packages/components/page",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
--- a/npm/ng-packs/packages/components/page/src/page-parts.component.ts
+++ b/npm/ng-packs/packages/components/page/src/page-parts.component.ts
@ -8,27 +8,21 @@ export enum PageParts {

@Component({
  selector: 'abp-page-title-container',
-  template: `
-    <ng-content></ng-content>
-  `,
+  template: ` <ng-content></ng-content> `,
  encapsulation: ViewEncapsulation.None,
 })
 export class PageTitleContainerComponent {}

@Component({
  selector: 'abp-page-breadcrumb-container',
-  template: `
-    <ng-content></ng-content>
-  `,
+  template: ` <ng-content></ng-content> `,
  encapsulation: ViewEncapsulation.None,
 })
 export class PageBreadcrumbContainerComponent {}

@Component({
  selector: 'abp-page-toolbar-container',
-  template: `
-    <ng-content></ng-content>
-  `,
+  template: ` <ng-content></ng-content> `,
  encapsulation: ViewEncapsulation.None,
 })
 export class PageToolbarContainerComponent {}
--- a/npm/ng-packs/packages/components/page/src/page.module.ts
+++ b/npm/ng-packs/packages/components/page/src/page.module.ts
@ -1,15 +1,15 @@
-import { NgModule } from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { UiExtensionsModule } from '@abp/ng.theme.shared/extensions';
-import { ThemeSharedModule } from '@abp/ng.theme.shared';
 import { CoreModule } from '@abp/ng.core';
-import { PageComponent } from './page.component';
+import { ThemeSharedModule } from '@abp/ng.theme.shared';
+import { UiExtensionsModule } from '@abp/ng.theme.shared/extensions';
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+import { PagePartDirective } from './page-part.directive';
 import {
-  PageTitleContainerComponent,
  PageBreadcrumbContainerComponent,
+  PageTitleContainerComponent,
  PageToolbarContainerComponent,
 } from './page-parts.component';
-import { PagePartDirective } from './page-part.directive';
+import { PageComponent } from './page.component';

 const exportedDeclarations = [
  PageComponent,
@ -22,6 +22,6 @@ const exportedDeclarations = [
@NgModule({
  declarations: [...exportedDeclarations],
  imports: [CommonModule, UiExtensionsModule, CoreModule, ThemeSharedModule],
-  exports: [...exportedDeclarations],
+  exports: [...exportedDeclarations, UiExtensionsModule],
 })
 export class PageModule {}
--- a/npm/ng-packs/packages/components/src/test-setup.ts
+++ b/npm/ng-packs/packages/components/src/test-setup.ts
@ -0,0 +1 @@
+import 'jest-preset-angular/setup-jest';
--- a/npm/ng-packs/packages/components/tree/ng-package.json
+++ b/npm/ng-packs/packages/components/tree/ng-package.json
@ -1,6 +1,6 @@
 {
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../../dist/components/tree",
+  "dest": "../../../dist/packages/components/tree",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
--- a/npm/ng-packs/packages/components/tsconfig.json
+++ b/npm/ng-packs/packages/components/tsconfig.json
@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ]
+}
--- a/npm/ng-packs/packages/components/tsconfig.lib.json
+++ b/npm/ng-packs/packages/components/tsconfig.lib.json
@ -1,19 +1,14 @@
 {
-  "extends": "../../tsconfig.prod.json",
+  "extends": "./tsconfig.json",
  "compilerOptions": {
-    "outDir": "../../out-tsc/lib",
+    "outDir": "../../dist/out-tsc",
    "target": "es2015",
    "declaration": true,
+    "declarationMap": true,
    "inlineSources": true,
    "types": [],
    "lib": ["dom", "es2018"]
  },
-  "angularCompilerOptions": {
-    "skipTemplateCodegen": true,
-    "strictMetadataEmit": true,
-    "fullTemplateTypeCheck": true,
-    "strictInjectionParameters": true,
-    "enableResourceInlining": true
-  },
-  "exclude": ["src/test.ts", "**/*.spec.ts"]
+  "exclude": ["src/test-setup.ts", "**/*.spec.ts"],
+  "include": ["**/*.ts"]
 }
--- a/npm/ng-packs/packages/components/tsconfig.lib.prod.json
+++ b/npm/ng-packs/packages/components/tsconfig.lib.prod.json
@ -1,6 +1,11 @@
+/* To learn more about this file see: https://angular.io/config/tsconfig. */
 {
  "extends": "./tsconfig.lib.json",
+  "compilerOptions": {
+    "declarationMap": false
+  },
  "angularCompilerOptions": {
-    "enableIvy": false
+    "compilationMode": "partial",
+    "enableIvy": true
  }
-}
+}
--- a/npm/ng-packs/packages/components/tsconfig.spec.json
+++ b/npm/ng-packs/packages/components/tsconfig.spec.json
@ -1,11 +1,11 @@
 {
-  "extends": "../../tsconfig.prod.json",
+  "extends": "./tsconfig.json",
  "compilerOptions": {
-    "emitDecoratorMetadata": true,
-    "esModuleInterop": true,
    "outDir": "../../dist/out-tsc",
    "module": "commonjs",
-    "types": ["jest", "node"]
+    "types": ["jest", "node"],
+    "esModuleInterop": true
  },
+  "files": ["src/test-setup.ts"],
  "include": ["**/*.spec.ts", "**/*.d.ts"]
 }
--- a/npm/ng-packs/packages/components/tslint.json
+++ b/npm/ng-packs/packages/components/tslint.json
@ -1,7 +0,0 @@
-{
-  "extends": "../../tslint.json",
-  "rules": {
-    "directive-selector": [true, "attribute", "abp", "camelCase"],
-    "component-selector": [true, "element", "abp", "kebab-case"]
-  }
-}
--- a/npm/ng-packs/packages/core/.eslintrc.json
+++ b/npm/ng-packs/packages/core/.eslintrc.json
@ -0,0 +1,36 @@
+{
+  "extends": ["../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts"],
+      "extends": [
+        "plugin:@nrwl/nx/angular",
+        "plugin:@angular-eslint/template/process-inline-templates"
+      ],
+      "rules": {
+        "@angular-eslint/directive-selector": [
+          "error",
+          {
+            "type": "attribute",
+            "prefix": "abp",
+            "style": "camelCase"
+          }
+        ],
+        "@angular-eslint/component-selector": [
+          "error",
+          {
+            "type": "element",
+            "prefix": "abp",
+            "style": "kebab-case"
+          }
+        ]
+      }
+    },
+    {
+      "files": ["*.html"],
+      "extends": ["plugin:@nrwl/nx/angular-template"],
+      "rules": {}
+    }
+  ]
+}
--- a/npm/ng-packs/packages/core/jest.config.js
+++ b/npm/ng-packs/packages/core/jest.config.js
@ -1,6 +1,20 @@
-const jestConfig = require('../../jest.config');
-
 module.exports = {
-  ...jestConfig,
-  name: 'core',
+  displayName: 'core',
+  preset: '../../jest.preset.js',
+  setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
+  globals: {
+    'ts-jest': {
+      tsconfig: '<rootDir>/tsconfig.spec.json',
+      stringifyContentPathRegex: '\\.(html|svg)$',
+    },
+  },
+  coverageDirectory: '../../coverage/packages/core',
+  transform: {
+    '^.+\\.(ts|js|html)$': 'jest-preset-angular',
+  },
+  snapshotSerializers: [
+    'jest-preset-angular/build/serializers/no-ng-attributes',
+    'jest-preset-angular/build/serializers/ng-snapshot',
+    'jest-preset-angular/build/serializers/html-comment',
+  ],
 };
--- a/npm/ng-packs/packages/core/locale/ng-package.json
+++ b/npm/ng-packs/packages/core/locale/ng-package.json
@ -1,6 +1,6 @@
 {
  "$schema": "../../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/core/locale",
+  "dest": "../../../dist/packages/core/locale",
  "lib": {
    "entryFile": "src/public-api.ts"
  }
--- a/npm/ng-packs/packages/core/ng-package.json
+++ b/npm/ng-packs/packages/core/ng-package.json
@ -1,10 +1,9 @@
 {
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
-  "dest": "../../dist/core",
+  "dest": "../../dist/packages/core",
  "lib": {
    "entryFile": "src/public-api.ts"
  },
-  "deleteDestPath": false,
  "allowedNonPeerDependencies": [
    "@abp/utils",
    "@angular/localize",
--- a/npm/ng-packs/packages/core/package.json
+++ b/npm/ng-packs/packages/core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@abp/ng.core",
-  "version": "4.4.0-rc.2",
+  "version": "4.4.0",
  "homepage": "https://abp.io",
  "repository": {
    "type": "git",
--- a/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts
+++ b/npm/ng-packs/packages/core/src/lib/abstracts/ng-model.component.ts
@ -1,14 +1,13 @@
-import { ControlValueAccessor } from '@angular/forms';
 import { ChangeDetectorRef, Component, Injector, Input } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';

 // Not an abstract class on purpose. Do not change!
-// tslint:disable-next-line: use-component-selector
@Component({ template: '' })
 export class AbstractNgModelComponent<T = any, U = T> implements ControlValueAccessor {
  protected _value: T;
  protected cdRef: ChangeDetectorRef;
-  onChange: (value: T) => {};
-  onTouched: () => {};
+  onChange: (value: T) => void;
+  onTouched: () => void;

  @Input()
  disabled: boolean;
@ -17,14 +16,14 @@ export class AbstractNgModelComponent<T = any, U = T> implements ControlValueAcc
  readonly: boolean;

  @Input()
-  valueFn: (value: U, previousValue?: T) => T = value => (value as any) as T;
+  valueFn: (value: U, previousValue?: T) => T = value => value as any as T;

  @Input()
  valueLimitFn: (value: T, previousValue?: T) => any = value => false;

  @Input()
  set value(value: T) {
-    value = this.valueFn((value as any) as U, this._value);
+    value = this.valueFn(value as any as U, this._value);

    if (this.valueLimitFn(value, this._value) !== false || this.readonly) return;

@ -41,7 +40,6 @@ export class AbstractNgModelComponent<T = any, U = T> implements ControlValueAcc
  }

  constructor(public injector: Injector) {
-    // tslint:disable-next-line: deprecation
    this.cdRef = injector.get(ChangeDetectorRef);
  }

--- a/npm/ng-packs/packages/core/src/lib/components/replaceable-route-container.component.ts
+++ b/npm/ng-packs/packages/core/src/lib/components/replaceable-route-container.component.ts
@ -27,8 +27,9 @@ export class ReplaceableRouteContainerComponent implements OnInit {

  ngOnInit() {
    this.defaultComponent = this.route.snapshot.data.replaceableComponent.defaultComponent;
-    this.componentKey = (this.route.snapshot.data
-      .replaceableComponent as ReplaceableComponents.RouteData).key;
+    this.componentKey = (
+      this.route.snapshot.data.replaceableComponent as ReplaceableComponents.RouteData
+    ).key;

    const component$ = this.replaceableComponents
      .get$(this.componentKey)
--- a/npm/ng-packs/packages/core/src/lib/components/router-outlet.component.ts
+++ b/npm/ng-packs/packages/core/src/lib/components/router-outlet.component.ts
@ -2,8 +2,6 @@ import { Component } from '@angular/core';

@Component({
  selector: 'abp-router-outlet',
-  template: `
-    <router-outlet></router-outlet>
-  `,
+  template: ` <router-outlet></router-outlet> `,
 })
 export class RouterOutletComponent {}
--- a/npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/autofocus.directive.ts
@ -1,8 +1,8 @@
-import { Directive, ElementRef, Input, AfterViewInit } from '@angular/core';
+import { AfterViewInit, Directive, ElementRef, Input } from '@angular/core';

@Directive({
-  // tslint:disable-next-line: directive-selector
-  selector: '[autofocus]'
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[autofocus]',
 })
 export class AutofocusDirective implements AfterViewInit {
  @Input('autofocus')
--- a/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/debounce.directive.ts
@ -4,7 +4,7 @@ import { debounceTime } from 'rxjs/operators';
 import { SubscriptionService } from '../services/subscription.service';

@Directive({
-  // tslint:disable-next-line: directive-selector
+  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: '[input.debounce]',
  providers: [SubscriptionService],
 })
--- a/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts
+++ b/npm/ng-packs/packages/core/src/lib/directives/ellipsis.directive.ts
@ -1,4 +1,11 @@
-import { AfterViewInit, ChangeDetectorRef, Directive, ElementRef, HostBinding, Input } from '@angular/core';
+import {
+  AfterViewInit,
+  ChangeDetectorRef,
+  Directive,
+  ElementRef,
+  HostBinding,
+  Input,
+} from '@angular/core';

@Directive({
  selector: '[abpEllipsis]',
			`@ -0,0 +1 @@`
			`export const getGreeting = () => cy.get('h1');`