Angular 8多租戶架構
多租戶是一種架構概念，能夠在單個項目容器中處理多個項目。若是你看看像Nike.com或Mi.com這樣的熱門網站，你會發現基於大陸或國家地區的項目重定向。這篇文章更多關於理解Angular 8項目包配置，使用這個如何利用該項目實現多租戶架構。css
必需的軟件html
NodeJS版本12+
Angular Cli 8+node
建立Angular項目
使用如下命令生成新的Angular代碼庫項目。json
$ ng new angular-multi架構
package.json
Angular 8包文件app
Project File Struture
默認角度項目結構。dom
入門單元測試
新的基於租戶的Struture
將全部文件移至租戶/美國測試
tsconfig.json
刪除的baseUrl下complilerOptions。您將在項目根級別找到它。優化
{
「 compileOnSave 」 ： false ，
「 compilerOptions 」 ： {
「 outDir 」 ： 「 。/ dist / out-tsc 」 ，
「 sourceMap 」 ： 是的，
「 聲明」 ： 虛假，
「 module 」 ： 「 esnext 」 ，
「 moduleResolution 」 ： 「 節點」 ，
「 emitDecoratorMetadata 」 ： 是的，
「 experimentalDecorators 」 ： 是的，
「 importHelpers 」 ： 是的，
「 目標」 ： 「 es2015 」 ，
「 typeRoots 」 ： [
「 node_modules / @ types 」
]
「 lib 」 ： [
「 es2018 」 ，
「 dom 」
]
}
}
tsconfig.app.json
項目配置文件。包括的baseUrl和修改tsconfig.json新的位置路徑。
{
「 extends 」 ： 「 ../../../tsconfig.json 」 ，
「 compilerOptions 」 ： {
「 baseUrl 」 ： 「 。/ 」 ，
「 outDir 」 ： 「 ../ out-tsc / app 」 ，
「 類型」 ： []
}，
「 exclude 」 ： [ 「 test.ts 」 ， 「 * / 。spec.ts 」 ， 「 e2e 」 ]
}
tsconfig.spec.json
單元測試configuratin文件。只需應用與上面相同的更改。
{
「 extends 」 ： 「 ../../../tsconfig.json 」 ，
「 compilerOptions 」 ： {
「 baseUrl 」 ： 「 。/ 」 ，
「 outDir 」 ： 「 ../ out-tsc / spec 」 ，
「 types 」 ： [ 「 jasmine 」 ， 「 node 」 ]
}，
「 文件」 ： [ 「 test.ts 」 ， 「 polyfills.ts 」 ]，
「 include 」 ： [ 「 / 。spec.ts 」 ， 「 / 。d.ts 」 ]
}
E2E - Automation
移動租戶US文件夾下的e2e文件夾。
tsconfig.e2e.json
使用新位置更新配置路徑。
{
「 extends 」 ： 「 ../../../../tsconfig.json 」 ，
「 compilerOptions 」 ： {
「 baseUrl 」 ： 「 。/ 」 ，
「 outDir 」 ： 「 ../ out-tsc / app 」 ，
「 module 」 ： 「 commonjs 」 ，
「 目標」 ： 「 es5 」 ，
「 類型」 ： [
「 茉莉花」 ，
「 jasminewd2 」 ，
「 節點」
]
}
}
angular.json
角度分析器配置文件。將默認項目（src）路徑設置替換爲新租戶（租戶/美國）結構。
{
「 $ schema 」 ： 「 。/ node_modules / @ angular / cli / lib / config / sqma.json 」 ，
「 版本」 ： 1 ，
「 newProjectRoot 」 ： 「 項目」 ，
「 項目」 ： {
「 美國」 ： {
「 root 」 ： 「」 ，
「 sourceRoot 」 ： 「 src 」 ，
「 projectType 」 ： 「 應用程序」 ，
「 prefix 」 ： 「 app 」 ，
「 原理圖」 ： {
「 @ schematics / angular：component 」 ： {
「 風格」 ： 「 scss 」
}
}，
「 建築師」 ： {
「 build 」 ： {
「 builder 」 ： 「 @ angular-devkit / build-angular：browser 」 ，
「 選項」 ： {
「 outputPath 」 ： 「 dist / us 」 ，
「 index 」 ： 「 src / tenants / US / index.html 」 ，
「 main 」 ： 「 src / tenants / US / main.ts 」 ，
「 polyfills 」 ： 「 src / tenants / US / polyfills.ts 」 ，
「 tsConfig 」 ： 「 src / tenants / US / tsconfig.app.json 」 ，
「 資產」 ： [ 「 src / tenants / US / favicon.ico 」 ， 「 src / tenants / US / assets 」 ]，
「 styles 」 ： [ 「 src / tenants / US / styles.scss 」 ]，
「 腳本」 ： []，
「 es5BrowserSupport 」 ： 是的
}，
「 配置」 ： {
「 生產」 ： {
「 fileReplacements 」 ： [
{
「 替換」 ： 「 src / tenants / US / environments / environment.ts 」 ，
「 with 」 ： 「 src / tenants / US / environments / environment.prod.ts 」
}
]
「 優化」 ： 是的，
「 輸出哈希」 ： 「 所有」 ，
「 sourceMap 」 ： false ，
「 extractCss 」 ： 是的，
「 namedChunks 」 ： false ，
「 aot 」 ： 是的，
「 extractLicenses 」 ： 是的，
「 vendorChunk 」 ： false ，
「 buildOptimizer 」 ： 是的，
「 預算」 ： [
{
「 type 」 ： 「 initial 」 ，
「 maximumWarning 」 ： 「 2mb 」 ，
「 maximumError 」 ： 「 5mb 」
}
]
}
}
}，
「 服務」 ： {
「 builder 」 ： 「 @ angular-devkit / build-angular：dev-server 」 ，
「 選項」 ： {
「 browserTarget 」 ： 「 US：build 」
}，
「 配置」 ： {
「 生產」 ： {
「 browserTarget 」 ： 「 美國：構建：生產」
}
}
}，
「 extract-i18n 」 ： {
「 builder 」 ： 「 @ angular-devkit / build-angular：extract-i18n 」 ，
「 選項」 ： {
「 browserTarget 」 ： 「 US：build 」
}
}，
「 測試」 ： {
「 builder 」 ： 「 @ angular-devkit / build-angular：karma 」 ，
「 選項」 ： {
「 main 」 ： 「 src / tenants / US / test.ts 」 ，
「 polyfills 」 ： 「 src / tenants / US / polyfills.ts 」 ，
「 tsConfig 」 ： 「 src / tenants / US / tsconfig.spec.json 」 ，
「 karmaConfig 」 ： 「 src / tenants / US / karma.conf.js 」 ，
「 styles 」 ： [ 「 src / tenants / US / styles.scss 」 ]，
「 腳本」 ： []，
「 資產」 ： [ 「 src / tenants / US / favicon.ico 」 ， 「 src / tenants / US / assets 」 ]
}
}，
「 lint 」 ： {
「 builder 」 ： 「 @ angular-devkit / build-angular：tslint 」 ，
「 選項」 ： {
「 tsConfig 」 ： [
「 src / tenants / US / tsconfig.app.json 」 ，
「 src / tenants / US / tsconfig.spec.json 」
]
「 exclude 」 ： [ 「 / node_modules / 」 ]
}
}
}
}，
「 US-e2e 」 ： {
「 root 」 ： 「 e2e / 」 ，
「 projectType 」 ： 「 應用程序」 ，
「 prefix 」 ： 「」 ，
「 建築師」 ： {
「 e2e 」 ： {
「 builder 」 ： 「 @ angular-devkit / build-angular：protractor 」 ，
「 選項」 ： {
「 protractorConfig 」 ： 「 e2e / protractor.conf.js 」 ，
「 devServerTarget 」 ： 「 美國：發球」
}，
「 配置」 ： {
「 生產」 ： {
「 devServerTarget 」 ： 「 美國：服務：生產」
}
}
}，
「 lint 」 ： {
「 builder 」 ： 「 @ angular-devkit / build-angular：tslint 」 ，
「 選項」 ： {
「 tsConfig 」 ： 「 e2e / tsconfig.e2e.json 」 ，
「 exclude 」 ： [ 「 / node_modules / 」 ]
}
}
}
}
}，
「 defaultProject 」 ： 「 US 」
}
共享或通用爲多個租戶
建立共享文件夾。
tsconfig.app.json
包含共享文件夾的路徑。這樣您就能夠使用@ shared / services / *輕鬆導入共享資源，而不是../../../shared/services。注意：從Angular編譯器進程中排除e2e文件夾。
{
「 extends 」 ： 「 ../../../tsconfig.json 」 ，
「 compilerOptions 」 ： {
「 baseUrl 」 ： 「 。/ 」 ，
「 outDir 」 ： 「 ../ out-tsc / app 」 ，
「 類型」 ： []，
「 路徑」 ： {
「 @ shared / 」 ： [ 「 ../../ shared/ 」 ]
}
}，
「 exclude 」 ： [ 「 test.ts 」 ， 「 * / 。spec.ts 」 ， 「 e2e 」 ]
}
生成共享組件模塊
使用Angular CLI命令爲共享組件生成模塊。
$ ng gm ../shared/shared-components
CREATE src / shared / shared-components / shared-components.module.ts（200 bytes）
徽標組件
在共享組件下生成項目徽標組件。這樣全部其餘租戶均可以重用。
$ ng gc ../shared/shared-components/logo
CREATE src / shared / shared-components / logo / logo.component.scss（0 bytes）
CREATE src / shared / shared-components / logo / logo.component.html（ 23字節）
CREATE src / shared / shared-components / logo / logo.component.spec.ts（614字節）
CREATE src / shared / shared-components / logo / logo.component.ts（262 bytes）
UPDATE src / shared / shared-components / shared-components.module.ts（268 bytes）
shared-components.module.ts
更新探索新生成的組件。
從' @ angular / core ' 導入{ NgModule } ;
從' @ angular / common ' 導入{ CommonModule } ;
從' ./logo/logo.component ' 導入{ LogoComponent } ;
@NgModule（{
聲明： [ LogoComponent ] ，
出口： [ LogoComponent ] ，
進口： [
CommonModule
]
}）
導出 類 SharedComponentsModule { }
多個租戶複製美國租戶文件夾並替換爲UK和IN。
- 1. 雲化多租戶架構
- 2. 多租戶架構初識
- 3. 轉 多租戶SaaS架構
- 4. 關於多租戶架構
- 5. 多租戶（數據層的多租戶）架構相關資料
- 6. 剖析Force.com的多租戶架構（2）- 多租戶的介紹
- 7. 剖析Force.com的多租戶架構（3）- Force.com的多租戶架構（上）
- 8. 剖析Force.com的多租戶架構（4）- Force.com的多租戶架構（下）
- 9. MybatisPlus 多租戶架構(Multi-tenancy)實現
- 10. 如何理解多租戶架構？
- 更多相關文章...
- • Docker 架構 - Docker教程
- • 多對多關聯查詢 - MyBatis教程
- • Java 8 Stream 教程
- • 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
-
每一个你不满意的现在，都有一个你没有努力的曾经。