Question

我是网络开发的新手，我正在尝试制作一个firebase托管角网络应用。我使用angular-cli从Webstorm生成这个项目。

我有一个简单的角度网页应用，可以在加载时显示文字

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 { }

Answer 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工具窗口中切换到＆＃34;项目＆＃34;下拉列表中的选项。

Firebase服务与ng服务不会产生相同的结果

1 个答案: