Angular 4 components do not load with MEAN stack - node.js

Question

complete Angular/MEAN beginner here - sorry in advance if I have trouble understanding any of your responses. Recently, I tried creating a web application with the MEAN stack and I used the angular-cli to create a basic project structure (ng new appName). When running npm start (which used the angular-cli command, ng serve) without any changes to the files, everything went just fine and the default "Welcome to My App!" page rendered.
But once I created my own server.js file and changed the start script to node start.js, the <app-root></app-root> component no longer rendered. There were no errors in the console or during npm start, so I wasn't quite sure where to begin.
I checked on some forums and some users said that faulty HTML could be the reason. I replaced the entire template to simply "Testing", and yet nothing would load. Others said that I had to include the static path in my server.js file with app.use(express.static(path.join(__dirname, 'src')));, but my components still would not render. I also noticed my Typescript files were not compiling to Javascript so I took care of that issue, but no avail.
I was thinking that I may be missing something in my server.js file that imports or renders the Angular components, but I can't seem to find any discrepancies between my file and samples on Github. My server.js file is posted below and hopefully someone with more experience than me can spot out what I may be missing.
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 below:
{
"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"
}
}

Answer 1

Don't merge front-end and back-end it will increase the complexity of understanding and managing , keep both part separately like web API,
one part for your angular created by ANGULAR-CLI and another your nodejs and express.
Then it will be easy to understand and work on..
BACK-END directory structure..
Example:
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.) generated index.html from angular-cli [ng-build]
copy and past index.html from dist directory to the view directory of node
<!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.) Keep all other generated files from ng-build into the public directory of nodejs.
and then run from the terminal
node server.js OR nodemon server.js as you wish
NOTE
1.) build directory will generate only after applying
[ng build] command.. of angular-cli
2.) There are other structure you can follow but I prefer it because of ANGULAR base path ,
This is my personal opinion , it not like, you have to follow same structure as mine. you can use as you like.
COMPELETE DIRECTORY STRUCTURE
-
Thank you ,
I hope it will help you.

Answer 2

I had the same problem.
I see that the path you are using is app.use(express.static(path.join(__dirname, 'src'))); which is wrong
When you compile angular project with ng build it compiles the project and writes compiled files in dist folder where a new compiled index.html will be built.
After running the ng build project you will see that dist folder contains the compiled javascript files of the typescript files.
You should send this index.html present in dist folder as a response and not the index.html in src folder.
So your code will be like this
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);
});
});
After making the path changes your <app-root> component will be rendered in the browser.
Another important point is that app.use() should take the argument to the of the folder which is the immediate parent folder of compiled index.html and not necessarily dist folder otherwise <app-root> component will not be rendered.