Angular app.component.html is not rendering new component

Question

I am facing some issues trying to rendering my new component in the browser. I have created a new project using the Angular CLI. Also I created a component called list-employees.

When I execute ng serve -o, the project is compiled succesfully but the browser does not show anything (blank page both IE and Google Chrome). Even the web console in Chrome does not show any error message, instead prints Angular is running in the development mode. Call enableProdMode() to enable the production mode.

If I change content in the app.component.html:

and I put static HTML instead:

Hello world

the browser shows the content as expected. This seems weird to me because I am not getting any error. Please can you help me to understand why is this happening?

Here the content of package.json file:

{
  "name": "crud",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.12",
    "@angular/common": "~8.2.12",
    "@angular/compiler": "~8.2.12",
    "@angular/core": "~8.2.12",
    "@angular/forms": "~8.2.12",
    "@angular/platform-browser": "~8.2.12",
    "@angular/platform-browser-dynamic": "~8.2.12",
    "@angular/router": "~8.2.12",
    "bootstrap": "^3.4.1",
    "rxjs": "~6.4.0",
    "tslib": "^1.10.0",
    "zone.js": "~0.9.1"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.803.15",
    "@angular/cli": "~8.3.15",
    "@angular/compiler-cli": "~8.2.12",
    "@angular/language-service": "~8.2.12",
    "@types/node": "~8.9.4",
    "@types/jasmine": "~3.3.8",
    "@types/jasminewd2": "~2.0.3",
    "codelyzer": "^5.0.0",
    "jasmine-core": "~3.4.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~4.1.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "~2.0.1",
    "karma-jasmine": "~2.0.1",
    "karma-jasmine-html-reporter": "^1.4.0",
    "protractor": "~5.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~5.15.0",
    "typescript": "~3.5.3"
  }
}

And here the output from app.componen.html when I call the list-employees component:

UPDATED

Here the respective code:

list-employees.component.ts

import { Component, OnInit } from '@angular/core';
import { Employee } from '../models/employee.model';

@Component({
  selector: 'app-list-employees',
  templateUrl: './list-employees.component.html',
  styleUrls: ['./list-employees.component.css']
})
export class ListEmployeesComponent implements OnInit {

  employee: Employee[] = [
    {
      id: 1,
      name: 'Mark',
      gender: 'Male',
      contactPreference: 'Email',
      email: 'mark@pragimtech.com',
      dateOfBirth: new Date('10/25/1988'),
      department: 'IT',
      isActive: true,
      photoPath: 'assets/images/mark.png'
    },
    {
      id: 2,
      name: 'Mary',
      gender: 'Female',
      contactPreference: 'Phone',
      phoneNumber: '2345978640',
      dateOfBirth: new Date('11/20/1979'),
      department: 'HR',
      isActive: true,
      photoPath: 'assets/images/mary.png'
    },
    {
      id: 3,
      name: 'John',
      gender: 'Male',
      contactPreference: 'Phone',
      phoneNumber: '5432978640',
      dateOfBirth: new Date('3/25/1976'),
      department: 'IT',
      isActive: false,
      photoPath: 'assets/images/john.png'
    },
  ];

  constructor() { }

  ngOnInit() {
  }

}

list-employees.component.html


    
        {{employee.name}}
    
    
        
            
                
                    
                
                

                    
                        
                            Gender:
                        
                        
                            {{employee.gender}}
                        
                    
                    
                        
                            Birth of date:
                        
                        
                            {{employee.dateOfBirth | date}}
                        
                    
                    
                        
                          Contact Preference:
                        
                        
                          {{employee.contactPreference}}
                        
                    
                    
                        
                          Phone:
                        
                        
                          {{employee.phoneNumber}}
                        
                    
                    
                        
                          Email:
                        
                        
                          {{employee.email}}
                        
                    
                    
                        
                            Department:
                        
                        
                            {{employee.department}}
                        
                    
                    
                        
                            Is active:
                        
                        
                            {{employee.isActive}}

app.component.html

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ListEmployeesComponent } from './employees/list-employees.component';

@NgModule({
  declarations: [
    AppComponent,
    ListEmployeesComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Alberto Chiesa · Accepted Answer

The problem is that in ListEmployeesComponent you are cycling the employees property, which doesn't exist.

Instead, there is a wrongly named employee (without s) property, containing the array.

I would suggest installing the Angular Language Service plugin (if it's available in your text editor, I use VS Code), that would catch that kind of error underlining the offending line in red.

Angular app.component.html is not rendering new component

Answers (1)

Related Questions