无法从我的角度库组件中导入 json答案

【问题标题】：Can't import json from my angular library component无法从我的角度库组件中导入 json
【发布时间】：2018-12-21 03:24:47
【问题描述】：

如果你想帮助我检查发生了什么，这里是 Github 中的存储库：https://github.com/sandrocsimas/ngx-material-palette-picker

我正在尝试创建我的第一个角度库。我使用 angular cli 命令生成了代码：

ng new ngx-material-palette-picker-app
ng generate library ngx-material-palette-picker

在组件NgxMaterialPalettePickerComponent我正在导入一个json文件，但是构建抛出以下错误：

projects/ngx-material-palette-picker/src/lib/ngx-material-palette-picker.component.ts(2,31): error TS2307: Cannot find module './palettes.json'.

这是我的组件：

import {Component, OnInit} from '@angular/core';
import * as palettesJSON from './palettes.json';

@Component({
  selector: 'ngx-mpp',
  template: `,
  styles: []
})
export class NgxMaterialPalettePickerComponent implements OnInit {

  constructor() {

  }
}

我在根路径下创建了一个名为types的目录，并将以下代码添加到index.d.ts：

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

我还在主 tsconfig.json 中添加了目录 types 到 typeRoots。

"typeRoots": [
  "node_modules/@types",
  "types"
],

该项目在 Sublime 编辑器中没有显示任何错误，但是当我尝试使用命令 ng build --prod ngx-material-palette-picker 构建项目时，我收到了此问题开头所述的错误。如何解决这个问题？

【问题讨论】：

您解决了吗？我有同样的问题。
@RossRawlins，不，我无法解决。
所以你不能从本地目录导入json文件是假的

标签： angular angular-cli angular-cli-v6

【解决方案1】：

JSON 文件应该放在 Angular 知道搜索的地方（例如“src/assets”）。您应该将 JSON 文件的路径添加到“资产”下的 angular.json 中，如下面的答案所述：Import json file in typescript Angular 5

或者，您可以通过 http 请求获取 JSON 文件的内容。虽然我相信上述方法在那种情况下仍然适用。

【讨论】：

【解决方案2】：

这是如何使用带有 httpClient 的服务的我正在使用动态表单（最终 json 将来自服务器，但现在使用 json 文件）：

@Injectable()
export class QuestionService {

constructor(private httpClient: HttpClient) { }

public getQuestions(clientName: string): Observable<any> {
    return this.httpClient.get(`./assets/${clientName}.json`);
}

}

json file:
{
"search":   [
    {
        "key": "contract",
        "label": "Contract",
        "value": "",
        "required": true,
        "order": 1,
        "type": "text"
    },
    {
        "key": "vendor",
        "label": "Vendor",
        "value": "",
        "required": true,
        "order": 1,
        "type": "text"
    },
    {
        "key": "status",
        "label": "Status",
        "value": "",
        "required": true,
        "order": 1,
        "type": "text"
    },
    {
        "key": "from",
        "label": "From",
        "value": "",
        "required": true,
        "order": 1,
        "type": "text"
    },
    {
        "key": "to",
        "label": "To",
        "value": "",
        "required": true,
        "order": 1,
        "type": "text"

    }
],
"client": {
    "firstName": "harvey",
    "lastName": "2face"
}
}

【讨论】：

【解决方案3】：

您是否使用了编译器选项resolveJsonModule？尝试通过元素compilerOptions 将"resolveJsonModule": true 放入文件tsconfig.app.json。它对我有用。

对于单元测试，请检查文件 tsconfig.spec.json 以了解相同的技巧。

【讨论】：