Question

在Angular2中你可以有一个文件夹/ data /和一个json文件，你可以在localhost：4200 / data / something.json访问它。

在Angular4中不再可能。

任何想法如何让它发挥作用？

Answer 1

您可以使用此代码

@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文件。

另见

How to get a json file in angular2 using the Http class

还可以看到路径

的angular-cli的changlog

https://github.com/angular/angular-cli/blob/master/CHANGELOG.md#100-rc4-2017-03-20

Answer 2

当然可能。我们假设这是你的json文件

这是你的代码来调用json

@RequestMapping(value = {"/{act}", "/{act}/"}, method = RequestMethod.GET)
public void getLogout(@PathVariable(value = "act", required = true) String act,
                         ModelMap model,
                        HttpServletRequest request,
                        HttpServletResponse response,
                        HttpSession session) throws IOException, 

ServletException {

if(act.equals("logout")) {

    CacheControl.maxAge(0, TimeUnit.SECONDS);

    Cookie login_auth;

    Cookie[] cookies = request.getCookies();

    if(cookies != null){
        for(Cookie cookie : cookies){

            if(cookie.getName().equals("login_auth")) {
                login_auth = cookie;
                login_auth.setMaxAge(0);

                response.addCookie(login_auth);

               response.sendRedirect(String.format("%s%s", request.getContextPath(), "/login"));
            }

        }
    }

}

}

Answer 3

我遇到了同样的问题，我的Observable Angular服务位于'src / app /'文件夹内，它正在尝试加载本地JSON文件。我试图将JSON文件放在同一个app文件夹中，在一个新的'api'文件夹中，使用各种亲戚/绝对路由，但它没有帮助，我得到404错误。我把它放在'assets'文件夹里的那一刻...... BAM！有效。我想还有更多......

可能是这个链接有帮助...

COMPONENT-RELATIVE PATHS IN ANGULAR

Answer 4

您也可以使用“require”;

let test = require('./test.json');

Answer 5

基于此post，以下是Angular 6+的完整答案：

在angular-cli doc中，可以将json视为资产，并且可以从标准导入中访问json，而无需使用ajax请求。

假设您将json文件添加到“ your-json-dir”目录中：

将“ your-json-dir”添加到angular.json文件中（：

"assets": [ "src/assets", "src/your-json-dir" ]
允许将json模块导入types.d.ts文件，以防止打字稿错误：

declare module "*.json" { const value: any; export default value; }
在控制器/服务/其他任何文件中，只需使用以下相对路径导入文件即可：

import * as myJson from 'your-json-dir/your-json-file.json';

Answer 6

我明白了。

在Angular2中，我有src文件夹下的文件夹。在Angular4中，您必须将它放在根文件夹中。

示例：

Angular2：

root / src / data / file.json

Angular4：

root / data / file.json

Answer 7

您可以在angular.json的Assets标签下添加文件夹位置

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

Angular4：如何访问本地json？

7 个答案: