Angular 角度-更改生成的资产文件夹中的数据

我希望我的angular应用程序作为一个独立的应用程序而不需要服务器

资产文件夹中有图像、声音文件等，还有一个game.json文件，其中包含应用程序的业务数据（在服务器上，这些数据将存储在DB中或通过Rest调用）

一切都很顺利。使用“ng build”，我可以创建完整的构建，可以通过在我的OS文件管理器中打开index.html来启动，而无需http服务器

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

由于我将仅在本地运行应用程序，因此我通过以下方式读取数据：

打字。d.ts:

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

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)));
      }
}

game.service.ts:

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

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)));
      }
}

import*作为“assets/data/game.json”中的数据_json；
@可注射（）
导出类游戏服务{
构造函数（）{}
loadGames（）：可观察{
返回Observable.of（JSON.parse（JSON.stringify（data_JSON））；
}
}

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

---

是否有办法使此文件“可修改”，以便我可以在生成的“资产”文件夹中更改它？

您可以从如下所示的“资产”文件夹中获取数据，也可以在运行时更改它

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

---

为什么不想使用HTTPClient从资产文件夹获取数据？我不认为你会有任何与CORS相关的问题，如果你愿意的话。我尝试过，但我遇到了CORS问题。你可以尝试我下面提到的解决方案。我使用angular 5。因此，注释中没有“Providerdin”属性。我用Injectable标记了服务，并在game.module.ts中添加了提供者部分。我删除了comp中的提供者。->异常：StaticInjectorError（）[InjectionToken应用程序初始值设定项->GameService]：NullInjectorError:没有GameService的提供程序！如果我将服务添加到组件中的提供者部分，它将不起作用。如果在app_初始值设定项代码上方的app module providers中提供游戏服务，它将起作用。我做到了。GameService是您建议的。app.module.ts现在包含app_初始值设定项-提供程序，包括DEP和factory等。使用该服务的是game.module.ts子模块。我必须在公司注册服务吗。还是模块？或者，服务是否可以“从根目录”访问。i、 e.一般来自世界各地？