angular - 使用 Angular 构建多个应用程序版本

Question

我想创建一个支持多个版本的 Angular 应用程序：“免费版”和“专业版”。假设以下代码结构

app
├───app.module.ts
├───app.component.ts|html|css
├───free-version
│   ├───feature-1
│   └───feature-2
└───pro-version
    ├───feature-3
    └───feature-4

如何让我的 Angular 项目支持：

• 免费版的构建仅包含功能 1 和功能 2
• 专业版的附加版本，包含免费版的所有功能以及功能 3 和功能 4

标签： angular

Answer 1

您的一种解决方案是创建 2 个文件夹freemium：premium

稍后编辑angular.json并设置 2 个项目，确保为相关项目index.html和main.ts每个项目定义正确的路径。

"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
"version": 1,
"newProjectRoot": "projects",
"projects": {
    "freemium": {
        "root": "src",
        "sourceRoot": "src",
        "projectType": "application",
        "architect": {
            "build": {
                "builder": "@angular-devkit/build-angular:browser",
                "options": {
                    "outputPath": "dist",
                    "index": "src/freemium/index.html",
                    "main": "src/freemium/main.ts",
                    "tsConfig": "src/tsconfig.app.json",
                    "polyfills": "src/polyfills.ts",
                    "assets": [
                        "src/assets",
                        "src/favicon.ico",
                        "src/manifest.json"
                    ],
                    "styles": [
                        "src/styles.scss"
                    ],
                    "scripts": []
                },
                "configurations": {
                    "production": { ... },
                    "staging": { ... }
                }
            }
        }
    },
    "premium": { ... }
    }
},

额外的解决方案是为每个项目使用不同的webpack 。webpack.config.js

请注意，您必须在服务器端处理授权层，而不是假设客户端保护足够好。

对您来说最好的解决方案是结合角度路由保护和服务器端授权。