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

Question

在我的本地主机上的终端上，我可以看到 npm 说 “404 错误/硬币”

然后在页面上显示 未找到

这些 URL 工作正常

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

但我在这个“硬币”中添加了一个

去那里

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'}

]

索引.html

 <base href="/">

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

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

可能是什么问题呢 ？

更新：显示 Coin 组件

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.ts

const app: Application = express();

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

服务器/coinsRoute.ts

export function coinRoute(req, res) {

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

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

Answer 2

使用useHash:truewithing @NgModule_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