时间戳

首页 > 解决方案 > 如何在 Angular 6+ 上基于 --project 导入脚本？

angular - 如何在 Angular 6+ 上基于 --project 导入脚本？

问题描述

好的，假设我有这样的结构：

/
- clients
-- client-1
--- _script.ts
-- client-2
--- _script.ts

我的 angular.json 是这样的：

...
'projects': {
    "client-1": {...},
    "client-2": {...},
}
...

假设我有相同的代码，但在 2 个 script.ts 文件中的变量值不同，例如：

客户端 1/script.ts：

export const theme = {
  data_url_api: 'https://client-1.com/api',
}

客户端 2/script.ts：

export const theme = {
  data_url_api: 'https://client-2.com/api',
}

如何在我的代码中动态导入和调用此文件，而不强制使用“客户端路径”？当然，遵守--project=client-1我在ng serveor上使用的ng build。

我的愿望是像这样导入它，让我们再说一遍，在“data.service.ts”中：

import { theme } from 'script';

Angular 本身会处理“要导入哪个”。

那么，有没有办法呢？

标签： angular

解决方案

如果您有两个项目，这将是一个“共享”服务/组件/文件...

因此我会这样标记它（例如通过将该文件放在特定的共享文件夹中）这将帮助您（和您的同事）记住，对该文件的每次更改都可能对多个项目产生影响。

对于导入，我使用 tsconfig.json 中的“路径”

{
  "compilerOptions": {
    "baseUrl": "projects",
    "paths": {
      "@project1/*": [
        "myFirstProject/src/app/*"
      ],
      "@project2/*": [
        "mySecondProject/src/app/*"
      ],
      "@shared/*": [
        "shared/src/*"
      ],
    }
  }
}

现在我可以使用

import {something} from @shared/myTheme;

从各地

温暖的问候

编辑：

我的错，错误的解决方案:-)

如果它是相同的服务，但不同的端点，我使用环境变量来改变它。在 angular.json 我用项目特定的 environment.ts 覆盖通用 environment.ts

 ...
 "configurations": {
            "dev": {
              "fileReplacements": [
                {
                  "replace": "projects/environments/environment.ts",
                  "with": "projects/myFirstProject/src/environments/environment.dev.ts"
                }
              ]
            },
...
}

我每个项目和每个分期都有一个环境文件（2 个项目，3 个阶段 => 6 个环境文件）

有了它，我可以根据应用程序并根据登台环境在全球范围内更改内容。

很抱歉造成的误解

温暖的问候

第二次编辑

在它出现问题之前。如果你根据配置替换文件，你不仅要修改“build”部分，还要修改“serve”部分，这样你的环境在使用时也会被使用ng serve

"projects": {
    "myFirstProject": {
      "root": "projects/myFirstProject/",
      "sourceRoot": "projects/myFirstProject/src",
      "projectType": "application",
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
             ...
          },
          "configurations": {
            "dev": {
              "fileReplacements": [
                {
                  "replace": "projects/environments/environment.ts",
                  "with": "projects/myFirstProject/src/environments/environment.dev.ts"
                }
              ]
            },
            "proxy": {
              "fileReplacements": [
                {
                  "replace": "projects/environments/environment.ts",
                  "with": "projects/myFirstProject/src/environments/environment.proxy.ts"
                }
              ]
            },
            "production": {
              "fileReplacements": [
                {
                  "replace": "projects/environments/environment.ts",
                  "with": "projects/myFirstProject/src/environments/environment.prod.ts"
                }
              ]
            }
          }
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "myFirstProject:build:dev"
          },
          "configurations": {
            "dev": {
              "browserTarget": "myFirstProject:build:dev"
            },
            "proxy": {
              "browserTarget": "myFirstProject:build:proxy"
            },
            "production": {
              "browserTarget": "myFirstProject:build:production"
            }
          }
        },

推荐阅读