Why is my Post List component not loading?

chatter publisher not showing
angular 8 component not rendering
app.component.html not displaying
angular component not showing
app-root not loading angular 8
chatter feed not showing up
cannot post to chatter
chatter feed not showing up in lightning

so as the question states, I have a component inside my post module, namely, PostList. What it is supposed to do is to load as soon as the user accesses the website. The code for it is as follows posts-list.component.css

section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px,1fr));
  grid-template-rows: auto;
  grid-gap: 10px;
  margin: 0 auto;
  max-width: 90%;
mat-card {
  margin: 10px 0;


  <mat-card *ngFor="let post of posts | async">
    <mat-card-content routerLink="{{post.id}}">
      <img mat-card-image src="{{post.image}}" alt="{{post.title}}">
        <small>Posted by {{post.author}} &bull; on {{post.published | date:"fullDate"}}</small>
    <mat-card-actions align="end" *ngIf="auth.currentUserId === post.authorId">
      <button mat-icon-button (click)="delete(post.id)">


import { Component, OnInit } from '@angular/core'
import { Observable } from 'rxjs/Observable'

import { PostService } from '../posts.service'
import { Post } from '../post'
import { AuthService } from '../../core/auth.service'

  selector: 'app-post-list',
  templateUrl: './post-list.component.html',
  styleUrls: ['./post-list.component.css']
export class PostListComponent implements OnInit {
  posts: Observable<Post[]>
  constructor(private postService: PostService, public auth: AuthService) {}

  ngOnInit() {
    this.posts = this.postService.getPosts()

  delete(id: string) {


Since it is inside a module, I have routed it to open as /blog in the post.module.ts

const routes: Routes = [

I cannot figure out why it isn't displaying on the website.

In the app.module.ts

const routes: Routes = [
  { path: '', redirectTo: '/blog', pathMatch: 'full'},
  { path: '', loadChildren: './posts/posts.module#PostsModule' },



import { Injectable } from '@angular/core'
import {
} from '@angular/fire/firestore'
import { Post } from './post'
import 'rxjs/add/operator/map'

export class PostService {
  postsCollection: AngularFirestoreCollection<Post>
  postDoc: AngularFirestoreDocument<Post>

  constructor(private afs: AngularFirestore) {
    this.postsCollection = this.afs.collection('posts', ref =>
      ref.orderBy('published', 'desc')

  getPosts() {
    return this.postsCollection.snapshotChanges().map(actions => {
      return actions.map(a => {
        const data = a.payload.doc.data() as Post
        const id = a.payload.doc.id
        return { id, ...data }

  getPostData(id: string) {
    this.postDoc = this.afs.doc<Post>(`posts/${id}`)
    return this.postDoc.valueChanges()

  getPost(id: string) {
    return this.afs.doc<Post>(`posts/${id}`)

  create(data: Post) {

  delete(id: string) {
    return this.getPost(id).delete()

  update(id: string, formData) {
    return this.getPost(id).update(formData)

Please guide me on what I am doing wrong. I just cannot figure it out.

I think you need to load your module differently in the app.module.ts

const routes: Routes = [{
  path: 'blog',
  loadChildren: () => import('./modules/posts/posts.module').then(m => m.PostsModule),
  path: '',
  redirectTo: '/blog',
  pathMatch: 'full'

Note: in Angular 8 and above, we use a different way of loading modules, the one you used: ./posts/posts.module#PostsModule is the old way, see Angular docs.

And change your post.module.ts routes to

const routes: Routes = [

Unable to Post in Chatter on Opportunity record Page, Chatter component on Lightning Page Layout on Opportunity doesn't contain the Chatter actions: Post/File/etc. As a result, our users are not� The POST (power on self-test) is a set of procedures that a computer runs through each time it is turned on. It ensures that all of the system's hardware is working properly before trying to load the operating system. If the computer does not pass POST, it will not boot.

Try like this

ngOnInit() {
    this.postService.getPosts().subscribe((response: any)=> {
      this.posts = response;

Record List 'View All' link does not load all records on the 'Object List , Lightning: When clicking on the "View All" link below the list of records in a Record List component the page does not appear to navigate to show the page with all� Yes, your slower-than-average page load speed may not be entirely your own fault. If you have tried correcting all the above-mentioned causes and yet your website seems to be responding slowly, then switching your hosting provider may just solve your problem.

this.postService.getPosts().subscribe((posts) => this.posts = posts);

Observables are lazy. Please subscribe to start them.

Why your Angular App is not Working: 11 common Mistakes , When your angular app is not working and all it gives you are some cryptic red lines in… By the way, that advice does not only apply to components or angular, but for any You can find the full list of methods at the official documentation. Never miss a post, by following me on twitter @malcoded. Playing with an API and building a simple dropdown selector in Vue, I am stuck as of why events of a component do not reach the parent. I have looked on the documentation, with no success.

    Change the 
 { path: '', redirectTo: '/blog', pathMatch: 'full'},
      { path: '', loadChildren: './posts/posts.module#PostsModule' }
      { path: 'blog', loadChildren: './posts/posts.module#PostsModule' }

    You can remove the { path: '', redirectTo: '/blog', pathMatch: 'full'} .
    Assuming the './posts' path is correct.
    When the route matches with /blog it checks in the postmodule routing 
     ,it checks with 
    const routes: Routes = [
    and serves the PostListComponent

More than four fields in Related List in Lightning Experience , Click Not Code..!!! The related list in Lightning Experience can have show only 4 fields as of now whereas In Lightning App Builder click on your related list Component, it will open properties pane in left hand side. Did you write your original post on Mach 26th and updated this week? Loading Reply. Angular NgModule - Ahead Of Time Compilation (AOT) And Lazy Loading Last Updated: 24 April 2020 local_offer Angular Core In this post, we are going to do an introduction to Angular Modularity (the NgModule functionality) and understand why it enables several important features like ahead of time compilation and lazy loading.

Adding a List of Markdown Blog Posts, The only thing left to do is to add the PostLink component. Create a new file post- link.js in src/components/ and add the following: import React from "react"� Since your computer powered on with only the essential hardware installed, those components must work properly. This means that one of the hardware components you removed is causing your PC to not turn on properly. By installing each device back into your PC and testing them each time, you'll eventually find the hardware that caused your problem.

FAQs, styled-components v5 does not introduce any breaking public API changes, Check out the official announcement post for more information and to learn to devDependencies and include it in the peerDependencies list in your package. json file: This may cause dynamic styles not working properly or even errors during� Trouble: We have received many problems from our readers over past few months over the problem that the computer does not boot. In some cases Windows does not load properly. Its really troublesome to be in such a situation when your computer is ill. As a matter of fact we have written a couple of posts which gives solution

Display a selection list, In this page, you'll expand the Tour of Heroes app to display a list of heroes, and allow users to select a When the user clicks a hero in the master list, the component should display the selected hero's The app seems to be working again. #Fetching Before Navigation. With this approach we fetch the data before actually navigating to the new route. We can perform the data fetching in the beforeRouteEnter guard in the incoming component, and only call next when the fetch is complete:

  • please subscribe to this.postService.getPosts() post service getPosts() method
  • Your routing is wrong, see angular.io/guide/…
  • what is the size of posts.?
  • Please post the code of PostService
  • Any error in console?
  • Since post dashboard component is inside the post module, it cannot be routed directly in the app.module.ts :(
  • Then, add that component to the post.module.ts instead, and add ‘dashboard’ as a separate path (makig it blog/dashboard) in the url. Remember to add it before the path with :id
  • Your answer was the most helpful, but unfortunately, it still does not work.
  • Firstly, is the page being displayed , I mean is it navigated to the desired page