个人中心
gpt4 book ai didi

node.js - Node/Express 与 Angular 2

转载 作者：太空宇宙 更新时间：2023-11-04 00:27:20 25 4
gpt4 key购买 nike

我正在尝试使用 MEAN 堆栈构建 ToDo 应用程序，但无法让 Express 服务器连接到 Angular 2。我相信这与我相对于 Angular 的 index.html View 的位置有关安装，但我不明白。

我收到的错误是index.html 上的HTML 正在呈现，但没有获取选择器背后的逻辑，所以我的假设是我的标签是错误的或其他什么。我尝试了各种方法来调整标签，但在运行 server.js 时无法使其工作。我知道这很愚蠢，但我已经为此工作了一段时间。

服务器.js

    var express = require('express');
    var path = require('path');
    var bodyParser = require('body-parser');

    var index = require('./routes/index');
    var todos = require('./routes/todos');

    var app = express();

    // View Engine
    app.set('views', path.join(__dirname, 'views'));
    app.set('view engine', 'ejs');
    app.engine('html', require('ejs').renderFile);

    app.use(express.static(path.join(__dirname,'client'))); //folder where angular will be

    app.use(bodyParser.json());
    app.use(bodyParser.urlencoded({extended: false}));

    app.use('/', index);
    app.use('/api/v1/', todos);

    app.listen(3000, function(){
        console.log('Server started on port 3000...');
    });

Index.html(在 Views 文件夹中)

<!DOCTYPE html>
<html>
  <head>
    <title>Angular QuickStart</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="src/styles.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>
    <my-app>Loading AppComponent FROM SERVER SIDE content here ...</my-app>
  </body>
</html>

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 { }

app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>`,
})
export class AppComponent  { name = 'Angular'; }

以下是我在控制台中遇到的两个错误:

GET http://localhost:3000/src/app/app.module 404 (Not Found) scheduleTask @ zone.js:1960 ZoneDelegate.scheduleTask @ zone.js:349

(404 Not Found) loading http:…pp.module" from http://localhost:3000/src/main.js", originalErr:

ZoneAwareError}

任何帮助将不胜感激，我无法克服这一点。

<小时/>

它不喜欢这一行中的引用以及在 zone.js 中的某个地方迷失，但我无法正确理解。我正在使用 angular.io 的入门工具包并使用它们的文件布局。

System.import('src/main.js').catch(function(err){ console.error(err); });

最佳答案

我可以通过向 Express 服务器添加两个静态路由来修复它，以便它在每个文件夹中查找。

app.use(express.static(path.join(__dirname, 'client')));    // folder where angular will be installed
app.use(express.static(path.join(__dirname, 'client', 'src')));
app.use(express.static(path.join(__dirname, 'client', 'src', 'app')));

这解决了问题。

关于node.js - Node/Express 与 Angular 2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42239218/

25 4 0
文章推荐： css - IE 问题 - 图像周围不需要的边距
文章推荐： python - 扫描数据帧的行以获取特定值
文章推荐： python - 在 Tensorflow 中堆叠不同长度的向量
文章推荐： node.js - 在Elasticsearch中使用nodejs创建索引时出错
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com