首页 > 解决方案 > 无法在 Firebase 上托管我的 Angular 应用程序

问题描述

我正在尝试在 firebase 上部署我的应用程序,并按照所有步骤在 firebase 上部署应用程序,并且每件事都按预期工作,但是当我在 firebase URL 上浏览我的应用程序时,它在浏览器上显示以下消息。

在此处输入图像描述

部署应用程序时无法找到问题所在。

任何提示我该如何解决这个问题?

以下是我在 firebase 上分解时的日志:

MYMAC-M-34RS:WeatherDemo user$ ng build --prod
Date: 2018-04-27T09:49:07.120Z                                                          
Hash: ab47fb71fe9008d24831
Time: 39656ms
chunk {0} polyfills.b6b2cd0d4c472ac3ac12.bundle.js (polyfills) 59.7 kB [initial] [rendered]
chunk {1} main.a17f9a5eb0ac9ec8e538.bundle.js (main) 523 kB [initial] [rendered]
chunk {2} styles.8680ebdddce4fbcb4153.bundle.css (styles) 229 kB [initial] [rendered]
chunk {3} inline.318b50c57b4eba3d437b.bundle.js (inline) 796 bytes [entry] [rendered]
MYMAC-M-34RS:WeatherDemo user$ firebase login
Already logged in as mygmailId@gmail.com
MYMAC-M-34RS:WeatherDemo user$ firebase init

                  
                                           
                  
                                           
                           

You're about to initialize a Firebase project in this directory:

  /Volumes/DATA/Projects/experiments/Angular-5/Demo/WeatherDemo

Before we get started, keep in mind:

  * You are currently outside your home directory
  * You are initializing in an existing Firebase project directory

? Which Firebase CLI features do you want to setup for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites

=== Project Setup

First, let's associate this project directory with a Firebase project.
You can create multiple project aliases by running firebase use --add, 
but for now we'll just set up a default project.

i  .firebaserc already has a default project, skipping

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? File dist/index.html already exists. Overwrite? Yes
✔  Wrote dist/index.html

i  Writing configuration info to firebase.json...
i  Writing project information to .firebaserc...

✔  Firebase initialization complete!

MYMAC-M-34RS:WeatherDemo user$ firebase deploy

=== Deploying to 'alarm-6b7dc'...

i  deploying hosting
i  hosting: preparing dist directory for upload...
✔  hosting: 15 files uploaded successfully

✔  Deploy complete!

Project Console: https://console.firebase.google.com/xxx/xxx-6b7dc/overview
Hosting URL: https://xxx-6b7dc.firebaseapp.com
MYMAC-M-34RS:WeatherDemo user$ 

标签: angularfirebasefirebase-hosting

解决方案


您的项目创建(和初始部署)似乎一切正常。你得到的https://alarm-6b7dc.firebaseapp.com是默认index.html页面。您现在必须修改它index.html并添加与您的 Angular 应用程序对应的文件夹和文件。

您只需在找到 index.html 的同一文件夹中(在 Firebase 项目中;即在 下Projects/experiments/Angular-5/Demo/WeatherDemo/dist)从 Angular 复制您的分发文件夹。

然后用正确的命令重新部署,即firebase deploy

您可以查看 CLI 命令文档:https ://firebase.google.com/docs/cli/#deployment


推荐阅读