App.js

var express = require('express');
var path = require('path');
var logger = require('morgan');
var bodyParser = require('body-parser');


var statements = require('./routes/route');
var app = express();



app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ 'extended': 'false' }));
app.use(express.static(path.join(__dirname, 'dist/statement-rater-app')));

app.use('/', express.static(path.join(__dirname, 'statement-rater-app')));
app.use('/api/v1/statements', statements);
//app.use('/images', express.static('images'))

// catch 404 and forward to error handler
app.use(function (req, res, next) {
  //console.log(res);
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handler
app.use(function (err, req, res, next) {
  // set locals, only providing error in development
  console.log(err.message);
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  console.log("this is where it's happening");
  
  // render the error page
  res.status(err.status || 500);
  res.json({ error: err })
});

module.exports = app;

Routing kątowy

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { CompanyListComponent } from './company-list/company-list.component';

const routes: Routes = [
  {
    path: '', 
    component: HomeComponent, 
    //canActivate: [MsalGuard]
  }, 
  {
    path: 'company-list',
    component: CompanyListComponent
  }
  


];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Appcomponent HTML

<mat-toolbar class="mat-elevation-z2">
  <div fxFlex fxLayout="row" fxLayoutAlign="space-between center">
    <span fxFlex class="team-logo"><img src="../assets/images/logo.png" alt="Logo" aria-label="logo" width="100" /> </span>
  </div>
  <span fxFlex></span>
  <div fxFlex = "20">
    <mat-nav-list fxFlex fxLayout="row">
      <a mat-list-item [routerLink]="['/']" routerLinkActive="active" target="_top"> <mat-icon>home</mat-icon> Home</a>
      <a mat-list-item [routerLink]="['company-list']" routerLinkActive="active" target="_top"><mat-icon>list</mat-icon> List</a>
      <a mat-list-item [routerLink]="['logout']" routerLinkActive="active" target="_top"><mat-icon>clear</mat-icon> Logout</a>
    </mat-nav-list>
  </div>
</mat-toolbar>

<router-outlet></router-outlet>

Mam ten węzeł.js i aplikację kątową, która działa dobrze z pojedynczym linkiem (domem). Mogę wszystko zrobić na tym, ale kiedy dodałem kolejny link na HTML, łącze domowe nadal działa, ale company-list pokazuje następujący błąd:

{"error":{"status":404}}

Nie mam pojęcia, co się dzieje i jak naprawić. I Googled i próbowałem rozwiązań znalezionych na Routerlink nie działa i kilka innych miejsc, ale Link nadal pokazuje ten błąd. Co się dzieje?

Aktualizuj

Jak zasugerowałem, dodałem również następujący kod, ale nadal otrzymuję podobny błąd.

 app.all('/*', function (req, res) {
  res.status(200).sendFile(`/` + __dirname );
});

Oto błąd, który otrzymuję:

{"error":{"errno":-4058,"code":"ENOENT","syscall":"stat","path":"C:\\Users\\username\\source\\repos\\statement-rater-appstatement-rater-app","expose":false,"statusCode":404,"status":404}}
0
Kuni 20 październik 2020, 19:44

1 odpowiedź

Najlepsza odpowiedź

To jest takie dziwne i denerwujące. Wszystko, co zajęło, było slash () przed tekstem w routerlink.

<mat-nav-list fxFlex fxLayout="row">
  <a mat-list-item [routerLink]="['/']" routerLinkActive="active" target="_top"> <mat-icon>home</mat-icon> Home</a>
  <a mat-list-item [routerLink]="['/company-list']" routerLinkActive="active" target="_top"><mat-icon>list</mat-icon> List</a>
  <a mat-list-item [routerLink]="['/logout']" routerLinkActive="active" target="_top"><mat-icon>clear</mat-icon> Logout</a>
</mat-nav-list>
0
Kuni 20 październik 2020, 21:27