zoukankan      html  css  js  c++  java
  • Angular4.0踩坑之路:如何成功读取本地json文件

    最近开始学习angular,看到官网上已经发布到4.0的版本了,目前基于4.0版本学习。

    昨天在使用Angular的过程中遇到了一个问题,为了解决它耗费了不少时间,在这里记录一下,也希望能够帮助遇到同样问题的朋友。

    项目中有些数据需要打桩,这些数据写在本地json中,我需要通过http请求读取本地json文件,可是一直都不成功,浏览器一直报404错误,也就是找不到该文件。

    文件位于src同级目录mock-data下:

    service中部分代码:

    getRequest(){
        return  this.http.get("mock-data/datas.json")
                    .map((res:Response) => res.json());
    }        

     浏览器报错:

    我觉得很奇怪,文件明明是存在的,可是浏览器报错......我看了大漠穷秋老师的NiceFish项目,NiceFish项目里也是通过http.get()请求本地json文件的,运行起来是可以成功的。

    经过一番搜索,我在Stack Overflow上看到了这个求助,最后提问者自己给出了一个解决办法,就是将json文件放入项目中的assets文件夹,就可以请求到了!我试了一下,确实可以。

    getRequest(){
        return  this.http.get("assets/mock-data/datas.json")
                    .map((res:Response) => res.json());
    } 

    但是我的心中还是有一个疑问,为什么NiceFish项目中的json文件不需要放入assets文件夹中就可以正常请求到呢?我觉得可能是我的项目和NiceFish项目配置上可能有些不同,经过一番对比我在.angular-cli.json文件中发现了这个配置项:

     

    "assets"这个属性的作用是记录资源文件夹,之所以可以请求到“assets”文件夹,应该也是在这里配置过的缘故。我在自己项目的.angular-cli.json文件中的该属性中加入“mock-data”文件夹,问题解决!

    关于.angular-cli.json文件中各配置项的含义,网上有很多文章给出了详细的说明,这里不再赘述。我参考的是http://www.cnblogs.com/qingming/p/6961548.html这一篇,大家有需要可以看看~

  • 相关阅读:
    java连接oracle数据库调用存储过程实现分页查询(emp为例)
    git 记录
    Angular记录
    “nth-child”选择器的优先级高于伪类选择器“:hover”
    Angular获取父组件传值-set,get
    Vue3.0路由 -- 学习笔记
    Vue学习笔记
    java-关于List删除元素的出错问题
    CSS选择器-复合选择器
    Angular 路由返回
  • 原文地址:https://www.cnblogs.com/lillian0525/p/7344600.html
Copyright © 2011-2022 走看看