Angular 2的'app-root'没有在ExpressJS路由上加载

Im新的NodeJS和Express，但我想要一个简单的'/'路径到Angular的默认index.html（client/src/index.html）根标签。Angular 2的'app-root'没有在ExpressJS路由上加载

'/'路由成功地为index.html文件提供服务，但它不会将'app-root'标记展开/加载到组件的html中，所以我只是得到空白页面。

我不知道为什么它无法解析从Express路由时的应用程序根标签。只有当我通过'ng serve'运行Angular时，index.html才能成功加载app-root标记的内容。

我的结构如下：

/client 
    /e2e 
    /node_modules 
    /app 
     app.component.css/html/ts 
     app.module.ts 
    /src 
     index.html 
     main.ts 
package.json 
server.js

server.js

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

var port = 80; 

var app = express(); 

// set static folder 
app.use(express.static(path.join(__dirname, '/client'))); 

app.get('/', function(req, res, next){ 
    res.sendFile(__dirname + '/client/src/index.html'); 
}); 

app.listen(port, function(){ 
    console.log("Server started on port " + port); 
});

来源

2017-08-21 user1337604

你需要ŧ o设置类似于获取app/root将该目录返回到请求 –

您的index.html文件的外观如何？ – Muirik

对不起，你能告诉我那是什么样子吗？ – user1337604

它看起来像你没有做 'NG建立' 您的角度应用，因为main.ts仍然存在。

当您执行'ng服务'时，angular编译并使用webpack-dev-server进行服务。

如果您想要将您的应用程序从您的节点作为静态服务，那么您需要一个编译后的角度应用程序。

你可以做以下

$ cd client && ng build

会有客户端/ dist目录中创建您的编译角度的应用程序所在，你可以成为那个在你的快递

您可以在您更改目录server.js像下面

app.use(express.static(path.join(__dirname, '/client/dist'))); 
res.sendFile(__dirname + '/client/dist/index.html');

希望这有助于

来源

2017-08-22 00:25:51 David

Ahh我看到了，但是一旦我拿到dist文件夹并启动服务器在文件夹中，我成功返回index.html，但它的空白页面出现这些错误：http://i.imgur.com/ocS7IMi.png – user1337604

实际上，通过更改'app.use（express.static（path。加入（__ dirname，'/ client'）））;'到'app.use（express.static（path.join（__ dirname，'/'）））;'有用。这条线究竟做了什么？它是否将文件加载到'/'目录以便能够使用它们？ – user1337604

express.static让你提供html和javascript文件。编译的角度文件现在都只是可以在任何Web服务器上提供的静态html和javascript文件（nginx，apache，以及您的情况，Node服务静态）。如果你还没有移动你的dist文件，那可能是因为angular-cli版本。看看这个[链接]（https://stackoverflow.com/questions/37588470/angular-2-giving-an-error-uncaught-syntaxerror-unexpected-token） – David

Angular 2的'app-root'没有在ExpressJS路由上加载

回答

相关问题