Angular 4 Firebase - HTML 不呈现/读取角度标签答案

【问题标题】：Angular 4 Firebase - HTML not rendering / reading angular tagAngular 4 Firebase - HTML 不呈现/读取角度标签
【发布时间】：2018-03-05 20:30:30
【问题描述】：

我正在学习 Angular，并且有一个简单的项目（单页网页），通过 Firebase 链接并成功托管。

问题是，虽然我在本地提供页面时可以很好地查看页面（在目录中提供 ng 服务），但当我提供它或将其部署到 Firebase 时，它只呈现 HTML（而不是链接到的内容）角度分量）。

目录文件结构图： Hosting under src file, firebase.json file at the same level as angular-cli.json

index.html:

</head>

 <body>
  <h1>NORMAL HTML!</h1>
  <app-root></app-root>
  <h1>THERE SHOULD BE SOME STUFF ABOVE ME!</h1>

app.component.ts 是标准组件：

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'app works!';
}

app.component.html：

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

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 { RouterModule } from '@angular/router';

import { AppRoutingModule } from './app-routing.module';

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


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoutingModule,
    RouterModule,
  ],
  providers: [AppRoutingModule],
  bootstrap: [AppComponent]
})
export class AppModule { }

app-routing.module.ts:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

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

const routes: Routes = [
  {
    path: '',
    component: AppComponent,
    pathMatch: 'full'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: []
})
export class AppRoutingModule { }

main.ts:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { environment } from './environments/environment';
import { AppModule } from './app/app.module';

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

platformBrowserDynamic().bootstrapModule(AppModule);

firebase.json：

{
  "hosting": {
    "public": "src"
  }
}

.firebaserc：

{
  "projects": {
    "default": "alicespyglass-tinker"
  }
}

我被难住了。

【问题讨论】：

标签： angular firebase

【解决方案1】：

分三步解决！

（假设项目使用 angular-cli 构建）

组件不是问题。解决方案是了解 Angular 生成其构建的方式以及 Firebase 如何设置其服务/部署。

1.记得创建一个构建（！）

$ cd/in/directory
$ ng build

这将在目录中创建一个包含 build 的 dist 文件

2。在 angular-cli.json 文件中，将 app 文件夹添加到 assets

您会在新的 dist 文件夹中注意到包含您所有 Angular 工作的 app 文件夹实际上并不在这里。这样做意味着它会自动包含在未来的构建中。

在文件中应该是这样的：

"assets": [
        "app",
        "assets",
        "favicon.ico"
      ]

添加此内容后，您需要再次创建构建。

3.在命令行中设置 Firebase 托管时将“dist”设置为公共目录

如果您像我在 index.html 中那样添加了 angular 标签，请注意在询问您是否要将所有 url 重定向到 index.html（如果它是单页 Web 应用程序）时选择“N”。 Y 表示使用 Firebase 模板覆盖整个文件。

这是一个很好的演练，通常用于快速启动和运行项目（只是缺少第 2 步）： https://coryrylan.com/blog/deploy-angular-cli-apps-to-firebase

瞧

现在，当您运行 firebase serve 或 firebase deploy 时，您将能够看到 Angular 组件。

【讨论】：