如何將現有的Angular 2應用程序鏈接到Nodejs服務器？

我有一個角2應用這種結構：
Structure of my Angular app 如何將現有的Angular 2應用程序鏈接到Nodejs服務器？

我看到有2模塊依賴文件夾，但我不知道我要高度重視哪一個保持。

這裏是我的index.js文件：

const express = require('express'); 
    const path = require('path'); 
    const http = require('http'); 
    const bodyParser = require('body-parser'); 

    // Get our API routes 
    //const api = require('./server/routes/api'); 

    const app = express(); 

    // Parsers for POST data 
    app.use(bodyParser.json()); 
    app.use(bodyParser.urlencoded({ extended: false })); 

    // Point static path to dist 
    app.use(express.static(path.join(__dirname, 'client/portfolio'))); 

    // Set our api routes 
    //app.use('/api', api); 

    // Catch all other routes and return the index file 
    app.get('*', (req, res) => { 
    res.sendFile(path.join(__dirname, 'client/portfolio/src/index.html')); 
    }); 

    /** 
    * Get port from environment and store in Express. 
    */ 
    const port = process.env.PORT || '3001'; 
    app.set('port', port); 

    /** 
    * Create HTTP server. 
    */ 
    const server = http.createServer(app); 

    /** 
    * Listen on provided port, on all network interfaces. 
    */ 
    server.listen(port,() => console.log(`API running on localhost:${port}`));

當我開始我的服務器得到這個消息：

加載AppComponent內容在這裏...

，但是它停止這裏並沒有渲染Angular應用程序。

index.html文件：

<!DOCTYPE html> 
<html> 
    <head> 
     <title>Angular QuickStart</title> 
     <base href="/"> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <link rel="stylesheet" href="styles.css"> 
     <link href="node_modules/@angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet"> 
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> 
     <!-- Polyfill(s) for older browsers --> 
     <script src="node_modules/core-js/client/shim.min.js"></script> 
     <script src="node_modules/hammerjs/hammer.js"></script> 
     <script src="node_modules/zone.js/dist/zone.js"></script> 
     <script src="node_modules/systemjs/dist/system.src.js"></script> 
     <script src="systemjs.config.js"></script> 
     <script> 
     System.import('main.js').catch(function(err){ console.error(err); }); 
     </script> 
    </head> 
    <body> 
     <my-app>Loading AppComponent content here ...</my-app> 
    </body> 
</html>

來源

2017-06-03 infodev

和的NodeJS AngularJS之間的相互作用是通過從角度向節點發送http請求完成的。你的Q太大太一般 – developerbh

是的，但我應該先將它們連接到另一個，或者si mply指定索引文件是USIG 'app.use（express.static（path.join（__目錄名稱， '客戶端/圖集'）））;' 然後 'app.get（ '*'，（ req，res）=> {res.sendFile（path.join（__ dirname，'client/portfolio/src/index.html'））; }）;' – infodev

您沒有像這樣指定索引文件，使用express.static僅用於靜態文件 – developerbh

下面是用的NodeJS [open tutorial]

訣竅是在這個塊累加AngularJS的一個很好的例子

/* GET home page. */ 
router.get('/', function(req, res, next) { 
    res.sendFile(path.join(__dirname, '../', 'views', 'index.html')); 
});

來源

2017-06-04 15:02:59 developerbh

它只加載index.html文件但不運行應用程序 – infodev

顯示html索引代碼plz – developerbh

完成。我試圖通過設置獲取路線併發回index.html來從服務器啓動Angular應用程序。可能是我做錯了。我只能在3001端口運行Angular App，在3001端運行服務器，然後發送http請求。 – infodev

如何將現有的Angular 2應用程序鏈接到Nodejs服務器？

回答

相關問題