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這一篇，大家有需要可以看看~