Bdtjtk

I'm building an app with Angular 6, and now I want to serve it using ExpressJS.

For this, I went on to compile the app using ng serve --prod, but the app was not loading, as I was getting SyntaxError: expected expression, got '<' in the console.

I thought that maybe something was wrong with my app, but it was working fine with ng serve, so I tried with ng serve --prod, and everything worked flawlessly still.

Then I decided to try with just ng build (no --prod), and got the same error.

In GitHub issues I found some related stuff, but were specific to some packages and older versions of angular.

This is my package.json, in case it is relevant:

{

  "name": "mt",

  "version": "0.0.0",

  "scripts": {

    "ng": "ng",

    "start": "ng serve",

    "build": "ng build",

    "test": "ng test",

    "lint": "ng lint",

    "e2e": "ng e2e"

  },

  "private": true,

  "dependencies": {

    "@angular/animations": "^6.1.0",

    "@angular/cdk": "^6.4.7",

    "@angular/common": "^6.1.0",

    "@angular/compiler": "^6.1.0",

    "@angular/core": "^6.1.0",

    "@angular/forms": "^6.1.0",

    "@angular/http": "^6.1.0",

    "@angular/material": "^6.4.7",

    "@angular/platform-browser": "^6.1.0",

    "@angular/platform-browser-dynamic": "^6.1.0",

    "@angular/router": "^6.1.0",

    "core-js": "^2.5.4",

    "d3": "^5.7.0",

    "dateformat": "^3.0.3",

    "rxjs": "~6.2.0",

    "xlsx": "^0.14.1"

  },

  "devDependencies": {

    "@angular-devkit/build-angular": "~0.8.0",

    "@angular/cli": "~6.2.1",

    "@angular/compiler-cli": "^6.1.0",

    "@angular/language-service": "^6.1.0",

    "@types/jasmine": "~2.8.8",

    "@types/jasminewd2": "~2.0.3",

    "@types/node": "~8.9.4",

    "codelyzer": "~4.3.0",

    "jasmine-core": "~2.99.1",

    "jasmine-spec-reporter": "~4.2.1",

    "karma": "~3.0.0",

    "karma-chrome-launcher": "~2.2.0",

    "karma-coverage-istanbul-reporter": "~2.0.1",

    "karma-jasmine": "~1.1.2",

    "karma-jasmine-html-reporter": "^0.2.2",

    "protractor": "~5.4.0",

    "ts-node": "~7.0.0",

    "tslint": "~5.11.0",

    "typescript": "~2.9.2"

  }

}

I suposse the problem is not with my code per se, as the app is working fine with the ng serve command, with or without the --prod flag.

Any ideas on how to solve this issue?

EDIT: This is my express file to serve the app

const html = __dirname + '/dist/';

const port = 4200;

// Express

const bodyParser = require('body-parser');

const compression = require('compression');

const express = require('express');

var app = express();

app

    .use(compression())

    .use(bodyParser.json())

    // Static content

    .use(express.static(html))

    // Start server

    .listen(port, function () {

        console.log('Port: ' + port);

        console.log('Html: ' + html);

    });

app.get('*', function(req, res) {

  res.sendfile('./dist/mtloops-web-app/index.html');

});