问题：

使用Node Js服务器运行Angular2应用程序

宋嘉懿

2023-03-14

我开始了一个新的项目Angular2（客户端）和节点JS（服务器端）技术。

我已经使用node和express创建了一个RESTful API。输入特定URL时，将显示匹配的Json响应。到现在为止，一直都还不错。

现在我正试图在这个过程中积分Angular 2。我已经创建了这个应用程序。组成部分显示页面时，组件未加载，我得到了一些404代码：

Failed to load resource: 404 (not found) http://localhost:3000/node_modules/core-js/client/shim.min.js
...
Failed to load resource: 404 (not found) http://localhost:3000/systemjs.config.js

这是我的项目结构：

├── App
|    └── app.component.ts                //copied from Angular2/get-started
|    └── main.ts                         // copied from Angular2/get-started
├── dist                                 //contains generated JS files
├── node_modules
├── server                               // contains Server Typescript files
├── index.html                           // copied from Angular2/get-started
├── index.ts                             // server entry point
├── package.json
├── systemjs.config.js
├── tsconfig.json
├── typings.json

我的包裹。json:

{
  "main": "index.js",
  "scripts": {
    "start": "tsc && concurrently \"npm run tsc:w\" \"node dist/js/index.js\" ",
    "postinstall": "typings install",
    "tsc": "tsc",
    "tsc:w": "tsc -w",
    "typings": "typings"
  },
  "dependencies": {

    "@angular/common":  "2.0.0-rc.1",
    "@angular/compiler":  "2.0.0-rc.1",
    "@angular/core":  "2.0.0-rc.1",
    "@angular/http":  "2.0.0-rc.1",
    "@angular/platform-browser":  "2.0.0-rc.1",
    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
    "@angular/router":  "2.0.0-rc.1",
    "@angular/router-deprecated":  "2.0.0-rc.1",
    "@angular/upgrade":  "2.0.0-rc.1",

    "systemjs": "0.19.27",
    "core-js": "^2.4.0",
    "reflect-metadata": "^0.1.3",
    "rxjs": "5.0.0-beta.6",
    "zone.js": "^0.6.12",
    "angular2-in-memory-web-api": "0.0.11",
    "bootstrap": "^3.3.6",

    "express": "^4.13.4",
    "mysql": "^2.5.4"
  },
  "devDependencies": {
    "concurrently": "^2.0.0",
    "typescript": "^1.8.10",
    "typings": "^1.0.4"
  }
}

还有我的索引。ts（服务器）：

var express = require('express');
var app = express();
var path = require('path');

var __projectRoot = __dirname + '/../../';

app.get('/', function (req, res) {
    res.sendFile(path.join(__projectRoot + '/index.html'));
});

console.log('Server up and running on http://localhost:3000/');
app.listen(server_port);

最后，index.html：

<html>
<head>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <title>Angular 2 QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 1. Load libraries -->
    <!-- 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/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <!-- 2. Configure SystemJS -->
    <script src="systemjs.config.js"></script>
    <script>
        System.import('app').catch(function (err) {
            console.error(err);
        });
    </script>
</head>
<!-- 3. Display the application -->
<body>
<h1>index.html</h1>
<my-app>Loading...</my-app>
</body>
</html>

加载http://localhost:3000/时，我看到“我ndex.html加载......”但组件不显示。

在Angular2官方网站上，他们使用lite-server依赖关系。我猜我的服务器出了问题，但是我不知道如何让它工作。或者有没有一种方法来实现RESTful API使用Express和lite服务器？

共有2个答案

暨弘毅

2023-03-14

安装路径包npm i path后--保存

在上面用这个

var path = require('path');

var app = express();

 app.use(express.static(path.join(__dirname, 'your-dir-name')));

曾河

2023-03-14

您忘记添加一个中间件函数来服务静态文件，如js LIB和css。在应用程序之前添加此行。获取（“/”，…）应该工作：

app.use(express.static(__projectRoot));

类似资料：

在ubuntu服务器上使用uvicorn运行快速应用程序

我正在处理在FastAPI上向远程ubuntu服务器提交的项目文件。我将尝试通过以下命令从终端运行项目（使用SSH连接）输出是但是我需要这个项目在服务器的IP地址上可用。如果我尝试像我明白了在哪里66.226.247.55-来自谷歌云平台实例的外部IP地址我如何启动一个项目，以便可以通过IP访问？
使用嵌入式jetty服务器运行web应用程序(WAR)

我制作了一个非常基本的web应用程序，它只有一个html页面。我把它当作战争输出。现在我创建了一个嵌入式jetty服务器。 } 我为这个嵌入式服务器创建了一个jar。但是当我试图通过嵌入式服务器运行我的web应用程序时，我得到以下错误。 C:\users\user>Java-jar C:\users\user\desktop\jetty\webserver.jar null 我使用过jetty
在服务器运行 WSGI 应用

这里有一些在服务器运行 WSGI 应用的方式。当你正在开发一个应用，你往往不想在一个成熟服务器上部署和运行，取而代之的是一个轻量服务器。 Werkzeug 就内置了这样一个轻量的服务器。在一个服务器上运行 start-myproject.py 最简单的方法如下示例: #!/usr/bin/env python # -*- coding: utf-8 -*- from werkzeug.se
停止运行的应用程序tomcat服务器

我有个问题希望你能帮我解决。有时，我的应用程序会出现一些错误，并继续在服务器上运行，直到我手动停止服务器并重新启动。
Azure容器应用程序服务。Docker运行参数？

我在azure中有一个运行docker容器的应用程序服务。日志显示它正在使用下面的docker run命令运行。我隐藏了一些私人公司的价值观。 docker run-d-p 4040:443--name hidden-e WEBSITE\u SITE\u name=hidden-e WEBSITE\u AUTH\u ENABLED=False-e PORT=443-e WEBSITE\u ROL
在服务器上运行Spring引导应用程序

我是Spring应用程序开发的新手。如何在tomcat服务器的开发阶段运行我的应用程序。在这里我可以看到最终部署的解决方案。每次我需要停下来重新开始时，我只需要在ui上更改一些。这让我很难受。所以你能帮我照顾她吗？？我的pom.xml依赖是 org.springframework spring-binding 1.0.6

使用Node Js服务器运行Angular2应用程序

共有2个答案

相关问答

相关文章

相关阅读

相关工具

相关文档