Question

我正在使用角度为4的角度，因此我卡在了我所拥有的位置使用ng build --prod生成dist文件夹，我必须在快速服务器上提供。我有现有的设置，我正在运行angular 1代码。

Answer 1

以下是它的要点

在快递申请中，定义路线。例如，如果您需要两条路线，

为服务客户端（在本例中为Angular）
REST API的其他内容

然后在您的server.js中，您将拥有以下路线。

＆＃13;

    //assuming you have configured your express configuration in server.js
    var express = require('express');
    var bodyParser = require('body-parser');
    var path = require('path');
    var app = express();
    var http = require('http').Server(app);
    var index = require('./routes/index');
    var apis = require('./routes/apis')(http);
    ......
    // I am skipping codes which are common
    //add the routes 
    //Pointing to Index file of routes
    app.use('/', index);
    //apis - Pointing to apis file of routes
    app.use('/api', apis);

＆＃13;

然后在routes文件夹中，我们定义index.js文件，然后让我们定义服务客户端的路由。

＆＃13;

// /routes/index.js
    var express = require('express');
    var router = express.Router();
    router.get('', function (req, res, next) { 
        res.render('index.html');
    });
    module.exports = router;

＆＃13;

现在在views文件夹中，我们假设我们有index.html文件。在这个文件中，我将导入Angular 4的已编译的main.js文件

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Sample App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  	<base href="/">
    <!-- <link rel="stylesheet" href="styles.css"> -->
    <link rel="stylsheet" href ="/bower_components/bootstrap/dist/css/bootstrap.css">

    <!-- Polyfill(s) for older browsers -->
    <script src="node_modules/core-js/client/shim.min.js"></script>

    <script src="node_modules/zone.js/dist/zone.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>

    <script src="src/systemjs.config.js"></script>
    <script>
      System.import('src/main.js').catch(function(err){ console.error(err); });
    </script>
  </head>

  <body>
    <!-- This is the main angular component selector tag-->
    <my-app>Loading.....</my-app>
  	<ul class="nav nav-tabs">
  <li role="presentation" class="active"><a href="#">Home</a></li>
  
</ul>
  </body>
</html>

＆＃13;

请注意我使用的是systemjs。

重要！根据更改 main.js 的路径。例如，尝试将angular项目构建到 src 文件夹中.Below是Angular 4的tsconfig.json文件的片段

＆＃13;

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src", // the compiled code will go to src folder
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": [
      "es2016",
      "dom"
    ]
  }
}

＆＃13;

如果您使用 ng serve ，此命令将在此情况下清除src目录中的内置文件。因此，使用 ng build --watch 来构建和观察您的更改

要使expressjs观察更改，请安装nodemon并键入命令 nodemon 以运行应用程序。

希望这能帮到你！

angular-cli webpack如何在快速服务器

1 个答案: