如何使用 json ng build angular 以便在 ng build 之后，可以手动替换 json 值以显示不同的结果？

Question

如果不可能，是否有替代 ng build 的方法？问题在于构建 json 值嵌入在 main.js 中，使得以后无法更改 json 值。我想使用 angular 在 HTML 中创建一个文件格式为 json 的报告，可以离线查看。所以稍后当我想更改值时，我只需要更改 json 文件中的值。

Answer 1

一种方法是将您的 JSON 存储在 assets 文件夹中，然后使用 HTTP GET 获取它。然后，当您的应用程序部署时，您只需将 JSON 文件换成另一个文件即可。

存储 json - assets/test.json:

{
  "message": "hello"
}

用 HttpClient 获得 JSON:

@Component({
  selector: 'my-app',
  templateUrl: './my-app.component.html'
})
export class MyAppComponent implements OnInit {

  constructor(private http: HttpClient) {
  }

  ngOnInit() {
    this.http.get('/assets/test.json').subscribe(resp => {
        alert(resp['message']);
    });
  }
}

Here's a stackblitz demonstrating this.

Answer 2

一种方法是将 json 添加到 angular-json 文件中的资产中

"apps": [
{
  "root": "src",
  "outDir": "dist",
  "assets": [
    "assets",
    "favicon.ico",
    "myJson.json",
    "web.config"
  ],

这里假定文件在主文件夹中。如果你把它放在资产文件夹中，你可以尝试用户路径“./assets/myJson.json”，这样build之后，文件会留下来，你可以编辑。

Answer 3

您想创建一个配置文件，将文件添加到 angular.json 中，以便在构建应用程序时将其包含在 dist 文件夹中，然后将几个属性添加到 tsconfig 文件中，以便您的打字稿知道如何导入 json 文件并将其视为模块。

我写了一篇详细的博客 post 向您介绍如何逐步完成它以及它是如何工作的。你可以在这里找到 => https://dev.to/kylerjohnson26/build-your-angular-app-once-deploy-anywhere-5ggk

这将使您可以轻松地与代码中的 json 配置值进行交互，只需将代码导入到您想要使用的任何地方即可。最重要的是，大多数部署工具（如 Octopus）都原生支持 json 配置文件，因此您可以根据要部署到的环境轻松替换值。这是设置配置的最简单方法，这样您就可以 "build once and deploy anywhere".

如何使用 json ng build angular 以便在 ng build 之后，可以手动替换 json 值以显示不同的结果？

How to ng build angular with json so that after ng build, json values can be replaced manually to show different results?

json

offline

angular