Question

当我尝试将其部署在firbase上时，我的角度应用程序（6.0.0）遇到了问题。

它显示“始终为Firebase欢迎设置页面”。我阅读了所有已发布有相同问题的博客，并按照相同的指示进行操作。即使我已用dist文件夹index.html替换index.html文件，但仍无法呈现我的应用程序页面。我不知道此“ Firebase欢迎安装页面”来自何处。我花了将近2天的时间找到解决方案，但失败了。

在这方面您能帮忙吗？

谢谢

我的Project Json文件：-

{
  "name": "myproject",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^6.1.0",
    "@angular/common": "^6.1.0",
    "@angular/compiler": "^6.1.0",
    "@angular/core": "^6.1.0",
    "@angular/forms": "^6.1.0",
    "@angular/http": "^6.1.0",
    "@angular/platform-browser": "^6.1.0",
    "@angular/platform-browser-dynamic": "^6.1.0",
    "@angular/router": "^6.1.0",
    "@ng-bootstrap/ng-bootstrap": "^3.3.1",
    "angularfire2": "^5.0.0-rc.6",
    "bootstrap": "^4.1.3",
    "core-js": "^2.5.4",
    "firebase": "^4.12.1",
    "firebase-tools": "^5.1.1",
    "g": "^2.0.1",
    "ngx-bootstrap": "^3.0.1",
    "rxjs": "~6.2.0",
    "rxjs-compat": "^6.3.3",
    "zone.js": "~0.8.26"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.8.0",
    "@angular/cli": "~6.2.4",
    "@angular/compiler-cli": "^6.1.0",
    "@angular/language-service": "^6.1.0",
    "@types/jasmine": "~2.8.8",
    "@types/jasminewd2": "~2.0.3",
    "@types/node": "~8.9.4",
    "codelyzer": "~4.3.0",
    "jasmine-core": "~2.99.1",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~3.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~1.1.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.11.0",
    "typescript": "~2.9.2"
  }
}

**I just mention here my steps to deploy:-**

C:\Users\User\Desktop\hello-world>firebase login
Already logged in as subratamitra2011@gmail.com
C:\Users\User\Desktop\hello-world>firebase init

 ######## #### ########  ######## ########     ###     ######  ########
 ##        ##  ##     ## ##       ##     ##  ##   ##  ##       ##
 ######    ##  ########  ######   ########  #########  ######  ######
 ##        ##  ##    ##  ##       ##     ## ##     ##       ## ##
 ##       #### ##     ## ######## ########  ##     ##  ######  ########
You're about to initialize a Firebase project in this directory:
C:\Users\User\Desktop\hello-world
? Are you ready to proceed? Yes
? 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.
? Select a default Firebase project for this directory: helloworld-591c4 (helloworld)
i Using project helloworld-591c4 (helloworld)
=== 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)? No
+ Wrote dist/404.html
+ Wrote dist/index.html
i Writing configuration info to firebase.json...
i Writing project information to .firebaserc...
Firebase initialization complete!
C:\Users\User\Desktop\hello-world>ng build --prod
Date: 2018-10-22T04:10:50.394Z
Hash: d2fabf219965cc523f24
Time: 19752ms
chunk {0} runtime.ec2944dd8b20ec099bf3.js (runtime) 1.44 kB [entry] [rendered]
chunk {1} main.9127db5a4ec3dfb85364.js (main) 746 kB [initial] [rendered]
chunk {2} polyfills.9d02003b6ccac27ce6ad.js (polyfills) 64.3 kB [initial] [rendered]
chunk {3} styles.cc25d04069d157e07245.css (styles) 128 kB [initial] [rendered]
C:\Users\User\Desktop\hello-world>firebase deploy
=== Deploying to 'helloworld-591c4'...
i deploying hosting
i hosting[helloworld-591c4]: beginning deploy...
i hosting[helloworld-591c4]: found 9 files in dist
+ hosting[helloworld-591c4]: file upload complete
i hosting[helloworld-591c4]: finalizing version...
+ hosting[helloworld-591c4]: version finalized
i hosting[helloworld-591c4]: releasing new version...
+ hosting[helloworld-591c4]: release complete
Deploy complete!
Project Console: https://console.firebase.google.com/project/helloworld-591c4/overview
Hosting URL: https://helloworld-591c4.firebaseapp.com

现在使用该网址，由于以下原因，它显示默认页面：-

https://imgur.com/a/CnREqUQ

然后我用项目index.html更改dist / index.html并再次构建

这是我的项目Index.html：-https://imgur.com/a/rvvjIXZ

   

<!-- begin snippet: js hide: false console: true babel: false -->

DIST / MYPROJECT / INDEX.HTML                 https://imgur.com/a/LebwZ0h

现在我得到了一个包含该URL的空白页面。您能帮我找出我的错误吗？谢谢，带着敬意， Subrata Mitra`

Answer 1

当我使用firebase部署React项目（创建React App）时，我遇到了类似的问题。我遇到的问题是，当我最初设置firebase init时，我使用了Firebase提供的默认构建文件夹名称-/public。但是事实证明，每当我用来构建项目时，它都会构建到另一个文件夹/build中。因此，我再次运行了firebase init，这次是指定build文件夹。

因此，您可能要检查是否正确指定了要构建的文件夹。

此外，您还在部署之前build进行项目开发吗？

更新-如果您更喜欢使用dist作为构建文件夹，请以这种方式设置firebase。

再次运行firebase init。
在其中一个步骤中，它询问您是否要重命名构建文件夹。默认值为public。在这里，键入dist，然后按Enter。
完成其余firebase init个步骤。
再次构建您的项目。
运行firebase deploy。

现在尝试在终端的firebase提供的URL上运行您的网站。

Answer 2

在这种情况下，我的问题是“ firebase deploy”正在执行第一次初始化时按照指定的方式在公用文件夹中获取文件。但是，使用react时，您的静态站点将建立在另一个文件夹中（在我的情况下为“ build”）

因此，按照Rodiwa的帖子，您必须重新运行“ firebase init”并指定您需要上传的文件夹。

Answer 3

如果您的dist文件夹包含一个名称为您的应用程序的文件夹，请更改您的firebase.json：
"public": "dist",至"public": "dist/MyApp",

示例：
如果您的应用程序称为“ ShoppingList”。您的firebase.json必须看起来像这样：

{
 "hosting": {
  "public": "dist/ShoppingList",
  "ignore": [
   "firebase.json",
   "**/.*",
   "**/node_modules/**"
  ],
 "rewrites": [
   {
     "source": "**",
     "destination": "/index.html"
   }
  ]
 }
}

Firebase部署显示欢迎屏幕，没有任何应用内容Firebase部署显示

3 个答案: