Angular 本地json文件读取的2种方法

常有这样的需求，一个html，然后加载json文件，替代调用api,展示日志内容。 默认当前用户已安装angular-cli，就不具体的介绍环境安装了。

环境安装

mac环境下

brew install nvm 
nvm install v12.16.1
npm i -g @angular/cli

项目创建

ng new angular-demo

json文件

json文件，需要放置在assets目录中，否则解析不到，也不会随构建打包到dist中

// assets/data.json 
[	{		"letter": "A",		"frequency": 0.08167	},	{		"letter": "B",		"frequency": 0.01492	},	{		"letter": "C",		"frequency": 0.02782	},	{		"letter": "D",		"frequency": 0.04253	},	{		"letter": "E",		"frequency": 0.12702	},]

import方式读取json

tsconfig.json配置文件中修改配置

// tsconfig.json compilerOptions 配置 json ，否在json依赖编译失败
 "resolveJsonModule": true, 

typescript2.9+ import

需要放置code位于constructor中

import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';
import * as data from '../assets/data.json';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  products:any;

  constructor(private http: HttpClient) {
    const res  = (data as any).default;
    console.log(res);
  }
}

Angular HttpClient 读取json

// app.module.ts 别忘了imports HttpClientModule 
import { HttpClient } from '@angular/common/http';
import { Component } from '@angular/core';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  products:any;

  constructor(private http: HttpClient) {
    this.http.get('assets/data.json').subscribe(data =>{
      console.log('data....',data);
      this.products = data;
    })
  }
}

编写完毕后，文件部署

部署到静态服务器

譬如http-server

npm install --global http-server
http-server -c-1 -p 8080 . 

部署到tomcat

tomcat项目部署，需要注意index.html中base,非/

<base href="./" > 

更多推荐

Github Action你值得了解的~

原生js开发中存在的点滴坑

20个你值得了解的Angular开源项目