无法在 Angular 5 中获取本地 json 文件 - 持续 404 错误

Posted 2023-03-13

【中文标题】无法在 Angular 5 中获取本地 json 文件 - 持续 404 错误

【英文标题】：Unable to get local json file in Angular 5 - persistent 404 error

【发布时间】：2019-07-14 09:50:04

【问题描述】：

我已经阅读了我能找到的所有其他文章或帖子。我一生都无法弄清楚这个简单的任务哪里出了问题。 （特别关注this example。）我一定是在做一些明显愚蠢的事情，但我一直在看这个，我看不到它。

我在 assets/mockData 中有一个名为 isRecognized.json 的 json 文件。我已将 mockData 目录添加到我的 webpack 配置文件中，因此它包含在 /dist 目录中。如果我去 http:localhost:4200/assets/mockData/isRecognized.json 我可以看到这个文件，所以我知道它是可用的。

但是，当我尝试使用 HTTP 客户端检索文件时，无论我尝试什么，它都会抛出 404。

编辑：我使用的是 Webpack，而不是 Angular CLI。

app.component.ts

import  MyService  from './services/my.service';
import  Component, OnInit, Renderer2  from '@angular/core';
import  ActivatedRoute  from '@angular/router';

/*
* Main app component that houses all views.
*/
@Component(
    selector: 'app-comp',
    templateUrl: './app.component.html'
)

export class AppComponent implements OnInit 

    constructor(
        private route: ActivatedRoute, private service: MyService
    ) 

    ngOnInit() 
      this.service.isRecognized();
    

my.service.ts

import  Injectable  from '@angular/core';
import  HttpClient  from '@angular/common/http';
import  Observable  from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';

@Injectable()
export class MyService 

  constructor(private http: HttpClient)  

  isRecognized() 
    this.getJSON('isRecognized').subscribe(data => 
      console.log(data);
    );
  

  getJSON(fileName): Observable<any> 
    return this.http.get('http://localhost:4200/assets/mockData/' + fileName + '.json');
  

我在浏览器控制台中得到的错误是：

AppComponent_Host.ngfactory.js? [sm]:1 ERROR Error: [object Object]
    at viewWrappedDebugError (core.js:9795)
    at callWithDebugContext (core.js:15101)
    at Object.debugCheckAndUpdateView [as checkAndUpdateView] (core.js:14628)
    at ViewRef_.webpackJsonp../node_modules/@angular/core/esm5/core.js.ViewRef_.detectChanges (core.js:11605)
    at core.js:5913
    at Array.forEach (<anonymous>)
    at ApplicationRef.webpackJsonp../node_modules/@angular/core/esm5/core.js.ApplicationRef.tick (core.js:5913)
    at core.js:5746
    at ZoneDelegate.webpackJsonp../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:391)
    at Object.onInvoke (core.js:4756)

如果我调试错误，我可以看到错误的主体是：

【参考方案1】：

终于找到答案了！我在我的 app.module.ts 文件中有这个作为导入：

InMemoryWebApiModule.forRoot(InMemoryDataService,  dataEncapsulation: false )

删除此问题立即解决了问题。

【参考方案2】：

虽然这可能不是您特定问题的直接解决方案，但您应该查看 npm 包 json-server。我在开发和测试客户端时使用它来模拟 API。

json-server npm

它将在端口 3000 上运行一个节点 Web 服务器，并且开箱即用非常容易使用。

请参阅本教程示例以了解如何使用它： Mock api with json-server

可能有更好的例子，不需要设置代理，但应该足够好了。

【参考方案3】：

我建议订阅组件，并从服务返回一个 Observable：

服务：

@Injectable()
export class MyService 

  constructor(private http: HttpClient)  

  isRecognized(fileName): Observable<any> 
    return this.http.get('http://localhost:4200/assets/mockData/' + fileName + '.json');
  

组件：

export class AppComponent implements OnInit 

    constructor(
        private route: ActivatedRoute, private service: MyService
    ) 

    ngOnInit() 
      this.service.isRecognized(fileName)
         .subscribe(data => 
              console.log(data);
         );
    

【讨论】：

不走运，同样的问题。

【参考方案4】：

我在我的应用程序中成功地使用了这样的 URL：

private productUrl = 'api/products/products.json';

注意它没有路径的localhost 部分。

所以试试这样的：

'assets/mockData/' + fileName + '.json'

还要确保您的angular.json 具有资产下列出的路径：

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

注意：我也没有做任何事情来修改我的 webpack 配置。 （但我使用的是 CLI。）

如果你想看一些访问 json 文件的工作代码，我这里有一个例子：

https://stackblitz.com/edit/github-gettingstarted-deborahk

【讨论】：

我多次尝试使用本地路径，但没有成功。

嗯，她确实提供了一个工作示例。也许您可以确定她到底做了哪些不同的事情以及她是如何做到的？

您在示例中的 URL assets/products/products.json，在 ionic 项目中非常适合我。