Использовать угловой универсальный без Webpack

Как я могу использовать angular universal без связывания кода API с Webpack? Webpack чрезмерно усложняет внутренний код, который зависит от исходной настройки файловой системы.

Когда я просто использую tsc для компиляции приложения, оно не работает для импортированных файлов, которые не используют внедрение зависимостей. Есть ли команда Angular CLI, которая создает приложение для сервера без включения кода API? Я не смог найти ни одного.


webpack angular angular-universal express
person Ties    schedule 12.06.2020    source источник
comment
Я предполагаю, что вы пытаетесь настроить рендеринг на стороне сервера с помощью @nguniversal/express-engine. Какую бэкэнд-технологию вы используете? ASP.NET Core, express.js, Symphony?   -  person Pieterjan    schedule 12.06.2020
comment
Почему webpack связывает ваш код API при использовании универсального? С помощью angular веб-пакет объединяет только файлы, необходимые для запуска приложения, а не API. Разве вы не смешали все в своем проекте?   -  person David    schedule 12.06.2020
comment
@David, следуя руководству на angular.io, добавляет файл server.ts, который позволяет вам добавлять код API. Он упаковывает это в пакет Webpack.   -  person Ties    schedule 12.06.2020
comment
@Pieterjan Я использую экспресс, по большей части работает нормально. Но angular также объединяет код сервера, что не позволяет использовать fs.readdir, потому что больше нет структуры файловой системы.   -  person Ties    schedule 12.06.2020
comment
Разве вы не можете просто перенести свой API в другой проект? Или просто другой файл и скомпилировать его самостоятельно? В противном случае это может помочь: github.com/manfredsteyer/ngx-build-plus   -  person David    schedule 12.06.2020
comment
@ Дэвид, я могу использовать другой проект. Вы предлагаете использовать отдельный сервер для рендеринга на стороне сервера и API?   -  person Ties    schedule 12.06.2020
comment
Да, вы можете использовать отдельный сервер nodejs.   -  person David    schedule 12.06.2020
comment
Я знаю что могу. Но это немного перебор, чтобы иметь два сервера.   -  person Ties    schedule 12.06.2020
comment
Разделение процессов API и внешнего интерфейса обычно является хорошей практикой.   -  person David    schedule 13.06.2020
comment
Обслуживание страниц @David на самом деле не является интерфейсным процессом, верно? В файле server.ts по умолчанию есть место для кода API.   -  person Ties    schedule 13.06.2020
comment
В противном случае перепишите свой код, чтобы ваши fs.* вызовы работали. Хотя без кода сложно сказать   -  person David    schedule 13.06.2020
comment
Я бы хотел, но вызов fs.readdir находится в стороннем пакете для миграции баз данных, который загружает миграции из папки   -  person Ties    schedule 13.06.2020

Ответы (1)


arrow_upward
-1
arrow_downward

Я создал аналогичный проект шаблона, но с ядром ASP.NET: https://github.com/MintPlayer/MintPlayer.AspNetCore.SpaServices.Routing. Рабочее пошаговое руководство доступно по адресу https://medium.com/@pieterjandeclippel/server-side-rendering-in-asp-net-core-angular-update-705c0ec01931.

С бэкэндом Express.js вы сможете сделать что-то похожее на пошаговое руководство, единственное, что будет отличаться, — это код C#.

Что происходит после запуска команды ng add (это называется схема), ваше приложение angular получает main.server.ts, ваш angular.json соответствующим образом модифицируется, а ваш package.json получает несколько новых команд.

Далее, каждый раз, когда вы запускаете команду npm run build:ssr, cli создает новую сборку сервера для вашего приложения по адресу /dist/server/main.js (для angular, для react/vue этот путь будет другим). Ваша серверная технология должна вызывать этот файл сценария сервера, в моем случае я настроил это в своем Startup.cs, установив параметр BootModulePath. Для Express.js должно быть нечто подобное. Таким образом, ваша серверная сторона может вернуть ответ, обработанный на стороне сервера, при первом посещении.

Как указывали другие, вы должны строго разделить свой бэкэнд (api сервера express.js) и внешний интерфейс (ваше угловое приложение). Есть только одна ссылка, по которой вы указываете серверному приложению, где найти файл /dist/server/main.js.

person Pieterjan    schedule 12.06.2020
comment
Запуск ng add также добавляет файл server.ts, который представляет собой базовый экспресс-сервер, выполняющий рендеринг на стороне сервера. этот файл также содержит закомментированную строку, предлагающую добавить код для обработки /api запросов. Я пытался использовать это для этого проекта вместо добавления еще одного экспресс-проекта. Также пытаемся воспользоваться уже имеющимися инструментами сборки. Пока не повезло. Будет добавлен отдельный экспресс-сервер, как я делал в других проектах. - person Ties; 13.06.2020