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 命令来生成构建，但是由于以下错误而失败。

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

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

Answer 2

我可以确认在annotateForClosureCompiler中将false设置为tsconfig.lib.json的问题已为我解决。

构建错误-意外令牌/ JSON在位置0

2 个答案: