Angular 4 Firebase - HTML not rendering / reading angular tag

Question

I'm learning Angular and have a simple project (single page web), linked up and successfully hosted through Firebase.

The problem is, although I can view the page fine when I serve it locally (ng serve in the directory), when I serve it or deploy it to Firebase, it then only renders the HTML (and not the content linked to the angular component).

Photo of directory file structure: 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 is a standard component:

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

I'm stumped.

Alicespyglass Alicespyglass · Accepted Answer · 2017-09-26T21:45:00

Solved in 3 steps!

(assuming project built using angular-cli)

The components weren't the issue. Solution is in understanding the way Angular generates its build and how Firebase sets up its serve/ deployment.

1. Remember to create a build(!)

$ cd/in/directory
$ ng build

This will create a dist file with the build in the directory

2. In the angular-cli.json file, add the app folder to assets

You'll notice in the new dist folder that the app folder with all your angular work isn't actually here. Doing this will mean it gets included automatically in future builds.

It should look something like this in the file:

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

You'll want to create a build again after adding this.

3. Set 'dist' as the public directory when setting up Firebase hosting in the command line

If you've added angular tags like I did in index.html, note to select 'N' when asked whether you want to redirect all urls to index.html if it's a single page web app. Y means the whole file is written over with a Firebase template.

This is a good walkthrough generally for getting a quick project up and running (just missing step 2): https://coryrylan.com/blog/deploy-angular-cli-apps-to-firebase

Voila

Now when you run firebase serve or firebase deploy, you'll be able to see the Angular components.

Angular 4 Firebase - HTML not rendering / reading angular tag

1 Answers