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路由上加載

回答

相關問題