Sharing Top Content from the Angular-sphere.

Creating a blog using Angular 5 and Firebase & Angular Universal – Part 1

Create a blog using Angular 5, Firebase & Angular Universal - 1

  • Repeat steps 1 and 2 – In the ‘New Typescript Class’ wizard, enter EditorRoutingModule as class name, file the content { NgModule } from ‘@angular/core’; – import { RouterModule, Routes } from ‘@angular/router’; – – import { EditorPostComponent } from { EditorPostsComponent } from editorRoutes: Routes = [ – { – path:…
  • An empty route will be redirected to /posts – EditorModule – Update the content { CommonModule } from ‘@angular/common’; – import { NgModule } from ‘@angular/core’; – import { FormsModule } from ‘@angular/forms’; – – import { EditorRoutingModule } from { EditorPostsComponent } from { EditorPostComponent } from imports: […
  • Reader Routing Module – Update the content { NgModule } from ‘@angular/core’; – import { RouterModule, Routes } from ‘@angular/router’; – – import { ReaderPostComponent } from { ReaderPostsComponent } from editorRoutes: Routes = [ – { – path: ‘post/:id’, – component: ReaderPostComponent – }, – { path: ”, -…
  • Reader Module – Update the content { CommonModule } from ‘@angular/common’; – import { NgModule } from ‘@angular/core’; – import { FormsModule } from ‘@angular/forms’; – – import { ReaderRoutingModule } from { ReaderPostsComponent } from { ReaderPostComponent } from imports: [ – CommonModule, – FormsModule, – ReaderRoutingModule, – ],…
  • Update the content { NgModule } from ‘@angular/core’; – import { RouterModule, Routes } from ‘@angular/router’; – – import { PageNotFoundComponent } from appRoutes: Routes = [ – { – path: ”, – loadChildren: }, – { – path: ‘editor’, – loadChildren: }, – { path: ‘**’, component: PageNotFoundComponent }…

In this, Article We will be creating a blog using Angular 5, Angular Universal, and Firebase Our app will allow for easy creation and publishing of blog posts.

We will be creating a blog using Angular 5, Angular universal and Firebase in a 2 part series. Our app will allow for easy creation and publishing of blog posts. A normal Angular application executes in the browser, rendering pages in the DOM in response to user actions. In order to improve the user experience, we want to render the pages server side and send the generated static content to the client side, this will ensure that our content is crawlable by search engines and also allow users with feature phones to consume our content.

The technology that allows us to run our Angular applications on the server is described in the Angular docs as Angular Universal. Angular pages on the server through a process called server-side rendering (SSR). It can generate and serve those pages in response to requests from browsers. It can also pre-generate pages as HTML files that you serve later.

New Angular Project

Open Angular IDE and from the top menu select File ,then New, then Angular Project. In the New Angular Project wizard, enter FireBlog as the project name, 1.6.4 as the Angular CLI version,8.9.4 as the node.js version and 5.6.0 as the npm version. Click Next then click Finish.

Angular IDE – New Project

Project Module Directories

Our project is a simple blog built with Angular, which will use FireBase for authentication and as a database. In this project we…

Creating a blog using Angular 5 and Firebase & Angular Universal – Part 1