角度-更改构建资产文件夹中的数据 [英] angular - changing data in assets folder of the build

问题描述

我希望我的有角度的应用程序可以在没有服务器的情况下独立运行.

I want my angular app to work as a Standalone without a server.

在资产文件夹中有图像，声音文件等，以及一个 game.json 文件，其中包含应用程序的业务数据(在服务器上，该数据将存储在数据库中，或者存储在数据库中.通过Rest调用).

In the assets folder are images, sound-files etc. and one game.json file which contains the business data for the application (On a server this data would be stored in a DB or would be called via Rest).

一切正常.通过使用"ng build"，我可以通过在OS(无需HTTP服务器)的文件管理器中打开index.html来创建一个完整的构建.

Everything works quite well. Using 'ng build' I can create the complete build which can be startet by opening the index.html in my OS - file manager without a http-Server.

问题在于，在构建后，我无法更改 game.json 的内容，因为它似乎以某种方式包含在构建中.更改将被忽略，它会将内容冻结为已编译状态.

The problem is that I can't change the content of game.json after the build, because it seems to be included in the build in some way. Changes are ignored, it freezes the content in state it was compiled.

由于我将仅在本地运行该应用程序，因此我以这种方式读取数据:

Since I will run the app only locally I read my data this way:

typings.d.ts:

declare module "*.json" {
   const value: any;
   export default value;
 }

game.service.ts:

import * as data_json from 'assets/data/game.json';

@Injectable()
export class GameService {

  constructor() { }
      loadGames(): Observable<Game> {
        return Observable.of(JSON.parse(JSON.stringify(data_json)));
      }
}

我不使用HTTPClient，因为会遇到CORS问题. 读取数据可以正常工作，但是文件game.json中的更改将被完全忽略.

I don't use HTTPClient because I would run into CORS problems. Reading the data works fine, but changes in the file game.json are ignored completely.

是否有一种方法可以使该文件可修改"，以便可以在内部版本的assets文件夹中对其进行更改?

Is there a way to make this file "modifyable" so I can change it in the assets folder of the build?

推荐答案

您可以从资产文件夹中获取数据，如下所示，并且还可以更改其运行时间.

You can get data from assets folder like shown below and you can also change it run time.

import { Injectable } from "@angular/core";
import { HttpClient } from "@angular/common/http";

@Injectable({
  providedIn: "root"
})
export class GameService {
  private gameData: any;

  constructor(private http: HttpClient) {}

  loadGameData() {
    return this.http
      .get("/assets/data/game.json")
      .toPromise()
      .then(data => {
        this.gameData= data;
      });
  }

  get gameData() {
    if (!this.gameData) {
      throw Error("Game file not loaded!");
    }
    return this.gameData;
  }
}

app.module.ts更改:

app.module.ts changes:

import { NgModule, APP_INITIALIZER } from "@angular/core";
import { GameService } from "./services/GameService.service";

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
    [
      {
        provide: APP_INITIALIZER,
        multi: true,
        deps: [GameService],
        useFactory: (gameService: GameService) => {
          return () => {
            return gameService.loadGameData();
          };
        }
      }
    ]
  ],
  bootstrap: [AppComponent]
})

这篇关于角度-更改构建资产文件夹中的数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！