本地服务器api解析配置文件,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;

})

}

}

复制代码

编写完毕后，文件部署

部署到静态服务器

npm install --global http-server

http-server -c-1 -p 8080 .

复制代码

部署到tomcat

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

复制代码

更多推荐