Как правильно настроить Angular для производства на NodeJS Express Server?

Question

Я часами работал над выяснением того, как развернуть проект Angular 6 на сервере NodeJS Express,

Во-первых, в разработке я использую ng serve, который ссылается на localhost:4200 (по умолчанию), а другой - Node Express для API (взаимодействует с БД) на localhost:3000. В производственном процессе я хочу, чтобы сборка Angular обслуживалась и с этого сервера Node Express.

Итак, что я сделал:

1. Настройка <base href="/"> на index.html на Angular Project
2. Выполнить ng build --prod все прошло гладко, ошибок нет.
3. Скопируйте все файлы из dist/myprojectname в Angular в каталог сервера Node Express в views/.
4. В index.js я добавляю следующие строки app.use(express.static(path.join(__dirname, '/views/')));

получено сообщение об ошибке, подобное этому

Refused to apply style from 'http://localhost:3001/styles.a64e6aa0f6090e05d2190.css/' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.
3localhost/:16 GET http://localhost:3001/runtime.16a329deb1d564eef6599.js/ net::ERR_ABORTED 404 (Not Found)

Если я использую app.use('/*', express.static(path.join(__dirname, '/views/')));

выдаст следующую ошибку: Uncaught SyntaxError: Unexpected token <

Answer 1

Надеюсь, это поможет вам, это прекрасно сработало для меня. Важная часть кода ниже. Мое угловое приложение находится в ROOT_FOLDER / dist / index.html. Вы можете установить путь компиляции / вывода в angular.json (переменная - outputPath). Мои файлы express.js и package.json находятся только в корневой папке.

const bodyParser = require('body-parser');
const DIST_FOLDER = join(process.cwd(), 'dist');
const STARTING_SERVER_MSG = 'Running server on port %s';
const VIEW_ENGINE_STR = 'view engine';
const HTML_STR = 'html';
const VIEWS_STR = 'views';
const BROWSER_STR = 'browser';
  private routes() {
    // This part might be useless STRAT_LINK later
    this.app.set(VIEW_ENGINE_STR, HTML_STR);
    this.app.set(VIEWS_STR, join(DIST_FOLDER));
    this.app.use(express.static(join(DIST_FOLDER)));
    this.app.use(bodyParser.json());
    this.app.use(bodyParser.urlencoded({extended: false}));
    // this.app.use('/env', envRouter);
    // get router
    this.app.use(function (req, res, next) {
      res.sendFile(join(DIST_FOLDER,  'index.html'), {req});
    });
  }

Answer 2

Это похоже на эту проблему , вы уверены, что ваши CSS-файлы НЕ начинаются с комментариев?

Из ответа на связанный вопрос:

Проблема, я думаю, была с библиотекой CSS, начинающейся с комментариев. Находясь на dev, я не минимизирую файлы и не удаляю комментарии, это означало, что таблица стилей началась с некоторых комментариев, в результате чего рассматривается как нечто отличное от CSS.