如何将express添加到角度启动器中?

2024-03-23

我一直在使用 webpack 和 Angular 使用 webpack-dev-server 开发我的 angular2 应用程序:https://github.com/AngularClass/angular-starter https://github.com/AngularClass/angular-starter

我想使用 Express 来运行应用程序,最简单的方法是什么?我已经安装了 npm Express。


这是一个演示文件供您使用Express app:

服务器/服务器.js:

const express = require("express");
const app = express();
const bodyparser = require("body-parser");
const json = bodyparser.json;
const http = require('http').Server(app);
const urlencoded = bodyparser.urlencoded;
const path = require("path");

app.use(json());
app.use(urlencoded({
    extended: true
}));
app.use(express.static(__dirname + '/../dist'));

app.get('/test', (req, res) => {
    /* when using webpack-dev-server we are using webpack's url 
       so we need to set headers for development i.e npm run server:dev:hmr 
    */
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

    return res.json({
      code: '0',
      msg: 'Successfully called test API'
    })
})

/* Only for production i.e:  - All others are to be handled by Angular's router */
app.get('/*', (req, res) => {
    res.sendFile(path.join(__dirname + '/../dist/index.html'));
});

http.listen(3001, function() {
    console.log(`App started on port 3001`)
})

使用以下命令启动服务器node start server/server.js在一个终端和npm run server:dev:hmr在另一个。

从 home.component.ts 调用 API:

public ngOnInit() {
    console.log('hello `Home` component');
    /**
     * this.title.getData().subscribe(data => this.data = data);
     */
    this.http.get('http://localhost:3001/test')
    .map(res => res.json())
    .subscribe(data => console.log("data received", data))
}

您可以在开发人员工具的网络选项卡中看到已向服务器发出请求。

现在你可以执行npm run build:prod并且您的所有内容仍将由dist目录。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何将express添加到角度启动器中? 的相关文章

  • NodeJS 路由器负载太大

    我在 Nodejs 应用程序中创建休息端点 如下所示 在我的 server js 中 我有以下代码 var express require express var app express app use express json limit
  • 如何等待,直到我从 Angular 7 中的后端 Spring Boot API 得到响应

    我想使用 http post 方法的结果从一条路线导航到另一条路线 但导航是在没有 http post 响应的情况下发生的 当我调试代码时 响应越来越晚 我怎样才能解决这个问题 有什么办法可以等待执行直到后端返回响应吗 当我单击按钮时 将执
  • Angular 2 Observable 具有多个订阅者

    我有一个 Angular 2 服务 可以从 API 获取数据 该服务有 3 个订阅者 在组件中定义 每个订阅者都对数据执行其他操作 不同的图表 我注意到我正在向 API 发出三个 GET 请求 而我想要实现的是一个请求 并且订阅者将共享数据
  • 401 Unauthorized("detail":"未提供身份验证凭据。")

    我在后端使用 djoser 的身份验证 当我通过具有内容类型和授权标头的邮递员在 account me 发出获取请求时 我得到了正确的响应 但是当我尝试从我的角度客户端执行相同的请求时 我得到401 Unauthorized detail
  • mat-tab-group 不是 Angular 9 中的已知元素

    我正在使用 Angular 9 和 Angular Material 9 2 4 我正在尝试使用mat tab 组在我的 component html 中 但我不断收到错误 mat tab group is not a known elem
  • Angular 2 - 加载时共享服务

    我正在尝试将服务共享给组件 为此 我创建了 service ts 其中代码如下 import Subject from rxjs Subject export class CommonService CommonList new Subje
  • 如何向离子推送通知添加操作按钮?

    我想向离子推送通知添加一些操作按钮 我正在使用科尔多瓦pushv5 通知工作正常 但我不知道如何添加这些按钮 如何添加这些按钮 应在 POST 请求中添加操作按钮 registration ids my device id data tit
  • 将指令外部的值传递给父指令时,“错误:输出未定义”

    我有一个 root app 组件 它在模板中是这样定义的 template
  • mongoDB白名单IP

    我看到类似的帖子 但没有一个能帮助我解决我的问题 在学习了从头开始构建 MERN 应用程序的 Udemy 教程后 我陷入了 mongoose 连接的困境 这是我的 index js 代码 const express require expr
  • 如何在 RxJS 订阅方法中等待

    在 RxJS 主题的订阅回调内部 我想要await on an async功能 下面是打字稿转译器抱怨的代码示例 错误 131 21 TS2304 找不到名称 await async ngOnInit this subscriber dat
  • Angular 9:上传图像时如何将 HEIF 文件格式转换为已知的 Web 格式

    我正在维护一个用 Angular 9 编写的 Web 应用程序 PWA 用户可以在 Cropperjs 中上传图像并裁剪 旋转等 在 iOS 上 新的图像格式 HEIF 正在成为标准 这些用 户抱怨他们无法上传照片 似乎iOS有时会自动转换
  • 如何使用 *ngFor 迭代对象键

    我想在 Angular 2 中使用 ngFor 迭代 object object 问题是该对象不是对象的数组 而是包含更多对象的对象的对象 data id 834 first name GS last name Shahid phone 0
  • 在 Angular 9 应用程序的生产中同时使用 AOT 和 JIT

    因此 我一直在构建一个 Angular 9 应用程序 其中有一个客户仪表板来管理保存在服务器上的模板 这些模板可以通过激活系统在不同的设备上查看 因此设备与用户绑定 所以让我们说https templates com我们有 login da
  • 如何在 Angular 2 应用程序中使 DateAdapter 单例?

    我正在开发一个带有延迟加载模块的 Angular 7 应用程序 我也使用有角度的材料组件 我想在日期选择器组件中本地化并支持多个区域设置 当应用程序语言发生变化时 我想在整个应用程序中全局更改它 可以通过 DateAdapter setLo
  • 415 不支持的媒体类型; Angular2 到 API

    我是 Angular 2 的新手 我面临着一个无法找到解决方案的问题 当我尝试从 Angular 2 发布到 API 时 我得到 415 不支持的媒体类型 角度2代码 onSubmit value any console log value
  • Angular2 Router:将主题标签添加到 url

    我正在使用 Angular2 Seed 应用程序 您可以在官方仓库 https github com mgechev angular2 seed 正如您所看到的 这里我们导入了 angular2 router 并且我们使用它来创建应用程序的
  • Angular 2+ 源代码中的 ɵ(类似 Theta)符号

    在深入研究 Angular 4 3 源代码后 我经常遇到 符号 例如 在异步管道源 https github com angular angular blob 4 3 2 packages common src pipes async pi
  • Angular 2 ngModel 不工作(仅限 javascript)

    所以我是 Angular2 javascript 的新手 我能够通过 5 分钟的 Angular 教程制作一个简单的 Hello world 我对 Angular2 的新变化很好奇 我开始阅读 Angular2 Js 文档 但我发现它不完整
  • Nodejs Express 隐式中间件应用于所有路由?

    我想知道 Express 是否允许我创建一个默认调用的路由中间件 而无需我将其明确放置在 app get arg 列表中 NodeJS 新手 var data title blah So I want to include this in
  • 全局未在 ../node_modules/socket.io-parser/is-buffer.js 中定义

    预先感谢您帮助我 我正在尝试在我的一个角度组件中连接套接字 但在浏览器的控制台中它会抛出一个错误 指出 Global 未在 Object node modules socket io parser is buffer js 中定义 这是我的

随机推荐