Question

我设置Angular路线与Express一起工作陷入僵局。

我试着像Express 4, NodeJS, AngularJS routing那样做，但那不起作用。每次url更改时，静态index.html都会提供服务，但Angular不会捕获部分内容。

在我的Express中，我有以下代码：

var express = require("express");
var app = express();
app.use(express.static(__dirname + '/app'));
app.use("*",function(req,res){
    res.sendFile(path.join(__dirname,"app/index.html"));
});
app.listen(1337, function(){
    console.log("Server is listening on port 1337");
});

在我的Angular应用程序中，我有以下内容：

var app = angular.module("myapp",["ngRoute","appControllers"]);

    app.config(["$routeProvider","$locationProvider",function($routeProvider,$locationProvider){
            $locationProvider.html5Mode(true);
            $routeProvider
                    .when("/list",{
                        templateUrl: "/partials/users.html",
                        controller: "userListCntr"
            })
                    .when("/edit", {
                        templateUrl: "/partials/edit.html",
                        controller: "userEditCntr"
            })
                    .when("/register", {
                        templateUrl: "/partials/register.html",
                        controller: "registerCntr"
            })
                    .when("/login", {
                        templateUrl: "/partials/login.html",
                        controller: "registerCntr"
            });

    }]);

我的浏览器控制台中没有任何错误。 html检查器显示： 所以该指令有点初始化。

依赖列表：

dependencies": {
    "angular": "1.3.x",
    "angular-mocks": "1.3.x",
    "jquery": "1.10.2",
    "bootstrap": "~3.1.1",
    "angular-route": "1.3.x",
    "angular-resource": "1.3.x",
    "angular-animate": "1.3.x"
  }

这是我的文件结构：

--app (angular app)
   --components
   --js
   --css
   --img
   --assets
   --partials
   --index.html
--node-modules
--server.js (here express settigs are)

另外，我按照以下方式进行了更改，以便考虑所有静态资源，但仍无效：

app.use(express.static(__dirname+ "/app"));
app.use('/js', express.static(__dirname + '/app/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/app/css'));
app.use('/assets', express.static(__dirname + '/app/assets'));
app.use('/components', express.static(__dirname + '/app/components'));
app.use('/img', express.static(__dirname + '/app/img'));
app.use('/partials', express.static(__dirname + '/app/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('/app/index.html', { root: __dirname });
});

请帮助，因为我无法找到解决方案。谢谢！

Answer 1

如果您未通过express.use()的路径，则默认为/。您为*设置的进程规则要么多余，要么甚至无法正常工作。

此外，由于您使用的是html5mode，因此您需要明确地设置来自资源的路线，以便Express不会尝试为所有请求提供index.html文件。< / p>

从Angular UI-Router开始尝试使用此示例来获取尺寸：

var express = require('express');
var app = express();

app.use('/js', express.static(__dirname + '/js'));
app.use('/dist', express.static(__dirname + '/../dist'));
app.use('/css', express.static(__dirname + '/css'));
app.use('/partials', express.static(__dirname + '/partials'));

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

app.listen(3006); //the port you want to use

Answer 2

感谢大家的帮助。我通过将<base href="/" />插入到我的Angular index.html的head部分来解决了这个问题。它对我有用，但是现在它就像魔术和货物编码一样，因为我不明白为什么它有效:) 在此处找到解决方案：AngularJS: how to enable $locationProvider.html5Mode with deeplinking

Answer 3

我只想补充一点，添加base href=帮助了我。我有我的应用程序静态服务，直接浏览我的角应用程序中的路线会导致很多

拒绝执行脚本，因为它的mime类型（'text / html'）不是启用可执行和严格的mime类型检查

要抛出的错误。但添加base href修复了该问题，我现在可以直接浏览我的角度路径。

Answer 4

虽然@kirgol使用base href=建议的解决方案工作正常，但是有一种替代解决方案可能会让寻找简单路由服务的人感兴趣。在此解决方案中，我们将不使用ExpressJS路由

只需使用此

即可

app.use(express.static(__dirname + '/app'));

而不是

app.all('/*', function(req, res, next) {
    // Just send the index.html for other files to support HTML5Mode
    res.sendFile('index.html', { root: __dirname });
});

这样，expressJS将自动为位于该静态位置的index.html提供服务。将自动处理路由。它的行为就像一个简单的http服务器。您使用app.all / app.get处理路由的那一刻 - 您必须设置base href以告知$locationProvider可以匹配路由的位置

Answer 5

我也遇到了类似的情况，即使用express通过角组件进行布线，这就是我能够解决布线问题的方式：

我的Nodejs项目的设置：

构建用于生产的Angular项目并将其放置在公用文件夹中。
为快递服务器创建了一个app.js文件，其内容如下：

var express = require('express'); var app = require('express')(); const port = 8090; app.use(express.static('public')); app.listen(port,()=>{console.log("App working at port : http://localhost:"+port)});

运行此命令仅加载了根组件，我必须在其中使用routerLink手动路由不同的页面。相反，如果我尝试直接使用URL给子组件，则会出现Cannot GET/{URL}错误。

修复：

我添加了导入为的express-http-proxy包
var proxy = require('express-http-proxy');
然后在app.use(express.static('public'));
app.use('/*',proxy('http://localhost:'+port+'/*'));

这解决了我的问题。显然还有一个更标准的解决方法Refer Link

使Angular路线适用于Express路线

5 个答案: