angular度4组件不加载MEAN堆栈
在这里完成Angular / MEAN初学者 – 如果我对理解你的任何回答有困难，请提前抱歉。 最近，我尝试用MEAN堆栈创build一个Web应用程序，并使用angular-cli创build一个基本的项目结构（ ng new appName ）。 当运行npm start （使用angular-cli命令， ng serve ）而不对文件做任何修改时，一切都很顺利，默认的“Welcome to My App！” 页面呈现。
但是，一旦我创build了自己的server.js文件并将启动脚本更改为node start.js ，那么不再呈现<app-root></app-root>组件。 在控制台或npm start没有错误，所以我不太确定从哪里开始。
我查了一些论坛和一些用户说，错误的HTML可能是原因。 我将整个模板replace为“testing”，但没有任何东西会加载。 其他人说，我不得不包括在我的server.js文件中的静态path与app.use(express.static(path.join(__dirname, 'src'))); ，但我的组件仍然不会渲染。 我也注意到我的Typescript文件没有编译成Javascript，所以我照顾了这个问题，但没有效果。
我在想，我可能会缺less导入或呈现Angular组件的server.js文件中的东西，但我似乎无法find我的文件和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" } }
不要合并前端和后端，这会增加理解和pipe理的复杂性，将两个部分分别保存为web API，一个由ANGULAR-CLI和另一个NodeJs创build的angular色的一部分。
那么这将是容易理解和工作..
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] copy和过去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的公共目录中。
然后从terminal运行
node server.js OR nodemon server.js as you wish
注意
1.） 构build目录只会在应用后生成
[ng build] command.. of angular-cli
2.）还有其他的结构可以遵循，但是我更喜欢它，因为ANGULAR的基本path ，这是我个人的意见，不一样，你必须遵循与我的结构相同的结构。 你可以使用你喜欢的。
完全的目录结构
– 
谢谢，我希望它能帮助你。