Angular 4 components do not load with MEAN stack

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

• 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.

Answer 2

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.