角-cli webpack如何在特快专递服务器上服务生成dist文件夹
角-cli webpack如何在特快专递服务器上服务生成dist文件夹
提问于 2017-10-31 15:05:34
我使用的角度4与角-cli，所以我停留在一个点，我已经生成了dist文件夹使用ng构建-prod，我必须服务于快递服务器。我有现有的设置，我运行的是角1代码。
回答 1
Stack Overflow用户
回答已采纳
发布于 2017-10-31 23:16:49
下面是它的要点
在快速应用程序中，如果需要两条路由，请定义routes.For示例，
- 用于服务客户端(在本例中为角)
- 其他用于REST的
然后，在您的server.js中，您将有以下路线。
//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);
然后，在“路由”文件夹中，让我们定义index.js文件，在该文件中，我们定义服务客户端的路由。
// /routes/index.js
var express = require('express');
var router = express.Router();
router.get('', function (req, res, next) {
res.render('index.html');
});
module.exports = router;
现在，在views文件夹中，让我们假设我们有index.html文件。在这个文件中，我将导入角4的编译main.js文件。
<!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>
请注意，我正在使用系统am。
重要！根据需要更改到main.js的路径。例如，尝试将角项目构建到src folder.Below是角4的tsconfig.json文件的片段。
{
"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"
]
}
}
如果使用ng服务，则此命令将删除本例中src目录中生成的文件。因此，使用ng构建-监视来构建和监视您的更改。
对于要观察更改的高速公路，请安装nodemon并键入命令nodemon来运行应用程序。
希望这对你有帮助！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47038579
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号