Question

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

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

我有这种想法吗？ Angular 7中是否可以更改设置，以便可以在本地主机中加载图像和json文件？我已经读过stackoverflow，它可能是由导入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正在从基本文件夹（应用程序）启动FileRequest，因此请尝试以下请求：

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

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

我不确定100％，但是我想知道，当您使用构建命令时，位于资产文件夹下的文件会被忽略，只有将它们放在文件夹中时才会包含在应用程序中。

Answer 2

要实现这一目标，：

第一：在您的服务中，将GET方法重写为

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

}

原因：角度中的资产文件夹用于静态文件投放。休息被跳过。

第二：只需拨打“ 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找不到文件

2 个答案: