时间戳

首页 > 解决方案 > Angular 5 部署在 Windows Plesk 服务器 (GoDaddy) 上找不到 json 文件

json - Angular 5 部署在 Windows Plesk 服务器 (GoDaddy) 上找不到 json 文件

问题描述

在使用命令 ng build --prod 编译我的 Angular 5 代码后，我刚刚从 dist 文件部署了我的站点。

在本地，所有 Json 文件都运行良好，但是在构建和服务器上之后，我没有从 JSON 文件中获取任何内容。在 Chrome 工具中，我得到-

polyfills.a899d0f6ae…486a736.bundle.js:1 GET http://megakyle83.com/assets/json/contactMe.json 404 (Not Found)
main.cd1d757….bundle.js:1 ERROR 
e {headers: t, status: 404, statusText: "Not Found", url: "http://megakyle83.com/assets/json/contactMe.json", ok: false, …}
error
:
"<HTML>
↵&lt;HEAD>
↵&lt;TITLE>404 Not Found</TITLE>
↵&lt;BASE href="/error_docs/"><!--[if lte IE 6]></BASE><![endif]-->
↵&lt;/HEAD>
↵&lt;BODY>
↵&lt;H1>Not Found</H1>
↵The requested document was not found on this server.
↵&lt;P>
↵&lt;HR>
↵&lt;ADDRESS>
↵Web Server at &#109;&#101;&#103;&#97;&#107;&#121;&#108;&#101;&#56;&#51;&#46;&#99;&#111;&#109;
↵&lt;/ADDRESS>
↵&lt;/BODY>
↵&lt;/HTML>
↵

headers
:
t {normalizedNames: Map(0), lazyUpdate: null, lazyInit: ƒ}
message
:
"Http failure response for http://megakyle83.com/assets/json/contactMe.json: 404 Not Found"
name
:
"HttpErrorResponse"
ok
:
false
status
:
404
statusText
:
"Not Found"
url
:
"http://megakyle83.com/assets/json/contactMe.json"
__proto__
:
Object

我将我的 JSON 文件连接到我的组件，使用 -

import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Router } from '@angular/router';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'app-header',
  templateUrl: './header.component.html',
  styleUrls: ['./header.component.css']
})

export class HeaderComponent implements OnInit {
  contactMe: string;
  socialmedia: any;
  linkingPgs: object;

  constructor(private http: HttpClient, private router: Router, public sanitizer: DomSanitizer ) {
    this.sanitizer = sanitizer;
  }

  public ngOnInit(): void
    {

      this.http.get<any>('./assets/json/contactMe.json').subscribe(
        data => {
          this.contactMe = data;
        })

      this.http.get<any>('./assets/json/socialMedia.json').subscribe(
        data => {
          this.socialmedia = data;
        })

      this.http.get<any>('./assets/json/headerInternalLinks.json').subscribe(
        data => {
          this.linkingPgs = data;
        })
    }
}

连接 JSON 文件时我做错了什么吗？

标签： jsonangular

解决方案

在我的应用程序中，我通常不会在开头使用 ./。

例子：

this.http.get<any>('assets/json/contactMe.json')

推荐阅读