Как запустить Angular 2+ на Open Server в режиме разработки?

Question

[Мария]

Пытаюсь через запрос get в Angular (HttpClient) получить информацию из файла .php, но получаю весь файл целиком вместо непосредственно той информации, которую нажно получить.

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  text = 'Test text';
  constructor(private http: HttpClient) { }

  ngOnInit() {
    this.http.get('assets/hello.php').subscribe(data => console.log(data));
  }

Ошибка, которую выдает гугл хром:



Как я понимаю, этто означает, что если запускать приложение через ng serve с консоли, то файлы php не обрабатываются.
Что нужно сделать и как запустить приложение Angular на OpenSever именно в режиме разработки?

Answer 1

[Василий Мажекин]

Создайте в корне приложения файл proxy.config.json.
В нем пропишите примерно так хост реста:

{
  "/api/*": {
    "target":  {
      "host": "moi-host-api.ru",
      "protocol": "https:",
      "port": 443
    },
    "secure": true,
    "changeOrigin": true,
    "logLevel": "debug"
  }

или http на порте 80 ( "secure": false), если ваше апи на http

Далее в файле package.json пропишите:


И запускайте проект не командой ng serve, а npm run dev

Comments

[Мария]

извините, не совсем поняла, а причем здесь апи? и что за хост реста? я просто пытаюсь считать php file, который у меня лежит в проекте

[Василий Мажекин]

А где у вас запущен сервер реста (это и есть этот пхп файл)(физический адрес)? Чтобы ангулярное приложение могло слать к нему запросы запустите ангулярное приложение через прокси.

Так как пхп-сервер и ангулярное приложение запускаются на разных адресах. Как локально у вас можно пхп-файл можно например в браузере посмотреть?

[Мария]

пхп файл у меня лежит в папке с проектов ангулар, т.е. его физический адрес это папка проекта..

Локально в браузере никак не могу пока посмотреть этот файл.

Получается, мне грубо говоря для опен сервера нужно создать новый домен и туда загрузить этот один единственный пхп файл и туда отправлять запрос get из ангуляра? При єтом одновременно должен быть запущен опен сервер и приложение ангуляр (из консоли)?

[Василий Мажекин]

Да если я правильно понимаю что такое опен сервер. То его нужно запустить отдельно и проверить его работу хотя бы у браузере. Или в любом рест клиенте.
Пхп в ангулярном dev сервере (ng serve) работать не будет. Там node.js
Пхп это одно приложение, ангуляр запущенный через ng serve это другое