Angular 7 找不到文件，尽管文件在所有文件夹中

Question

我在 Angular 7 中启动了两个新的 angular 应用程序，我一直运行遇到找不到任何文件的问题。在一个应用程序中，我尝试使用图像，在另一个应用程序中，我尝试通过 http 调用访问 json 文件。

我点击了 json 文件的路径（原为 http://localhost:4200/questions.json），但浏览器并没有跟随 url，而是转到了 http://localhost:4200。我怀疑这可能是问题所在。

我的想法是否正确？ Angular 7 中是否有我可以更改的设置，以便我可以在本地主机中加载图像和 json 文件？我在 Whosebug 上读到它可能是由某人导入 HttpClientInMemoryWebApiModule 引起的，但我没有在任何地方使用它。

如果有人想查看 http 调用的代码：

在应用组件中：

this.questionsServiceService.getQuestions()
 .subscribe(
 response => console.log(response),
 err => console.log(err)
 )

服务：

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

@Injectable({
  providedIn: 'root'
})
export class QuestionsServiceService {
  constructor(private http:HttpClient) {}

  getQuestions(){
    return this.http.get('questions.json')
  }
}

我已将 questions.json 放入每个可能的文件夹（包括根目录，甚至上面的文件夹）以确保它在某处。我也曾尝试在 ./questions.json 和 app/questions.json 中搜索它，但没有成功。

我在 Angular 2 中制作了一些应用程序并且没有遇到任何这些问题（无论是图像还是 http 调用）。

编辑：我也尝试过在第二个应用程序中从文件中放入图像，这不起作用，但是从互联网添加带有 url 的图像确实有效。

Answer 1

尝试使用从您的 app 文件夹开始的相对路径。 Angular 正在从基本文件夹 (app) 启动 FileRequest，因此请尝试这样的请求：

 this._http.sendGet('./assets/questions.json')

我建议将您要加载或读取的文件放入您的资产文件夹中。

我不是 100% 确定，但我认为当您使用构建命令时，不在资产文件夹下的文件将被忽略，并且仅当您将它们放在文件夹。

Answer 2

实现此目的的方法：

First ：在您的服务中将 GET 方法重写为

getQuestions(){
return this.http.get('./assets/questions.json')

}

原因：angular 中的资产文件夹用于静态文件服务。其余部分被跳过。

第二个 : 只需调用 'REQUIRE'

const content = require('../../questions.json');

注意：如果您使用 AOT 编译器，则必须通过调整 tsconfig.app.json:

添加节点类型定义

"compilerOptions": {
"types": ["node"],
...
},
...

第三个：导入为JSON

import data  from './questions.json';
export class AppComponent  {
json:any = data;
}

Angular 7 找不到文件，尽管文件在所有文件夹中

Angular 7 cannot find files, despite the file being in all folders

http-status-code-404

angular

angular7