带有 Express js 的 Angular 2 cli
Posted
技术标签:
【中文标题】带有 Express js 的 Angular 2 cli【英文标题】:Angular 2 cli with Express js 【发布时间】:2017-01-30 12:08:27 【问题描述】:我想使用带有节点 js 的 express js 作为我的 Angular 2 项目的服务器。我正在查看将 express js 与 angular cli 集成的教程(我关注了 this 和 this),但我没有运气。有人对如何做到这一点有任何建议吗?目前,我有一个带有 cli 的新项目,上面写着“应用程序有效!”并想尝试使用 express 而不是使用 lite 服务器来做到这一点。 感谢任何帮助!
【问题讨论】:
ng build
并使Express JS
托管dist
目录。很抱歉,没有更具体的信息,我无能为力。
我试过了,它只在 index.html 中显示“正在加载...”的东西。它不会自动加载其他组件吗?
浏览器控制台中的任何内容?
好的,所以当我使用 dist 文件夹中的索引 html 时得到这个:“inline.js:1 Uncaught SyntaxError: Unexpected token
【参考方案1】:
这个link 对我有用,但有一些变化。
我安装 angular-cli 并创建新项目,然后我按照链接的教程进行操作,但进行了以下更改:
-
我创建了一个名为 node_server 的文件夹
在我项目的根文件夹中运行 npm install express --save。这会在您的 package.json 中添加类似依赖项的服务器,而无需在 node_server 上创建新的。
我在 node_server 中创建了一个名为 server.js 的新文件,其中包含一个基本的 express 服务器。此服务器只返回 dist 文件夹的 index.html。
在package.json中添加脚本,链接教程中的脚本相同,但稍作改动,文件名是server.js而不是index.js
这是我的 server.js 文件:
const express = require('express');
var app = express();
var staticRoot = __dirname;
app.set('port', (process.env.PORT || 3000));
app.use(express.static(staticRoot));
app.get('/', function(req, res)
res.sendFile('index.html');
);
app.listen(app.get('port'), function()
console.log('app running on port', app.get('port'));
);
我希望这对你有用。
【讨论】:
【参考方案2】:上面的评论对我来说效果很好, 只需要对该链接中建议的 package.json 中的脚本进行一些调整。
"build:nodeserver": "ng build && cp node-server/* dist",
"build:nodeserver-prod": "ng build -prod && cp node-server/* dist",
"serve-build" : "npm run build:nodeserver && nodemon dist/index.js",
"serve-build-prod": "npm run build:nodeserver-prod && nodemon dist/index.js"
我有一个名为 node-server 的文件夹 上面有我的 server.js 文件,上面有 angular2 应用程序的路由, 还有一些 api 路由,节点服务器中的一些其他文件夹,如 mysql-requests 和一些文件,如 config.json 文件
【讨论】:
cp node-server/* dist
是不必要的。您需要编辑 ng2 应用程序的 tsconfig.json 文件并添加一个 outDir: 'dist'
条目。 build 将直接在该目录中编译。如果你有一个 webpack 配置文件,那么应该有一个 output:
条目。【参考方案3】:
我在您的快递服务器上创建 2 个文件夹(我正在使用 Express-generator) 和 1 是 Angular 2 项目 (Angular cli )
根目录
--->服务器
--->ng4
--->gulpfile.js
gulp 将构建您的应用并移动构建文件
var gulp = require('gulp')
var rename = require("gulp-rename");
var deletefile = require('gulp-delete-file');
var exec = require('child_process').exec;
var runSequence = require('run-sequence');
gulp.task('build', function (cb)
exec('cd ng4/ && ng build', function (err, stdout, stderr)
cb(err);
);
)
gulp.task('rename', () =>
return gulp.src("./ng4/dist/index.html")
.pipe(rename("ng4.html"))
.pipe(gulp.dest("./server/views"));
)
gulp.task('deletefile', function ()
var regexp = /\w*(\-\w8\.js)1$|\w*(\-\w8\.html)1$/;
gulp.src(['./server/public/index.html',
'./ng4/dist/**/*.*'])
.pipe(deletefile(reg: regexp,deleteMatch: false));
);
gulp.task('move', function ()
return gulp.src(["./ng4/dist/**/*.*"])
.pipe(gulp.dest("./server/public"));
);
gulp.task('default', function(callback)
runSequence('build','rename','move','deletefile',callback)
);
这样你就可以在 ng4 app 中开发并在 root 上运行 gulp 命令。
【讨论】:
【参考方案4】:我有这种情况;但是,我希望能够:
-
使用
ng serve
运行我的 Angular CLI 项目,而不是修改任何 gulp 任务/进程,也不必每次都运行 ng build
有一个服务器端 API 在其自己的端口上独立于前端进行响应 - 这样就使用了微服务架构模式,并将前端和后端之间的关注点分开。
为此,我使用concurrently 和下面的 package.json 脚本修改
"scripts":
"start": "concurrently \"npm run-script start-frontend\" \"npm run-script start-backend\"",
"start-frontend": "ng serve",
"start-backend": "node index.js",
...
我的后端 index.js 文件是样板文件,但看起来像这样......
const express = require('express');
const router = express.Router();
const app = express();
const PORT = process.env.PORT || 3000;
router.get('/', (req, res) =>
res.json( Hello: 'World' );
);
app.use('/api', router);
app.listen(PORT, function()
console.log(`API running on port $PORT`);
);
现在,当我想运行应用程序时,我可以输入npm start
来让一切运行起来。那我可以去……
【讨论】:
以上是关于带有 Express js 的 Angular 2 cli的主要内容,如果未能解决你的问题,请参考以下文章
在 Express、Node.js 和 Angular 学习项目中不使用 next() - 对吗?
本地主机上带有 Angular 的 NodeJS + Express:被 CORS 预检阻止
跨域ajax调用失败-Angular.js节点js + express
socket.io+angular.js+express.js做个聊天应用