Question

我正在尝试使用MEAN堆栈构建ToDo应用程序，但我无法让Express服务器连接到Angular 2.我相信它与我的index.html视图相关的位置有关Angular安装，但我无法弄清楚。

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

Server.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'; }

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

获取http://localhost:3000/src/app/app.module 404（未找到）   scheduleTask @ zone.js：1960 ZoneDelegate.scheduleTask @ zone.js：349

（404 Not Found）loading http：... pp.module＆＃34;从   http://localhost:3000/src/main.js＆＃34;，originalErr：


ZoneAwareError}

任何帮助都会非常感激，我无法理解。

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

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

Answer 1

我能够通过向Express服务器添加两条静态路由来修复它，以便查看每个文件夹。

ccall((:foo, :libbar), Void, (x::Int, y::Float))

这解决了这个问题。

Answer 2

我遇到了新版Quickstart的同样问题。它具有不同结构（添加了src文件夹）的事实会影响express的行为方式。在我的场景中，我没有改变这一部分。

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

相反，我将其保留为默认值（我相信角度处理在哪里寻找它）。

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

我又添加了一条静态路由。确保你有两个，其中一个是不够的。

    app.use(express.static(path.join(__dirname, 'client')));   
    app.use(express.static(path.join(__dirname, 'client/src')));

Answer 3

如果您正在关注TRAVERSY MEDIA :(原始来源是EDUONIX） https://www.youtube.com/watch?v=PFP0oXNNveg&t=2304s

创建'client'文件夹后。跳过整个JSON部件。

打开终端
git clone https://www.github.com/angular/quickstart client
npm install
npm start（这将为您提供角度前端的完整开始）
ctrl + C（关闭网络服务器）
npm run build

server.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.use(express.static( path.join(__dirname, 'client') ) );
app.use(express.static( path.join(__dirname, 'client/src')));
app.use(express.static( path.join(__dirname, 'client/bower_components')));

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



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');

/routes/index.js
var express = require('express');
var router = express.Router();

router.get('/', function(req, res, next) {
    res.render('index.html');
});

module.exports = router;

Last but not the least:
make sure this route would execute:
http://localhost:3000/api/v1/todos
yes? (you did it)

具有Angular 2的节点/快速

Server.js

Index.html（在Views文件夹中）

app.module.ts

3 个答案: