CODEWITHSUNDEEP
node.jsangularroutes
Jason Tran
Jason Tran

Reputation: 153

node with angular 2, getting get 404 error when you type in the route in url bar

When using node with angular 2, there is odd thing that happens that i would like to be fix. Basically if I were to type in the route in the url such as localhost:3000/about in the browser url bar. I get Cannot GET /home. However when click on the nav bar that i made that has the same link /about. it work just fine. I know it a problem with node because originally, I was using dev-server this error didn't happen with angular 2.

angular 2 routes

    const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent},
  { path: 'private', component: PrivateComponent},
  { path: 'title', component: TitleComponent},
  { path: 'shop', component: WelcomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'login', component: LoginComponent},
  { path: 'register', component: RegisterComponent}
];

navbar

<nav class="navbar navbar-fixed-top navbar-dark bg-inverse">
  <div class="container">
    <button class="navbar-toggler hidden-sm-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
      &#9776;
    </button>
    <div class="collapse navbar-toggleable-xs" id="exCollapsingNavbar">
      <a class="navbar-brand" [routerLink]="['/home']">Vietnam Films</a>

      <div class="nav navbar-nav">
        <a class="nav-item nav-link active" [routerLink]="['/home']">
          Home <span class="sr-only">(current)</span>
        </a>
        <a class="nav-item nav-link"  [routerLink]="['/about']">About</a>
        <a class="nav-item nav-link"  [routerLink]="['/film']">Film News</a>
        <a class="nav-item nav-link"  [routerLink]="['/shop']"  *ngIf="auth.loggedIn()">Shop</a>
        <a class="nav-item nav-link" [routerLink]="['/checkout']"  *ngIf="auth.loggedIn()" >Checkout</a>
        <a class="nav-item nav-link" (click)="auth.login()" *ngIf="!auth.loggedIn()">Login</a>
        <a class="nav-item nav-link" (click)="auth.logout()" *ngIf="auth.loggedIn()" >Logout</a>
      </div>

      <div class="nav navbar-nav  float-xs-right">
        <db-cart-menu  *ngIf="auth.loggedIn()" ></db-cart-menu>
      </div>

    </div>
  </div>
</nav>

node backend

    var express = require('express');
var fs = require('fs');
var jwt = require('express-jwt');
var favicon = require('serve-favicon')
var http = require('http');
var https = require('https');
var path = require('path');
var logger = require('morgan');
var session = require('express-session');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var bcrypt = require('bcryptjs');
var cors = require('cors');
var config = require('./config');

    // models for the mongodb
    var Director = require('./models/directors');
    var Film =  require('./models/films');
    var Product = require('./models/products');
    var User = require('./models/users');



    var app = express();

    // Create an HTTP service.
http.createServer(app).listen(3000);
console.log("listen on 3000");
// Create an HTTPS service identical to the HTTP service.
https.createServer(options, app).listen(8000);

// links the node server to the webpage
app.use(express.static(path.join(__dirname, '../')));
app.use(cors());
app.use(logger('dev'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: true
}));
app.use(cookieParser());

//the rest is the rest api routes

Upvotes: 3

Views: 1419

Answers (1)

eko
eko

Reputation: 40647

Since /about is not defined as a route in your server-side, either you need to define them 1 by 1 or you need to add something like 

app.get('/*',  function(req, res, next) {
    res.sendFile('index.html', { root: __dirname }); 
});

To redirect every refresh to angulars routing.

Upvotes: 3

Related Questions