在 Angular2 中，你可以有一个文件夹 /data/ 和一个 json 文件，你可以在 localhost:4200/data/something.json 访问它。
这在 Angular4 中不再可能。
任何想法如何让它工作？
【问题讨论】：
标签： javascript json angular
我遇到了同样的问题，我的 Observable Angular 服务位于“src/app/”文件夹内，它试图加载本地 JSON 文件。我试图将 JSON 文件放在同一个应用程序文件夹中，在一个新的“api”文件夹中，使用各种亲属/绝对路由，但没有帮助，我得到 404 错误。我把它放在“资产”文件夹中的那一刻，它就起作用了。我想还有更多吗？
也许这个链接有帮助：
【讨论】：
angular-cli.json 中的 assets 数组中指定的所有内容都被复制并提供服务，因此在运行时可用。见github.com/angular/angular-cli/wiki/stories-asset-configuration
您可以在 angular.json 的 Assets 标签下添加文件夹位置
"assets": [
"src/favicon.ico",
"src/assets",
"src/api"
],
【讨论】：
基于此post，这里是 Angular 6+ 的完整答案：
来自angular-cli doc，json 可以被视为资产，可以通过标准导入访问，无需使用 ajax 请求。
假设您将 json 文件添加到“your-json-dir”目录中：
将“your-json-dir”添加到 angular.json 文件中 (:
"assets": [
"src/assets",
"src/your-json-dir"
]
允许将 json 模块导入到 typings.d.ts 文件中以防止打字稿错误：
declare module "*.json" {
const value: any;
export default value;
}
在您的控制器/服务/任何其他文件中，只需使用以下相对路径导入文件：
import * as myJson from 'your-json-dir/your-json-file.json';
【讨论】：
这是您调用 json 的代码
import { Injectable } from '@angular/core';
import { Http, Headers, Response } from '@angular/http';
import { Observable } from 'rxjs';
import 'rxjs/add/operator/map'
@Injectable()
export class YourService {
constructor(private http: Http) { }
getAdvantageData(){
let apiUrl = './assets/data/api/advantage.json';
return this.http.get(apiUrl)
.map( (response: Response) => {
const data = response.json();
return data;
});
}
}
【讨论】：
你也可以使用“require”；
let test = require('./test.json');
【讨论】：
您可以使用此代码
@Injectable()
export class AppServices{
constructor(private http: Http) {
var obj;
this.getJSON().subscribe(data => obj=data, error => console.log(error));
}
public getJSON(): Observable<any> {
return this.http.get("./file.json")
.map((res:any) => res.json())
.catch((error:any) => console.log(error));
}
}
这里file.json 是您的本地json 文件。
请看这里
另见 angular-cli 的 changlog for path
【讨论】：
.map。
我想通了。
在 Angular2 中，我有 src 文件夹下的文件夹。 在 Angular4 中，您必须将它放在根文件夹中。
例子：
Angular2：
root/src/data/file.json
Angular4：
root/data/file.json
【讨论】：