SyntaxError: Unexpected token < : using angular 2 and webpack on heroku答案

【问题标题】：SyntaxError: Unexpected token < : using angular 2 and webpack on herokuSyntaxError: Unexpected token < : using angular 2 and webpack on heroku
【发布时间】：2017-06-07 10:50:01
【问题描述】：

我确实按照本教程 Angular CLI Deployment: Host Your Angular 2 App on Heroku 进行了操作，并且每个步骤似乎都有效，但在 heroku 部署页面后我遇到了错误。

我的错误是

Uncaught SyntaxError: Unexpected token <

页面加载后我收到此错误。这是部署在 Heroku 上的 my page。

这是我的 server.js 文件。

// server.js
const express = require('express');
const path = require('path');
const favicon = require('serve-favicon');
const logger = require('morgan');
const cookieParser = require('cookie-parser');
const app = express();

// If an incoming request uses
// a protocol other than HTTPS,
// redirect that request to the
// same url but with HTTPS
const forceSSL = function() {
  return function(req, res, next) {
    if (req.headers['x-forwarded-proto'] !== 'https') {
      return res.redirect(
        ['https://', req.get('Host'), req.url].join('')
      );
    }
    next();
  }
};

// Instruct the app
// to use the forceSSL
// middleware
//app.use(forceSSL());

// For all GET requests, send back index.html
// so that PathLocationStrategy can be used
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/index.html'));
});

// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));
// Start the app by listening on the default
// Heroku port
app.listen(process.env.PORT || 4200);

最后是我的 package.json

{
  "name": "angular-cli-example",
  "version": "0.0.0",
  "license": "MIT",
  "angular-cli": {},
  "scripts": {
    "ng": "ng",
    "start": "node server.js",
    "lint": "tslint \"src/**/*.ts\" --project src/tsconfig.json --type-check && tslint \"e2e/**/*.ts\" --project e2e/tsconfig.json --type-check",
    "test": "ng test",
    "pree2e": "webdriver-manager update --standalone false --gecko false",
    "e2e": "protractor",
    "postinstall": "ng build --aot -prod",
    "deploy": "git push origin master && git push heroku master"
  },
  "private": true,
  "dependencies": {
    "@angular/common": "^2.3.1",
    "@angular/compiler": "^2.3.1",
    "@angular/core": "^2.3.1",
    "@angular/forms": "^2.3.1",
    "@angular/http": "^2.3.1",
    "@angular/platform-browser": "^2.3.1",
    "@angular/platform-browser-dynamic": "^2.3.1",
    "@angular/router": "^3.3.1",
    "angular-cli": "^1.0.0-beta.25.5",
    "body-parser": "~1.15.2",
    "cookie-parser": "~1.4.3",
    "debug": "~2.2.0",
    "core-js": "^2.4.1",
    "express": "^4.14.0",
    "rxjs": "^5.0.1",
    "ts-helpers": "^1.1.1",
    "zone.js": "^0.7.2",
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3",
    "serve-favicon": "~2.3.0",
    "morgan": "~1.7.0"
  },
  "devDependencies": {
    "@angular/compiler-cli": "^2.3.1",
    "@types/jasmine": "2.5.38",
    "@types/node": "^6.0.42",
    "angular-cli": "1.0.0-beta.25.5",
    "codelyzer": "~2.0.0-beta.1",
    "jasmine-core": "2.5.2",
    "jasmine-spec-reporter": "2.5.0",
    "karma": "1.2.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-remap-istanbul": "^0.2.1",
    "protractor": "~4.0.13",
    "ts-node": "1.2.1",
    "tslint": "^4.3.0",
    "typescript": "~2.0.3"
  },
  "engines": {
    "node": "6.9.2",
    "npm": "3.10.9"
  }
}

【问题讨论】：

我们这里的标题中没有“SOLVED”。如果您回答了自己的问题，您可以发布答案并接受，或删除问题。
谢谢 ;) 我不知道。

标签： javascript angular express heroku webpack

【解决方案1】：

像这样更改 server.js 文件中的序列，它将起作用:-) …

// Run the app by serving the static files
// in the dist directory
app.use(express.static(__dirname + '/dist'));

// For all GET requests, send back index.html
// so that PathLocationStrategy can be used
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/index.html'));
});

…

【讨论】：

【解决方案2】：

解决方案：我的错误是在我添加以下代码时。出于任何原因，我无法收听对 index.html 的所有 /* 请求。它会在 Webpack 包中生成错误。

// For all GET requests, send back index.html
// so that PathLocationStrategy can be used
app.get('/*', function(req, res) {
  res.sendFile(path.join(__dirname + '/dist/index.html'));
});

这是 Github 上的 repo :) => https://github.com/codesandtags/angular2-webpack-heroku

【讨论】：