Angular 4 组件不使用 MEAN 堆栈加载答案

【问题标题】：Angular 4 components do not load with MEAN stackAngular 4 组件不使用 MEAN 堆栈加载
【发布时间】：2017-11-12 02:57:57
【问题描述】：

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

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

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

我在想我的 server.js 文件中可能缺少导入或呈现 Angular 组件的某些内容，但我似乎无法在 Github 上找到我的文件和示例之间的任何差异。我的 server.js 文件发布在下面，希望比我更有经验的人能发现我可能遗漏的内容。

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

package.json 如下：

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

【问题讨论】：

你能发布你的 package.json 文件吗
已将其添加到问题中。
你检查nodemon命令了吗

标签： node.js angular mean-stack

【解决方案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 复制并粘贴到节点的 view 目录

<!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.) build 目录只有在应用后才会生成

[ng build] command.. of angular-cli

2.) 您可以遵循其他结构，但我更喜欢它，因为 ANGULAR base path ，这是我的个人意见，它不像，你必须遵循与我相同的结构。你可以随意使用。

完整的目录结构

谢谢你，希望对你有帮助。

【讨论】：

【解决方案2】：

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

所以你的代码会是这样的

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> 组件将不会被渲染。李>

【讨论】：