Firebase serve 不会产生与 ng serve 相同的结果答案

【问题标题】：Firebase serve does not produce same result as ng serveFirebase serve 不会产生与 ng serve 相同的结果
【发布时间】：2017-06-10 03:16:45
【问题描述】：

我是 Web 开发的新手，正在尝试制作一个 Firebase 托管的 Angular Web 应用程序。我使用 angular-cli 从 Webstorm 生成这个项目。

我有一个简单的 Angular Web 应用程序，它在加载时显示文本

ng serve

它工作正常： working result

但是，当我加载完全相同的代码时

firebase serve

我明白了： not working result

据我所知，firebase 服务存在一些问题，即我的代码中没有将组件从 app.component.ts 连接到 html 标记 <app-root>。除此之外，我不知道发生了什么，并花了几天时间试图弄清楚。

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <!-- AngularJS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>

    <!-- AngularFire -->
    <script src="https://cdn.firebase.com/libs/angularfire/2.2.0/angularfire.min.js"></script>

  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>

  <script src="https://www.gstatic.com/firebasejs/3.6.7/firebase.js"></script>
  <script>
    // Initialize Firebase
    var config = {
      apiKey: "---",
      authDomain: "---",
      databaseURL: "---",
      storageBucket: "---",
      messagingSenderId: "---"
    };
    firebase.initializeApp(config);
  </script>

  <script>
    const myApp = angular.module("myApp", ['firebase']);
  </script>

</html>

app.component.ts

import { Component } from '@angular/core';
import {AngularFire, AuthProviders, AuthMethods, FirebaseListObservable} from 'angularfire2'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
  title = 'app works!';

  items: FirebaseListObservable<any>;

  constructor(public af: AngularFire) {}
}

app.component.html

<h1>
   {{title}}
</h1>

main.ts

import './polyfills.ts';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment.prod';
import { AppModule } from './app/app.module';
import { FIREBASE_PROVIDERS, defaultFirebase } from 'angularfire2';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule, [
  FIREBASE_PROVIDERS,
  defaultFirebase('https://<NAME-OF-MY-APP>.firebaseio.com')
]);

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { AngularFireModule } from 'angularfire2';

// Initialize Firebase
export const firebaseConfig = {
  apiKey: "---",
  authDomain: "---",
  databaseURL: "---",
  storageBucket: "---",
  messagingSenderId: "---"
}; 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AngularFireModule.initializeApp(firebaseConfig)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

【问题讨论】：

您是否在您的项目中运行了Firebase init？ firebase.google.com/docs/hosting/quickstart ?
是的，我还定义了我的公用文件夹等的 firebase.json 文件。我也可以成功部署我的应用程序，但是它没有按预期显示。
好吧，运行Firebase serve后在开发者工具栏中看到什么错误？
没有任何错误

标签： angular typescript firebase firebase-hosting

【解决方案1】：

我想通了……

我一直在部署我的 src 文件夹，而不是生成的 dist 文件夹。

对于没有意识到需要部署 dist 文件夹的任何人，请运行 ng build 来生成它。然后，无论您要部署您的网站，上传 dist 文件夹。

如果使用 firebase 进行部署，请将您的 firebase.json "hosting" 标签设置为：

{
  "database": {
    "rules": "database.rules.json"
  },
  "hosting": {
    "public": "dist"
  }
}

那么 Firebase 将始终部署您的 dist 文件夹，只需确保在您每次进行更改并想要部署该更改时运行 ng build。

如果您使用 Intellij 的 WebStorm 并且找不到您的 dist 文件夹，请在 Project 工具窗口中，切换到下拉菜单中的“项目”选项。

【讨论】：

你也可以运行ng build --watch来获得一些实时更新功能，虽然我还没有找到实时重新加载的方法。