Angular 1 - routeProvider not working in html5Mode

问题

After enabling html5Mode, my $routeProvider is not working anymore. I see the same issue in this post but nothing is working for me. I don't even know where to begin as it seems to work on all other examples I have come across.

I am using Express to route to /index which works just fine but only the top navbar is shown. The ng-view is not loading with no errors whatsoever.

My URL structure:

Before: localhost:3000/index#/ //This worked previously before I enabled html5Mode
After: localhost:3000/index/ //This doesn't work once html5Mode is on

My index.html file:

<!DOCTYPE html>
  <html lang="en" ng-app="mainApp">
  <head>
    <base href="/index">
  </head>

  <body class="bg-light">
    <div navbar></div>

    <div ng-view></div>

    <script src="/jsLib/angular.min.js"></script>
    <script src="/jsLib/angular-route.min.js"></script>
    <script src="/angular/angularApp.js"></script>
    <script src="/jsLib/angular-sanitize.min.js"></script>
    <script src="/jsLib/angular-animate.min.js"></script>
  </body>

  </html>

My angularApp.js file:

var mainApp = angular.module('mainApp', ['ngRoute', 'ngAnimate']);

mainApp.config(function($routeProvider, $locationProvider) {
    $locationProvider.html5Mode(true).hashPrefix('');

    $routeProvider
    .when('/', {templateUrl : '/partial/wall/feed.html', controller  : 'wallMainController'})

  });

mainApp.directive('navbar', function(){
    return{
        templateUrl: 'partial/template/navbar.html'
    };
});

mainApp.controller('wallMainController', ['$scope', function($scope){

  consolel.log('wallMainController loaded');

}]);

My Express app:

var express = require('express');
var app = express();
var path = require('path');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
var fs = require('fs');
var router = express.Router();

app.set('views', path.join(__dirname, 'views'));
app.engine('html', require('hogan-express'));
app.set('view engine', 'html');
app.locals.delimiters = '<% %>';
app.use(express.static(path.join(__dirname, 'public')));
app.use(cookieParser());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

router.get('/', function(req, res){
    res.redirect('/index');
});

router.get('/index', function(req, res, next){
    res.render('index');
});

app.listen(3000, function(){
    console.log('App is working on Port 3000');
});

What I end up seeing is just the navbar on the site but nothing else in the ng-view section. I will like some guidance from where to go from here. None of the suggestion, from what I have found, are working. I haven't added

回答1:

I got it fixed by adding the below under the path for /index

router.get('/*', function(req, res, next) {
  res.sendfile('./views/index.html')
});

This causes another issue where all my other routes (not in the question), are also caught by this path like: /login but I will look into that separately. This problem is solved

来源：https://stackoverflow.com/questions/61423585/angular-1-routeprovider-not-working-in-html5mode

标签

angular

route-provider

html5mode