Как развернуть одностраничное веб-приложение Angular 18 в Firebase?

ОБНОВЛЯТЬ: Я создал новый проект Angular и выполнил те же шаги по развертыванию, что и ниже, ничего не меняя. Это просто код по умолчанию для совершенно нового проекта.

Затем я попытался развернуть его и получил те же ошибки, что и ниже. ng deploy вообще ничего не делает, если я не выбираю какие-либо функции для добавления. Это не может быть правильно, не так ли?

Что мне не хватает? Все это моя первая попытка использовать Angular, и я намеренно не делал никакой глобальной настройки, но могу ли я сделать что-нибудь, что могло бы объяснить все это?

Я полностью открыт для использования чего-то другого, кроме Firebase, если это может помочь мне здесь застрять.



У меня есть одностраничное веб-приложение Angular 18, которое работает локально, и я хочу развернуть его в Firebase.

Я создал учетную запись Firebase и проект там.

Затем:

npm install -g firebase-tools

Затем:

ng add @angular/fire

Вот тут-то это и сбивает с толку. Я получил:

% ng add @angular/fire
Skipping installation: Package already installed
UPDATE package.json (1137 bytes)
✔ Packages installed successfully.
? What features would you like to setup? (Press <space> to select, <a> to toggle
 all, <i> to invert selection, and <enter> to proceed)
❯◯ Authentication
 ◯ Google Analytics
 ◯ App Check
 ◯ Firestore
 ◯ Realtime Database
 ◯ Cloud Functions (callable)
 ◯ Cloud Messaging
(Move up and down to reveal more choices)

И если я нажму «Возврат» (поскольку мне ничего из этого не нужно), я немедленно вернусь к приглашению оболочки. Ничего не произошло.

Если я выберу «Google Analytics», а затем нажму «Возврат», мне будет предложено выбрать мою учетную запись Firebase (с предупреждением об устаревании «punycode»), затем «Пожалуйста, выберите проект», что я и делаю, затем «Пожалуйста, выберите приложение: ".

Если я выберу приложение, созданное через консоль Firebase, оно завершится следующим образом:

Downloading configuration data of your Firebase WEB app
UPDATE src/app/app.config.ts (2989 bytes)

Но если что-то и произошло на Firebase, я этого не вижу. Я просто не там ищу?

Если вместо этого я выберу «[СОЗДАТЬ НОВОЕ ПРИЛОЖЕНИЕ]» и дам ему имя, оно завершится, и новое приложение появится в Firebase, но что тогда?

После выполнения всего вышеперечисленного я могу попробовать ng deploy, но даже несмотря на то, что ng add @angular/fire выполнено без ошибок, я получаю следующее:

Cannot find "deploy" target for the specified project.
You can add a package that implements these capabilities.

For example:
  Amazon S3: ng add @jefiozie/ngx-aws-deploy
  Firebase: ng add @angular/fire
  Netlify: ng add @netlify-builder/deploy
  GitHub Pages: ng add angular-cli-ghpages

Would you like to add a package with "deploy" capabilities now? (Use arrow keys)
❯ No
  Amazon S3
  Firebase
  Netlify
  GitHub Pages

И с этого момента все то же самое, что и выше. Он немедленно возвращается к подсказке, если я не выбираю какие-либо функции из списка, и если я это делаю, все завершается, как описано выше.

Что мне не хватает?

Пробовали ли вы использовать ng deploy и выбрать Firebase, не добавляя предварительно пакет @angular/fire? Схема должна установить его для вас

davidlj95 30.07.2024 02:28

Я не знаю, как это попробовать, так как я уже это сделал ng add @angular/fire и не вижу способа удалить это. Как упоминалось выше, если я сделаю ng deploy сейчас, он скажет Cannot find "deploy" target for the specified project и попросит меня добавить пакет, а после выбора Firebase все остальное будет таким же, как если бы я попробовал ng add @angular/fire еще раз.

dxj 30.07.2024 02:35

Вы можете отменить изменения в сгенерированных файлах, кажется, это всего лишь src/app/app.config.ts. Тогда, npm uninstall @angular/fire. И повторите попытку, нажав ng deploy + выбрав Firebase.

davidlj95 30.07.2024 02:39

Я удалил и вернул app.config.ts. ng deploy нашел и установил ``` @angular/[email protected]``` и дальше все так же, как и раньше. Если я не выбираю какие-либо функции, он немедленно закрывается, насколько я могу судить, ничего не делая. Если я попробую еще раз и выберу «Google Analytics», просто чтобы выбрать один, мне будет предложено выбрать мою учетную запись Firebase и т. д. Я выбрал [CREATE NEW APP] и увижу новое приложение на своей консоли Firebase. Все это то же самое, что и раньше. Это успешно, и я просто упускаю что-то очевидное относительно того, что делать дальше?

dxj 30.07.2024 02:50

Хорошо, просто сделал то же самое и воспроизвел проблему. Команда завершается с ошибкой « ELIFECYCLE  Не удалось выполнить команду с кодом выхода 1». после шага «✔ Загрузка данных конфигурации вашего веб-приложения Firebase», как указано в вашем сообщении. Похоже на проблему. На самом деле кто-то сообщил об этом в своем репозитории: github.com/angular/angularfire/issues/3546 Только что добавил комментарий с дополнительной информацией.

davidlj95 30.07.2024 16:17

Облом. Если вы хотите опубликовать это в качестве ответа, я одобрю это.

dxj 30.07.2024 19:03

Шум! я опубликую это тогда

davidlj95 30.07.2024 21:39
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
2
7
72
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Просто выполнил ваши действия и да, удалось воспроизвести ошибку в чистом приложении и учетной записи Firebase.

Кажется есть проблема с @angular/fire относительно инициализации развертывания приложений Angular с помощью ng Deploy. Добавлена ​​дополнительная информация, которая поможет команде найти решение.

Надеюсь, скоро это исправят 🤞🍀

Другие вопросы по теме