Angular 4：使用Async Pipe无法读取JSON文件问题求助

看起来你在开发Async Pipe演示项目时，卡在了从JSON文件加载书籍数据的环节，遇到了404找不到文件的问题。结合你的代码片段和项目结构（虽然看不到截图，但我们可以从常见问题入手），我整理了几个最可能的解决方向：

1. 确认JSON文件的存放位置是否正确 #

Angular默认只会把src/assets目录下的文件当作静态资源打包并提供访问，如果你把书籍JSON放在了src/app或者其他未配置的目录下，开发服务器根本不会把它当作可访问的资源，自然会返回404。

解决办法：

• 把你的书籍JSON文件移到src/assets目录下，比如src/assets/books.json，或者在assets下建一个data子目录存放：src/assets/data/books.json。
• 检查你的项目配置文件（Angular 6+是angular.json，旧版本是.angular-cli.json），确保assets数组包含了你的静态资源目录：

  "assets": [
    "src/favicon.ico",
    "src/assets"
  ]
  

  如果你的JSON放在自定义目录，记得把该目录也加到这个数组里。

2. 修正服务中的请求路径 #

从你的代码片段看，你用的是Angular旧版的Http模块，请求路径的错误是导致404的高频原因。

假设你的服务里获取书籍的方法是这样的：

@Injectable()
export class BookService {
  constructor(private http: Http) {}

  getBooks(): Observable<Book[]> {
    // 这里的路径很可能出问题了！
    return this.http.get('books.json')
      .map((response: Response) => response.json());
  }
}

修正路径：
根据JSON的位置调整http.get的路径，比如文件在src/assets/books.json，路径应该写成：

return this.http.get('./assets/books.json')
  .map((response: Response) => response.json());

注意要用相对路径，不要写绝对路径，否则部署后可能也会出问题。

3. 检查模块导入是否正确 #

确保你在对应的模块（比如AppModule）里导入了HttpModule，否则Http服务无法正常工作：

import { HttpModule } from '@angular/http';

@NgModule({
  imports: [
    // 其他模块比如BrowserModule
    HttpModule
  ],
  providers: [BookService],
  // ...
})
export class AppModule { }

如果你用的是Angular 6及以上版本，更推荐使用HttpClientModule和HttpClient，它会自动帮你解析JSON，代码更简洁：

// 服务里替换导入
import { HttpClient } from '@angular/common/http';

@Injectable()
export class BookService {
  constructor(private http: HttpClient) {}

  getBooks(): Observable<Book[]> {
    return this.http.get<Book[]>('./assets/books.json');
  }
}

// 模块里导入HttpClientModule
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [HttpClientModule],
  // ...
})

4. 清理缓存重启开发服务器 #

有时候Angular的开发服务器会缓存旧的资源，导致你修改了文件位置或路径后，还是返回旧的404响应。这时候可以：

• 停止当前的ng serve服务，重新启动
• 或者用ng serve --no-cache命令启动，禁用缓存

如果这些方法都没解决问题，可以把你的项目文件夹结构细节补充一下，我再帮你排查！

内容的提问来源于stack exchange，提问作者user8079583