Регистрация  |  Вход

Разместил файлы Angular-2 на хостинге не работает http://localhost (json server)

Всем привет!

Разместил проект по Angular 2 на сайте.
Репозиторий проекта на GitHub: https://github.com/freestyle2018/angular-ivan


"scripts": {
"server": "json-server --watch file.json --port 3000",
"start": "concurrently --kill-others \"ng serve\" \"npm run server\""
},

На localhost все прекрасно отрабатывает Json Server.
После выполнения команды "ng build" программа генерирует файлы в папку dist, которые можно залить на сайт.

document.service.ts

getDocument(): Observable<Document[]> {
return this.http.get<Document[]>(`http://localhost:3000/documents`);

}


addDocument(document: Document, max_id, today) {
const body = {id: max_id, name: document.name, text: today, autor: document.autor};
return this.http.post(`http://localhost:3000/documents`, body);
}


deleteDocument(document: Document) {
const body = {id: document.id, name: document.name, text: document.text, autor: document.autor};
return this.http.delete(`http://localhost:3000/documents/`+ document.id);
}


updateDocument(document: Document) {
const body = {id: document.id, name: document.name, text: document.text, autor: document.autor};
return this.http.put(`http://localhost:3000/documents/`+ document.id, body);
}


сам file.json

{
"documents": [
{
"id": 478,
"name": "Букварь вер",
"text": 1517577886502,
"autor": "Сергей Лимонов"
},
{
"id": 498,
"name": "Документ",
"text": 1517577886502,
"autor": "Влада Комкова"
},
{
"id": 501,
"name": "Документ",
"text": 1517577886502,
"autor": "Иван Пономаренко"
},
{
"id": 505,
"name": "Мостовой кран",
"text": 1517765343574,
"autor": "Дмитрий Хрусталев"
}
]
}

----------------------------------
На самом хостинге Get запрос отрабатывает поскольку несколько изменил код:
1.

[{
"id": 478,
"name": "Букварь вер",
"text": 1517577886502,
"autor": "Сергей Лимонов"
},
{
"id": 498,
"name": "Документ",
"text": 1517577886502,
"autor": "Влада Комкова"
},
{
"id": 501,
"name": "Документ",
"text": 1517577886502,
"autor": "Иван Пономаренко"
},
{
"id": 505,
"name": "Мостовой кран",
"text": 1517765343574,
"autor": "Дмитрий Хрусталев"
}]


main.bundle.js

DocumentService.prototype.getDocument = function () {
return this.http.get("file.json");
};


Большая просьба, подскажите, как сделать, чтобы на хостинге отработал Json Server?

Всем привет!

Разместил проект по Angular 2 [URL="http://0a.oberot.tk/"]на сайте[/URL].
Репозиторий проекта на GitHub: [URL="https://github.com/freestyle2018/angular-ivan"]https://github.com/freestyle2018/angular-ivan[/URL]


[code]
"scripts": {
    "server": "json-server --watch file.json --port 3000",
    "start": "concurrently --kill-others \"ng serve\" \"npm run server\""
  },
[/code]

На localhost все прекрасно отрабатывает Json Server. 
После выполнения команды "ng build" программа генерирует файлы в папку dist, которые можно залить на сайт.

document.service.ts
[code]
getDocument(): Observable<Document[]> {
    return this.http.get<Document[]>(`http://localhost:3000/documents`);

  }


  addDocument(document: Document, max_id, today) {
    const body = {id: max_id, name: document.name, text: today, autor: document.autor};
    return this.http.post(`http://localhost:3000/documents`, body);
  }


  deleteDocument(document: Document) {
    const body = {id: document.id, name: document.name, text: document.text, autor: document.autor};
    return this.http.delete(`http://localhost:3000/documents/`+ document.id);
  }


  updateDocument(document: Document) {
    const body = {id: document.id, name: document.name, text: document.text, autor: document.autor};
    return this.http.put(`http://localhost:3000/documents/`+ document.id, body);
  }
[/code]


сам file.json

[code]
{
  "documents": [
    {
      "id": 478,
      "name": "Букварь вер",
      "text": 1517577886502,
      "autor": "Сергей Лимонов"
    },
    {
      "id": 498,
      "name": "Документ",
      "text": 1517577886502,
      "autor": "Влада Комкова"
    },
    {
      "id": 501,
      "name": "Документ",
      "text": 1517577886502,
      "autor": "Иван Пономаренко"
    },
    {
      "id": 505,
      "name": "Мостовой кран",
      "text": 1517765343574,
      "autor": "Дмитрий Хрусталев"
    }
  ]
}
[/code]

----------------------------------
На самом хостинге Get запрос отрабатывает поскольку несколько изменил код:
1.
[code]
[{
      "id": 478,
      "name": "Букварь вер",
      "text": 1517577886502,
      "autor": "Сергей Лимонов"
    },
    {
      "id": 498,
      "name": "Документ",
      "text": 1517577886502,
      "autor": "Влада Комкова"
    },
    {
      "id": 501,
      "name": "Документ",
      "text": 1517577886502,
      "autor": "Иван Пономаренко"
    },
    {
      "id": 505,
      "name": "Мостовой кран",
      "text": 1517765343574,
      "autor": "Дмитрий Хрусталев"
    }]
[/code]


main.bundle.js
[code]
DocumentService.prototype.getDocument = function () {
        return this.http.get("file.json");
    };
[/code]


Большая просьба, подскажите, как сделать, чтобы на хостинге отработал Json Server?

Из вашего описания просто куча уточняющих вопросов возникает.

Во первых почему в исходном коде у вас присутствуют абсолютные пути (http://localhost:3000)

во вторых json-server я так понимаю вот этот https://github.com/typicode/json-server
это отдельная штука (от ангуляра отдельная) поэтому разберитесь сначала с ней и заставьте ее работать.
Все урлы должны работать вручную (get запросы в браузере, остальные типы тестируйте через REST Client например Postman).
Не знаю почему у вас вообще открывается http://0a.oberot.tk/file.json (возможно вы его отдаете простой статикой) но это не json-server отвечает потому что он у вас должен подниматься на порту 3000 судя по вашим настройкам.

В общем разберитесь пока с json-server без ангуляр и свои хостингом (возможно левые порты закрыты). И после того как он заработает, уже начинать работать с ангуляром.

Из вашего описания просто куча уточняющих вопросов возникает.

Во первых почему в исходном коде у вас присутствуют абсолютные пути (http://localhost:3000)

во вторых json-server я так понимаю вот этот https://github.com/typicode/json-server
это отдельная штука (от ангуляра отдельная) поэтому разберитесь сначала с ней и заставьте ее работать. 
Все урлы должны работать вручную (get запросы в браузере, остальные типы тестируйте через REST Client например Postman).
Не знаю почему у вас вообще открывается http://0a.oberot.tk/file.json (возможно вы его отдаете простой статикой) но это не json-server отвечает потому что он у вас должен подниматься на порту 3000 судя по вашим настройкам.

В общем разберитесь пока с json-server без ангуляр и свои хостингом (возможно левые порты закрыты). И после того как он заработает, уже начинать работать с ангуляром.