Question

在这里完成Angular / MEAN初学者 - 如果我无法理解您的任何回复，请提前抱歉。最近，我尝试使用MEAN堆栈创建Web应用程序，并使用angular-cli创建基本项目结构（ng new appName）。当运行npm start（使用angular-cli命令，ng serve）而没有对文件进行任何更改时，一切都很顺利，并且默认为＃34;欢迎使用我的应用程序！＆＃34;页面呈现。

但是，一旦我创建了自己的server.js文件并将启动脚本更改为node start.js，就不再呈现<app-root></app-root>组件。控制台或npm start期间没有错误，所以我不确定从哪里开始。

我查了一些论坛，有些用户说错误的HTML可能是原因。我将整个模板替换为＆＃34; Testing＆＃34;，但没有任何内容会加载。其他人说我必须在我的server.js文件中包含app.use(express.static(path.join(__dirname, 'src')));的静态路径，但我的组件仍然无法呈现。我还注意到我的Typescript文件没有编译为Javascript，所以我处理了这个问题，但无济于事。

我在想我可能在我的server.js文件中遗漏了导入或渲染Angular组件的东西，但我似乎无法找到我的文件和Github上的样本之间的任何差异。我的server.js文件发布在下面，希望有比我更多经验的人可以发现我可能遗漏的内容。

＆＃13;

var express = require("express");
var bodyParser = require("body-parser");
var mongodb = require("mongodb");
var path = require("path");
var ObjectID = mongodb.ObjectID;

var api = require('./routes/api')

var app = express();

// Body Parser Middleware.
app.use(bodyParser.json());

app.use(express.static(path.join(__dirname, 'src')));

app.use('/api', api);

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'src/index.html'));
})

// Create a database variable outside of the database connection callback to reuse the connection pool in your app.
var db;

// Connect to the database before starting the application server.
mongodb.MongoClient.connect('the mongodb url goes here, but I have left it out for obvious security reasons', function (err, database) {
  if (err) {
    console.log(err);
    process.exit(1);
  }

  // Save database object from the callback for reuse.
  db = database;
  console.log("Database connection ready");

  // Initialize the app.
  var server = app.listen(process.env.PORT || 8080, function () {
    var port = server.address().port;
    console.log("App now running on port", port);
  });
});

＆＃13;

package.json如下：

＆＃13;

{
  "name": "mean-interact-angular2",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^4.0.0",
    "@angular/common": "^4.0.0",
    "@angular/compiler": "^4.0.0",
    "@angular/core": "^4.0.0",
    "@angular/forms": "^4.0.0",
    "@angular/http": "^4.0.0",
    "@angular/platform-browser": "^4.0.0",
    "@angular/platform-browser-dynamic": "^4.0.0",
    "@angular/router": "^4.0.0",
    "body-parser": "^1.17.2",
    "core-js": "^2.4.1",
    "express": "^4.15.3",
    "mongodb": "^2.2.28",
    "mongojs": "^2.4.0",
    "mongoose": "^4.10.5",
    "passport": "^0.3.2",
    "rxjs": "^5.1.0",
    "typescript": "^2.3.4",
    "zone.js": "^0.8.4"
  },
  "devDependencies": {
    "@angular/cli": "1.1.0",
    "@angular/compiler-cli": "^4.0.0",
    "@angular/language-service": "^4.0.0",
    "@types/jasmine": "2.5.45",
    "@types/node": "~6.0.60",
    "codelyzer": "~3.0.1",
    "jasmine-core": "~2.6.2",
    "jasmine-spec-reporter": "~4.1.0",
    "karma": "~1.7.0",
    "karma-chrome-launcher": "~2.1.1",
    "karma-cli": "~1.0.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "protractor": "~5.1.2",
    "ts-node": "~3.0.4",
    "tslint": "~5.3.2",
    "typescript": "~2.3.3"
  }
}

＆＃13;

Answer 1

不要合并前端和后端，这将增加理解和管理的复杂性，将两个部分分开保存，就像Web API一样，一个部分用于由ANGULAR-CLI创建的角度，另一个用于您的nodejs和express。

然后它将很容易理解和工作..

BACK-END目录结构..

例如：

1。）Server.js

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

app.use(express.static(path.join(__dirname, 'public')));
app.set('views', __dirname + '/views');
app.engine('html', require('ejs').renderFile);

app.get('*', (req, res) => {
    res.render('index.html');
})
app.listen(3000, () => {
    console.log('server started');
})

2.。）从angular-cli [ng-build]生成index.html 从 dist 目录复制并过去 index.html 到节点的视图目录

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>MahacelebrationFrontend</title>
    <base href="/">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="styles.4d731bc23993ad5ff6b1.bundle.css" rel="stylesheet" />
</head>

<body>
    <app-root>Loading...</app-root>
    <script type="text/javascript" src="inline.1e83bfad21d1a20819c7.bundle.js"></script>
    <script type="text/javascript" src="polyfills.2024f3f29aec2a67603a.bundle.js"></script>
    <script type="text/javascript" src="scripts.60ea08cac30c3ae8c3a5.bundle.js"></script>
    <script type="text/javascript" src="vendor.31125e334b44bf11507e.bundle.js"></script>
    <script type="text/javascript" src="main.6d7c8d757d6b638d29f5.bundle.js"></script>
</body>

</html>

3.）将所有其他生成的文件从ng-build保存到nodejs的公共目录中。

然后从终端

运行

node server.js OR nodemon server.js as you wish

注

1。）构建目录仅在应用

后生成

[ng build] command.. of angular-cli

2。）你可以遵循其他结构，但我更喜欢它，因为ANGULAR 基本路径，这是我个人的意见，不一定，你必须遵循与我相同的结构。你可以随意使用。

完整的目录结构

-

谢谢你，我希望它会对你有所帮助。

Answer 2

我遇到了同样的问题。
我发现您使用的路径是app.use(express.static(path.join(__dirname, 'src')));，这是错误的
当您使用ng build编译角度项目时，它将编译该项目并在dist文件夹中写入已编译的文件，在该文件夹中将生成新的已编译index.html。
运行ng build项目后，您将看到dist文件夹包含打字稿文件的已编译javascript文件。
您应该发送index.html文件夹中的这个dist作为响应，而不是index.html文件夹中的src。

所以您的代码将是这样

var express = require("express");
var bodyParser = require("body-parser");
var mongodb = require("mongodb");
var path = require("path");
var ObjectID = mongodb.ObjectID;

var api = require('./routes/api')

var app = express();

// Body Parser Middleware.
app.use(bodyParser.json());

app.use(express.static(path.join(__dirname, 'dist'))); // see the change in this line

app.use('/api', api);

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'dist/index.html'));}) // see the change in this line

// Create a database variable outside of the database connection callback to reuse the connection pool in your app.
var db;

// Connect to the database before starting the application server.
mongodb.MongoClient.connect('the mongodb url goes here, but I have left it out for obvious security reasons', function (err, database) {
  if (err) {
    console.log(err);
    process.exit(1);
  }

  // Save database object from the callback for reuse.
  db = database;
  console.log("Database connection ready");

  // Initialize the app.
  var server = app.listen(process.env.PORT || 8080, function () {
    var port = server.address().port;
    console.log("App now running on port", port);
  });
});

更改路径后，您的<app-root>组件将在浏览器中呈现。
另一个重要的一点是，app.use()应该将参数传递给已编译index.html的直接父文件夹的文件夹的，而不一定是dist文件夹，否则<app-root>组件将不会呈现。

Angular 4组件不会加载MEAN堆栈

2 个答案:

BACK-END目录结构..

注