angular - изменение данных в папке активов сборки - PullRequest
Новая
       15

angular - изменение данных в папке активов сборки

0 голосов
/ 22 марта 2019

Я хочу, чтобы мое угловое приложение работало автономно без сервера.

В папке активов находятся изображения, звуковые файлы и т. Д. И один game.json файл, содержащий бизнес-данные для приложения (на сервере эти данные будут храниться в БДили будет вызван через Rest).

Все работает довольно хорошо.Используя 'ng build', я могу создать полную сборку, которую можно запустить, открыв index.html в моем файловом менеджере OS без http-сервера.

Проблема в том, что я не могу изменить содержимое game.json после сборки, потому что она, похоже, каким-то образом включена в сборку.Изменения игнорируются, оно замораживает содержимое в том состоянии, в котором оно было скомпилировано.

Поскольку я буду запускать приложение только локально, я прочитаю свои данные следующим образом:

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 полностью игнорируются.

Есть ли способ сделать этот файл "изменяемым", чтобы я мог изменить его в папке активов сборки?

1 Ответ

1 голос
/ 22 марта 2019

Вы можете получить данные из папки ресурсов, как показано ниже, и вы также можете изменить время выполнения. 

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 изменений: 

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]
})
...