Question

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

问题是，虽然我可以在本地提供页面时查看页面（在目录中提供服务），但是当我提供它或将其部署到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"
  }
}

我很难过。

Answer 1

分三个步骤解决！

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

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

<强> 1。记得创建一个构建（！）

$ cd/in/directory
$ ng build

这将在目录

中创建一个带有构建的dist文件

<强> 2。在angular-cli.json文件中，将app文件夹添加到资源

你会注意到在新的dist文件夹中，所有角度工作的app文件夹实际上并不在这里。这样做意味着它将在未来的版本中自动包含。

它应该在文件中看起来像这样：

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

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

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

如果您添加了像我在index.html中所做的角度标记，请注意在被询问时是否要将所有网址重定向到index.html（如果它是单页网页应用）时选择“N”。 Y表示使用Firebase模板写入整个文件。

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

<强>瞧

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

Angular 4 Firebase - HTML无法渲染/读取角度标记

1 个答案: