BUILD ERROR - 在位置0的JSON中出现意外的令牌/

Question

我创建了一个名为ng-common-lib的角度库。在侧库中创建了一个组件，用于从json文件中读取内容。

jsonFile.json

{
    "name" : "Sunil"
}

下面的代码来读取我的组件中的json文件。

import * as jsonFile from '../../../assets/jsonFile.json';
.....
ngOnInit() {
    console.log(jsonFile); 
}

在tsconfig.json下面添加了两行来从json文件中读取数据。

"resolveJsonModule": true,
"esModuleInterop": true,

然后我运行了ng build ng-common-lib命令来生成build，但它失败并出现以下错误。

users-iMac:ng-ui-library user$ ng build ui-components
Building Angular Package
Building entry point '@ui/components'
Compiling TypeScript sources through ngc
Bundling to FESM2015

BUILD ERROR
Unexpected token / in JSON at position 0
SyntaxError: Unexpected token / in JSON at position 0
    at JSON.parse (<anonymous>)
    at Object.transform (/Users/vasu/Desktop/Sunil/Practice/ng-ui-lib/node_modules/rollup-plugin-json/dist/rollup-plugin-json.cjs.js:18:20)
    at /Users/vasu/Desktop/Sunil/Practice/ng-ui-lib/node_modules/rollup/dist/rollup.js:20962:25
    at <anonymous>

请帮忙解决这个问题。

Answer 1

您需要使用http读取json文件内容所以首先您需要创建一个服务来获取json内容

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

@Injectable()
export class JsonSettingService {
  constructor(private http: HttpClient) {
  }

   public getJsonData(): Observable<any> {
    return this.http.get("./assets/jsonFile.json");
  }
}

然后将您的服务注入您的组件

export class MyComponent implements OnInit {
    constructor(
        private jsonSettingService : JsonSettingService  
    ) { }

   ngOnInit(){
       this.jsonSettingService.getJsonData().subscribe(data => {
            console.log(data);
        });
   }
}

如果您需要任何帮助，请告诉我。