html5mode中的AngularJS路由错误

Question

这是我的前端AngularJS路由：

$urlRouterProvider.otherwise('/');
$locationProvider.html5Mode(true).hashPrefix('!');
$stateProvider
.state('main', {
    url: '/',
    templateUrl: '/views/main.html',
    controller: 'MainCtrl'
})

.state('review', {
    url: '/review',
    templateUrl: '/views/review.html',
    controller: 'NewReviewCtrl'
})

.state('model', {
    url: '/:make/:model',
    templateUrl: '/views/model.html',
    controller: 'ModelPageCtrl'
});

这是我的服务器端路由（node.js）：

//...some routes

app.use('/*', function(req, res){
    res.sendFile(config.rootPath + '/public/index.html');
});

使用/review route，一切正常，但不能使用/:make/:model ：

HTML：

<a href="" ui-sref="model({make: 'lenovo', model: 'thinkpad-t430'})">See more details...</a>

如果通过该链接转到此页面，则一切正常，但是如果刷新或直接转到localhost:3030/lenovo/thinkpad-t430此错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module app to:
Error: [$injector:nomod] Module 'app' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

这可能是因为html5mode 。 而且我建议它不适用于此URL，因为它是2级URL。

我怎样才能解决这个问题？

编辑：Express.js配置：

app.set('view engine', 'ejs');
app.use(function (req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
    next();
});
app.use(bodyParser());
app.use(session({secret:"some_secret"}));
app.use(passport.initialize());
app.use(passport.session());
app.use(express.static(config.rootPath+"/public"));

Answer 1

我创建了工作的plunker ，它确实使用了与上述相同的UI-Router设置。 一切正常。 因此，我们现在应该知道，应该正确设置客户端。

主要且唯一的区别是更明确的设置，该设置使我们可以省略头部的<base href="/" />

$locationProvider
  .html5Mode(
  {
    enabled: true, 
    requireBase: false,
  })

或者我们可以使用<base>元素（检查index.html <head> ）将其插入

似乎问题出在服务器端，请检查两次：

html5mode中的AngularJS路由错误

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-12-29 17:31:45

如何：配置服务器以使用html5Mode

html5mode中的AngularJS路由错误

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-12-29 17:31:45

如何：配置服务器以使用html5Mode

解决方案1
1 已采纳 2014-12-29 17:31:45