Невозможно отобразить статический HTML-код сборки Angular с узла

Question

Я хотел визуализировать статические файлы Angular с моего сервера узлов.

В качестве эксперимента ниже приведены шаги, которые я предпринял:

Создание папки dist путем создания моего проекта Angular с использованием

ng build --prod

Копирование папки dist вкорневой каталог сервера моего узла

Сконфигурированное экспресс-приложение на сервере моего узла для указания на index.html папки dist.Ниже приведены фрагменты кода конфигурации, который я написал -

app.use(express.static(path.join(__dirname, '../front-end/dist/')))

app.get('*', (req, res) => {
 return res.sendFile(path.join(__dirname, '../front-end/dist/my-first-app/index.html'))
})

Когда я запускаю свой сервер узлов локально на порту 3000. Если я прав, он должен быть перенаправлен на страницу index.html в скомпилированном угловом файле distпапка.Ну, я вижу попытку перенаправления, сделанную узлом.Однако после перенаправления браузер не может загрузить html в файле index.html.Выдает на консоль приведенную ниже ошибку -

Uncaught SyntaxError: Unexpected token <

Вышеуказанная ошибка ясно говорит о том, что браузер не смог загрузить html-страницу.Я верю, что мое понимание верно.Но я не могу понять, почему эта ошибка регистрируется.Я надеюсь, что я получу некоторые ответы здесь.

Я пытаюсь работать без команды Angular CLI ng serve.Если мне это удастся, я постараюсь попробовать это в облаке.Я хочу использовать только статические файлы, сгенерированные из сборки Angular, а не загружать их с помощью ng serve, а также отображать эти файлы в браузере из вызова с использованием узла.Поскольку внутренний сервер должен быть единственным работающим сервером, а внешний интерфейс должен быть не сервером, а скорее простыми статическими файлами, которые должны обслуживаться данными из первого.Надеюсь, я понял.

Answer 1

Попытайтесь обслужить статические файлы напрямую с помощью пути, например, / и запустите приложение через порт

app.use('/', express.static('pathToAngular/'));
app.listen(3000);

Тогда ваши статические файлы, а также угловые созданные файлы javascript будут обслуживаться подлокальный адрес

http://localhost:3000/

Чтобы угловые сгенерированные файлы javascript / html знали об их расположении (развернуть URL), убедитесь, что вы добавили ключ deployUrl в свой угловой.json file

"configurations": {
  "production": {
    "optimization": true,
    [...]
    "deployUrl": "http://localhost:3000/",
    "baseHref": "./"
  }
}

Не забудьте косую черту в конце, а также добавьте запись baseHref.В общем случае вы захотите создать другую конфигурацию с помощью локального URL-адреса для развертывания nodejs и добавить URL-адрес рабочего сервера в конфигурации production.