Angular 实现类似微服务的效果

本文涉及的产品
注册配置 MSE Nacos/ZooKeeper,118元/月
云原生网关 MSE Higress,422元/月
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
简介: Angular 实现类似微服务的效果

目录结构



8b2fe40561254c64b117732f8ba9a677.png


angular.json配置



18002和80000的内容基本一样只需要修改路径


{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "cli": {
    "analytics": "e8a7327e-c859-44f3-ae0b-fa7963b5417f",
    "defaultCollection": "@ngrx/schematics"
  },
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "18002": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src/18002",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/18002",
            "index": "src/18002/index.html",
            "main": "src/18002/main.ts",
            "polyfills": "src/18002/polyfills.ts",
            "tsConfig": "tsconfig.18002.json",
            "assets": [
              "src/18002/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "node_modules/ng-zorro-antd/ng-zorro-antd.min.css",
              "src/18002/assets/css/mobile.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/18002/environments/environment.ts",
                  "with": "src/18002/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "18002:build:production"
            },
            "development": {
              "browserTarget": "18002:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "18002:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "scripts": []
          }
        }
      }
    },
    "80000": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:application": {
          "strict": true
        }
      },
      "root": "",
      "sourceRoot": "src/80000",
      "prefix": "app",
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            "outputPath": "dist/80000",
            "index": "src/80000/index.html",
            "main": "src/80000/main.ts",
            "polyfills": "src/80000/polyfills.ts",
            "tsConfig": "tsconfig.80000.json",
            "assets": [
              "src/80000/assets",
              {
                "glob": "**/*",
                "input": "./node_modules/@ant-design/icons-angular/src/inline-svg/",
                "output": "/assets/"
              }
            ],
            "styles": [
              "src/80000/assets/css/default/mobile.scss"
            ],
            "scripts": []
          },
          "configurations": {
            "production": {
              "budgets": [
                {
                  "type": "initial",
                  "maximumWarning": "500kb",
                  "maximumError": "1mb"
                },
                {
                  "type": "anyComponentStyle",
                  "maximumWarning": "2kb",
                  "maximumError": "4kb"
                }
              ],
              "fileReplacements": [
                {
                  "replace": "src/80000/environments/environment.ts",
                  "with": "src/80000/environments/environment.prod.ts"
                }
              ],
              "outputHashing": "all"
            },
            "development": {
              "buildOptimizer": false,
              "optimization": false,
              "vendorChunk": true,
              "extractLicenses": false,
              "sourceMap": true,
              "namedChunks": true
            }
          },
          "defaultConfiguration": "production"
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "configurations": {
            "production": {
              "browserTarget": "80000:build:production"
            },
            "development": {
              "browserTarget": "80000:build:development"
            }
          },
          "defaultConfiguration": "development"
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "80000:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "scripts": []
          }
        }
      }
    }
  },
  "defaultProject": "80000"
}


tsconfig.80000.json配置



多个json文件只需要修改每个project的入口文件路径


/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
    "extends": "./tsconfig.json",
    "compilerOptions": {
        "outDir": "./out-tsc/app",
        "types": []
    },
    "files": [
        "src/80000/main.ts",
        "src/80000/polyfills.ts"
    ],
    "include": [
        "src/**/*.d.ts"
    ]
}


相关文章
|
缓存 开发框架 前端开发
SpringCloud微服务实战——搭建企业级开发框架(四十一):扩展JustAuth+SpringSecurity+Vue实现多租户系统微信扫码、钉钉扫码等第三方登录
  如果我们自己的系统需要调用第三方登录,那么我们就需要实现单点登录客户端,然后跟需要对接的平台调试登录SDK。JustAuth是第三方授权登录的工具类库,对接了国外内数十家第三方登录的SDK,我们在需要实现第三方登录时,只需要集成JustAuth工具包,然后配置即可实现第三方登录,省去了需要对接不同SDK的麻烦。   JustAuth官方提供了多种入门指南,集成使用非常方便。但是如果要贴合我们自有开发框架的业务需求,还是需要进行整合优化。下面根据我们的系统需求,从两方面进行整合:一是支持多租户功能,二是和自有系统的用户进行匹配。
3770 56
SpringCloud微服务实战——搭建企业级开发框架(四十一):扩展JustAuth+SpringSecurity+Vue实现多租户系统微信扫码、钉钉扫码等第三方登录
|
SQL Java 关系型数据库
【微服务 31】超细的Spring Cloud 整合Seata实现分布式事务(排坑版)
【微服务 31】超细的Spring Cloud 整合Seata实现分布式事务(排坑版)
1582 0
【微服务 31】超细的Spring Cloud 整合Seata实现分布式事务(排坑版)
|
NoSQL Java Redis
微服务 Spring Boot 整合Redis分布式锁 实现优惠卷秒杀 一人一单
高并发集群模式下,秒杀出现问题,如何解决,Redis 分布式锁来搞定!
316 0
微服务 Spring Boot 整合Redis分布式锁 实现优惠卷秒杀 一人一单
|
运维 Kubernetes Devops
通过云效CI/CD实现微服务全链路灰度
在发布过程中,为了产品整体稳定性,我们总是希望能够用小部分特定流量来验证下新版本应用是否能正常工作。 即使新版本有问题,也能及时发现,控制影响面,保障了整体的稳定性。
通过云效CI/CD实现微服务全链路灰度
|
存储 监控 数据可视化
ELK搭建(一):实现分布式微服务日志监控
本次我们搭建的目标是通过ELK来收集微服务中的日志。本期主要以实操、快速搭建为主进行讲解,部分基础概念不做过多描述,后续会再单独出几期博客说明。更多ELK搭建可以关注本专栏,后续会持续输出。
415 0
ELK搭建(一):实现分布式微服务日志监控
|
消息中间件 SpringCloudAlibaba 监控
【springcloud alibaba】 一条龙服务实现微服务案例(下)
【springcloud alibaba】 一条龙服务实现微服务案例(下)
214 0
【springcloud alibaba】 一条龙服务实现微服务案例(下)
|
存储 SpringCloudAlibaba 负载均衡
【springcloud alibaba】 一条龙服务实现微服务案例(上)
【springcloud alibaba】 一条龙服务实现微服务案例
283 0
【springcloud alibaba】 一条龙服务实现微服务案例(上)
|
运维 Kubernetes Devops
通过云效 CI/CD 实现微服务全链路灰度
在微服务治理架构中,MSE 全链路灰度提供了虚拟泳道能力,极大的方便了测试、发布时的快速验证,能够帮助 Devops 同学减少保障半径、提升线上稳定性。同时,阿里云微服务引擎(MSE)也能给您带来全生命周期的、全方位的微服务治理、流量防护能力,保障您的线上稳定性,提升开发、运维效率。
通过云效 CI/CD 实现微服务全链路灰度
|
NoSQL Java 数据库
微服务架构与SOA架构模式实现区别|学习笔记
快速学习微服务架构与SOA架构模式实现区别
136 0
|
负载均衡 Cloud Native Java
【云原生&微服务三】SpringCloud之Ribbon是这样实现负载均衡的(源码剖析@LoadBalanced原理)
【云原生&微服务三】SpringCloud之Ribbon是这样实现负载均衡的(源码剖析@LoadBalanced原理)
259 0
【云原生&微服务三】SpringCloud之Ribbon是这样实现负载均衡的(源码剖析@LoadBalanced原理)