6. Сборка

Существует два режима сборки, соответствующих состоянию разработки:

1. Сборка для разработки с фиктивными данными (без доступа к серверу): ng build --configuration development-mock.
2. Сборка для разработки с использованием серверного API (доступ к реальным серверным API): ng build --configuration development-backend.

Если вам нужен тег <base href="/NiceFish/"/> в index.html выходного файла сборки, добавьте параметр --base-href /NiceFish/ к указанным выше командам.

Обратите внимание, что NiceFish — это название проекта; если вы изменили название проекта, замените NiceFish на собственное название проекта.

7. Прямое развёртывание в Nginx

1. Соберите конечный результат в соответствии с инструкциями предыдущего шага.
2. Установите Nginx и скопируйте всё содержимое из каталога dist/browser в каталог html Nginx.
3. Обратитесь к файлу конфигурации nginx.conf в корневом каталоге этого проекта и измените конфигурацию (конфигурация по умолчанию в этом проекте предназначена для сред Docker и не может использоваться на платформах Windows).
4. Перезапустите Nginx.

8. Развёртывание в среде Docker

Выполните следующие команды одну за другой (замените мой идентификатор платформы Docker на свой собственный):

1. Создайте образ: sudo docker build -t damoqiongqiu/nice-fish .
2. Просмотрите список образов: sudo docker images.
3. Запустите контейнер: sudo docker run -d -it -p 8080:80/tcp --name nice-fish damoqiongqiu/nice-fish:latest.
4. Просмотрите запущенные контейнеры: sudo docker ps -a.
5. Просмотрите журналы контейнера: docker logs --details CONTAINER_ID.
6. Войдите в контейнер: sudo docker exec -it CONTAINER_ID sh.

9. Анализ пакета

Ниже приведён анализ состава модулей с помощью webpack-bundle-analyzer:

.

Похоже, что CKEditor и ECharts занимают значительный объём пространства, указывая на необходимость асинхронной загрузки.

Чтобы использовать webpack-bundle-analyzer, выполните следующие действия:

1. npm i webpack-bundle-analyzer --save-dev.
2. Добавьте «bundle-report»: «webpack-bundle-analyzer dist/browser/stats.json» в раздел scripts файла package.json.
3. Скомпилируйте с помощью ng build --stats-json (опция --stats-json генерирует файл конфигурации stats.json).
4. Выполните npm run bundle-report, чтобы просмотреть процесс связывания.

10. Серия проектов

Название	Описание	Звёзды
NiceFish	Это интерфейс Angular версии, основанный на последней версии Angular и использующий библиотеку компонентов PrimeNG.
NiceFish-React	Это интерфейс React-версии, основанный на React 18.0.0, с использованием PrimeReact и настроенной версии Bootstrap для разработки. Только JSX, без TypeScript.

| |

Это мобильная демоверсия на основе ionic, проект поддерживает PWA.

nicefish-ionic

Это настольный проект на основе Electron, упаковывающий NiceFish как настольное приложение. Его предоставил коллега по фронтенду из корпорации ZTE, а я его разветвил. Номера версий некоторых узловых модулей необходимо часто обновлять, что делает его непригодным для использования.

|

Серверные проекты NiceFish:

Название	Описание	Звёзды
nicefish-spring-boot	Этот проект демонстрирует взаимодействие между фронтендом и бэкендом в режиме разделения фронтенда и бэкенда. Есть базовая версия, которую можно доработать под свой бизнес-сценарий.
nicefish-spring-cloud	Этот проект демонстрирует взаимодействие между фронтендом и распределёнными бэкенд-сервисами в режиме разделения фронтенда и бэкенда.

11. Common Pitfalls Regarding NodeJS Environment

• Китайские разработчики: использование cnpm для установки зависимостей может привести к несогласованности некоторых пакетов, что приведёт к невозможности запуска приложения. Эту проблему должна решить команда cnpm. (cnpm — это не просто ускоренный узел, он выполняет различные процессы, включая предварительное кэширование некоторых C++ Node-модулей, что может привести к несоответствию официальному источнику.)

— Если вы ранее установили @angular/cli, сначала удалите его: npm uninstall -g @angular/cli

— Если вы ранее установили более старую версию angular-cli, сначала удалите её: npm uninstall -g angular-cli

— Если вы уже пытались установить... Использование npm install для node modules: удаление каталога и повторная установка

1. Для ускорения процесса удаления node_modules из командной строки, выполните следующие действия:
   • На платформах Windows используйте команду rmdir /s/q node_modules.
   • На *nix платформах используйте sudo rm -rf node_modules.
2. Если вы столкнулись с другими загадочными проблемами, вручную удалите каталог node_modules, перейдите на официальный источник npm и переустановите все модули узлов.
3. При необходимости развернуть проект на других типах серверов, таких как Tomcat, необходимо выполнить простую настройку для поддержки режима маршрутизации PushState в HTML5. Соответствующие методы настройки для различных WEB-контейнеров можно найти по следующей ссылке: https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions. В разделе «Как настроить сервер для работы с html5Mode» представлены конфигурации для распространённых WEB-серверов (включая IIS, Apache, nginx, NodeJS, Tomcat и другие). Обратите внимание, что эта конфигурация не специфична для Angular; она требуется всем основным интерфейсным фреймворкам SPA.

12. Скриншоты

13. Ресурсы для обучения

• Если вам нужно микрофронтенд-решение на основе Angular, обратитесь к коду и методам настройки этого проекта: https://gitee.com/mumu-osc/module-federation-plugin-example.
• PPT и материалы, связанные с проектом: https://gitee.com/mumu-osc/NiceFish/attach_files.
• Здесь есть 93 статьи, которые предоставляют подробный анализ структуры и функциональности проекта: https://gitbook.cn/gitchat/column/5bebdaf22c33167c317cc285.

14. Лицензия

MIT

(Дополнительное заявление: вы можете свободно использовать этот проект, но я не несу ответственности за любые убытки, возникшие в результате использования этого проекта.)

(Автор этого проекта в настоящее время ищет новую работу. Если у вас есть хорошая возможность, пожалуйста, свяжитесь со мной в WeChat: lanxinshuma.)