Angular 4 - 路由问题，添加了一条新路由，它看起来像其他路由，但在页面刷新时抛出 404 错误

Question

在我本地主机的终端上，我可以看到 npm 说 " 404 error /coins"

然后在页面上显示 未找到

这些 URLS 工作正常

 http://localhost:8808/events/new
 http://localhost:8808/events

但我在这个 "coins" 中添加了一个

去那里

http://localhost:8808/coins

刷新有问题

navbar.component.html

    <li>
      <a [routerLink]="['/coins']">All Coins</a>
    </li>
    <li>
      <a [routerLink]="['/events']">All Events</a>
    </li>
    <li><a [routerLink]="['/events/new']">Create Event</a></li>

然后routes.ts

export const appRoutes:Routes = [
{ path: 'events/new', component: CreateEventComponent },  // process this first , since we have events/:id
{ path: 'events', component: EventsListComponent },
{ path: 'events/:id', component: EventDetailsComponent },
{ path: 'coins', component: CoinsListComponent },
{ path: '', redirectTo: '/events', pathMatch: 'full'}

]

index.html

 <base href="/">

所以一切正常，直到添加这个硬币...并进行页面刷新，甚至是硬刷新。

这不是 Angular 1 (angularJS ) 这是 100% angular 最新的 4.0 版本 import { Routes } from '@angular/router'

可能是什么问题？

更新：显示硬币组件

import { Component, OnInit } from '@angular/core'
import { CoinService } from './coin.service'

@Component({
    template: `
    <div *ngFor="let coin of coinsList">
     abc
     </div>
    `
})
export class CoinsListComponent implements OnInit {
    coinsList:any[]
    constructor(
        private coinService: CoinService
    ){
    }

    ngOnInit() {
        console.log('oninit coins')
        this.coinsList = this.coinService.getAllCoins()
    }
}

Answer 1

你在服务器端使用什么？快递？如果是这样，您似乎还没有设置

server/server.ts

const app: Application = express();

app.route('/api/coins/').get(coinsRoute);

server/coinsRoute.ts

export function coinRoute(req, res) {

res.status(200).json({ ...
   });
}

并且您在控制台的另一个选项卡中有一个选项卡运行 Express 服务器和应用程序。

Answer 2

在@NgModule中使用useHash:true在app.module.ts

中

RouterModule.forRoot(appRoutes, { useHash: true })

Answer 3

让您的应用程序运行成为节点服务器。我用以下代码修复了。

//server.js

Keep your app running with a node server. I fixed with the following code.

//server.js

   
    'use strict';
    
    var express = require('express');
    var app = express();
    var bodyParser = require('body-parser');
    var logger = require('morgan');
    var port = process.env.PORT || 8000;
    var path = require('path');
    
    
    var environment = process.env.NODE_ENV;
    
    app.use(bodyParser.urlencoded({ extended: true }));
    app.use(bodyParser.json());
    app.use(logger('dev'));
    
    // var filespath = require("path").join(__dirname, "index.html");
    // console.log(filespath);
    
    switch (environment) {
      case 'build':
        console.log('environment')
        app.use(express.static(path.join(__dirname, "/")));
    
      // Any deep link calls should return index.html
      app.use('/*', express.static(path.join(__dirname, "index.html")));
        break;
      default:
        console.log('development');
        app.use(express.static(path.join(__dirname, "/")));
    
      // Any deep link calls should return index.html
      app.use('/*', express.static(path.join(__dirname, "index.html")));
        break;
    }
    
    
    app.listen(port, function() {
      console.log('Express server listening on port ' + port);
      console.log('env = ' + app.get('env') +
        '\n__dirname = ' + __dirname +
        '\nprocess.cwd = ' + process.cwd());
    });

for more you can see my code in git: https://github.com/HelloSofts/hoq-prod

有关更多信息，您可以在 git 中查看我的代码：https://github.com/HelloSofts/hoq-prod

Angular 4 - 路由问题，添加了一条新路由，它看起来像其他路由，但在页面刷新时抛出 404 错误

Angular 4 - Routing issue , added a new route and it looks like others, but on page refresh it throws 404 error

router

angular-routing

routerlink

angular