Ошибка получения запроса 404 в приложении Angular 5

Question

Я новичок в Angular. Я создаю демонстрационное приложение для видеоплеера после серии YouTube, но я поражен тем, что не могу получить данные для своего запроса на получение. Я использую Angular 5.2.10. Ниже приведены мои файлы и код:

• server.js:

    const express = require('express');
    const bodyParser = require('body-parser');
    const path = require('path');
    const api = require('./server/routes/api');
    const port = 3000;
    const app = express();

    app.use(express.static(path.join(__dirname,'dist')));
    app.use(bodyParser.urlencoded({extended:true}));
    app.use(bodyParser.json());
    app.use('/api',api);

    app.get('*',(req,res)=>{
        res.sendFile(path.join(__dirname,'dist/index.html'));
    });

    app.listen(port,function(){
        console.log("server running on localhost"+port);
    });

• api.js:

        const express = require('express');
        const router = express.Router();
        const mongoose = require('mongoose');
        const Video = require('../models/video');
        const
    db="mongodb://usersubhash:subhashpwd@ds217350.mlab.com:17350/videoplayer";
        mongoose.Promise = global.Promise;
        mongoose.connect(db,function(err){
            if(err){
                console.log("Error!"+err);
            }
        });
        router.get('/videos',function(req,res){
            //res.send('api works');
            Video.find({}).exec(function(err,videos){
                if(err){
                    console.log("error retrieving videos");
                }else{
                    res.json(videos);
                }
            });
        });
        module.exports = router;

• video.js:

    const mongoose = require('mongoose');
    const Schema = mongoose.Schema;
    const videoSchema = new Schema({
        title:String,
        url:String,
        description:String
    });

    module.exports = mongoose.model('video',videoSchema,'videos');

• video.ts:

    export class Video {
        _id:string;
        title:string;
        url:string;
        description:string
    }

• environment.ts

export const environment = {
  production: false,
  apiUrl: 'http://localhost:3000'
};

• video.service.ts: (где у меня есть метод getVideos ())

    import { Injectable } from '@angular/core';
    import {Http,Response} from '@angular/http';
    import 'rxjs/add/operator/map';
    @Injectable()
    export class VideoService {

      constructor(private _http:Http) { }
      private _getUrl = `${environment.apiUrl}/api/videos`;
      getVideos(){
        return this._http.get(this._getUrl).map((response:Response)=> response.json());
      }
    }

• videoCenter.component.ts: (где я подписываюсь на метод getVideos ()):

    import { Component, OnInit } from '@angular/core';
        import {Video} from '../video';
        import { VideoService } from '../video.service';
        @Component({
          selector: 'app-video-center',
          templateUrl: './video-center.component.html',
          styleUrls: ['./video-center.component.css'],
          providers:[VideoService]//,Http,HttpClientModule
        })
        export class VideoCenterComponent implements OnInit {
          myAllVideos:Array;//here I want to put my get Request Data
          constructor(private _videoService:VideoService) { }

          selectedVideo:Video;

          onSelectVideo (video:any){
            this.selectedVideo=video;
          }

          ngOnInit() {
            this._videoService.getVideos().subscribe(result => this.myAllVideos = result);
          }

        }

Когда я запускаю

<code>node server.js</code>

в терминале VSCode, тогда в приложении POSTMAN я могу получить все записи, запросив GET в "localhost: 3000 / api / videos". Но в моем приложении я не могу загрузить данные, которые работают в 4200 порт. Когда я нажимаю кнопку, которая загружает video-center.component.ts, getVideos () запускается в ngOnInit (), но выдает эту ошибку:

Answer 1

Ваш скриншот, показывающий ошибку, имеет следующий URL:

http://localhost:4200/api/videos

Но ваш server.js говорит:

const port = 3000;

Итак, ваш сервер работает на порту3000, а не 4200. Порт 4200 обычно используется Angular.

Поэтому вам нужно изменить свой getUrl:

private _getUrl = "http://localhost:3000/api/videos";

Вместо жесткого кода, я предлагаю вам прочитать о том, какнастройте файл environment и поместите часть хоста "http://localhost:3000" в файл среды и прочитайте его оттуда. Тогда ваш код может быть:

private _getUrl = `${environment.apiUrl}/api/videos`;

NOTE

Просто для ясности - хотя Angular запускается на клиенте, это приложение, которое должно запускаться откуда-то. Например, в производственной ситуации у вас может быть это:

https://app.mydomain.com <- пользователи посещают это, и браузер запускает ваше угловое приложение </p>

https://api.mydomain.com <- ваше угловое приложение получит данные отсюда </p>

В производственном процессе весьма вероятно, что оба эти URL будут доступны через порт 80. Но так как субдомены отличаютсяарендная плата (api против app) вполне приемлема.

Однако, когда вы работаете локально в режиме разработки, вы не можете запустить две разные вещи (т.е.приложение Angular и приложение Node) по одному и тому же адресу (localhost) с одним и тем же портом.

Поскольку вы запускаете их оба на localhost, они должны иметь разные порты.Поэтому, когда вы пишете:

return this._http.get(this._getUrl)...

, по умолчанию используется сам Angular, localhost: 4200, а не ваш API.Вы должны сказать угловой ваш API находится на порту 3000.