主页 / 问题 / 606060
Accepted
Alz
Asked:2020-12-21 17:03:15 +0000 UTC2020-12-21 17:03:15 +0000 UTC

如何设置 Angular 2 和 Express 之间的交互？

  • 772

你好。我正在 Angular 2 和 Express 中制作应用程序。当我运行它时，它显示以下错误：

zone.js:1382 GET http://localhost:3000/app/main.js 404 (Not Found)

(index):21 Error: (SystemJS) XHR error (404 Not Found) loading http://localhost:3000/app/main.js
    Error: XHR error (404 Not Found) loading http://localhost:3000/app/main.js
      at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/static/zone.js/dist/zone.js:698:29)
      at ZoneDelegate.invokeTask (http://localhost:3000/static/zone.js/dist/zone.js:265:35)
      at Zone.runTask (http://localhost:3000/static/zone.js/dist/zone.js:154:47)
      at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/static/zone.js/dist/zone.js:335:33)
    Error loading http://localhost:3000/app/main.js
      at XMLHttpRequest.wrapFn [as _onreadystatechange] (http://localhost:3000/static/zone.js/dist/zone.js:698:29)
      at ZoneDelegate.invokeTask (http://localhost:3000/static/zone.js/dist/zone.js:265:35)
      at Zone.runTask (http://localhost:3000/static/zone.js/dist/zone.js:154:47)
      at XMLHttpRequest.ZoneTask.invoke (http://localhost:3000/static/zone.js/dist/zone.js:335:33)
    Error loading http://localhost:3000/app/main.js

应用程序.js 

var express = require('express');
var app = express();
var path = require('path');
app.use('/static', express.static(__dirname));
app.use('/static', express.static(__dirname + '/node_modules'));
app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
});

应用程序/app.module.ts

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent }  from './app.component';
@NgModule({
  imports:      [ BrowserModule],
  declarations: [ AppComponent],
  bootstrap:    [ AppComponent]
})
export class AppModule { }

应用程序/main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);

应用程序/app.component.ts

import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: '<h1>Hello</h1>'
})
export class AppComponent  { }

索引.html

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="/static/styles.css">
    <!-- Polyfill(s) for older browsers -->
    <script src="/static/core-js/client/shim.min.js"></script>
    <script src="/static/zone.js/dist/zone.js"></script>
    <script src="/static/reflect-metadata/Reflect.js"></script>
    <script src="/static/systemjs/dist/system.src.js"></script>
    <script src="/static/systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>

包.json

  ...
  "scripts": {
    "start": "tsc && concurrently \"tsc -w\" \"node app\" ",
    "lite": "lite-server",
    "tsc": "tsc",
    "tsc:w": "tsc -w"
  },  
  "dependencies": {
    "@angular/common": "~2.2.0",
    "@angular/compiler": "~2.2.0",
    "@angular/core": "~2.2.0",
    "@angular/forms": "~2.2.0",
    "@angular/http": "~2.2.0",
    "@angular/platform-browser": "~2.2.0",
    "@angular/platform-browser-dynamic": "~2.2.0",
    "@angular/router": "~3.2.0",
    "angular-in-memory-web-api": "~0.1.15",
    "core-js": "^2.4.1",
    "express": "^4.14.0",
    "reflect-metadata": "^0.1.8",
    "rxjs": "5.0.0-beta.12",
    "systemjs": "0.19.40",
    "zone.js": "^0.6.26"
  },
  "devDependencies": {
    "concurrently": "^3.1.0",
    "lite-server": "^2.2.2",
    "typescript": "^2.0.10",
    "@types/node": "^6.0.46"
  }
}

我从 npm start 开始。

node.js

1 个回答

  1. Best Answer

    我想通了，也许它会帮助别人。修复app.js中提供静态文件的功能，更改index.html中的路径。一切正常。

    应用程序.js

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

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

app.get('/', function (req, res) {
  res.sendFile(path.join(__dirname + '/index.html'));
});
app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
});

    索引.html

    <!DOCTYPE html>
<html>
  <head>
    <title>Смета расходов</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/themes/omega/theme.css" />
    <link rel="stylesheet" type="text/css" href="node_modules/font-awesome/css/font-awesome.min.css" />
    <link rel="stylesheet" type="text/css" href="node_modules/primeng/resources/primeng.min.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/reflect-metadata/Reflect.js"></script>
    <script src="node_modules/systemjs/dist/system.src.js"></script>
    <script src="systemjs.config.js"></script>
    <script>
      System.import('app').catch(function(err){ console.error(err); });
    </script>
  </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>
    • 0

相关问题