I am facing some issues trying to rendering my new ponent in the browser. I have created a new project using the Angular CLI. Also I created a ponent called list-employees.
When I execute ng serve -o, the project is piled 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 appponent.html:
<app-list-employees></app-list-employees>
and I put static HTML instead:
<p>Hello world</p>
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/mon": "~8.2.12",
"@angular/piler": "~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/piler-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 appponen.html when I call the list-employees ponent:
<body>
<app-root _nghost-xoo-c0="" ng-version="8.2.12">
<app-list-employees _ngcontent-xoo-c0="" _nghost-xoo-c1="">
<!--bindings={}-->
</app-list-employees>
</app-root>
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" type="module"></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>
</body>
UPDATED
Here the respective code:
list-employeesponent.ts
import { Component, OnInit } from '@angular/core';
import { Employee } from '../models/employee.model';
@Component({
selector: 'app-list-employees',
templateUrl: './list-employeesponent.html',
styleUrls: ['./list-employeesponent.css']
})
export class ListEmployeesComponent implements OnInit {
employee: Employee[] = [
{
id: 1,
name: 'Mark',
gender: 'Male',
contactPreference: 'Email',
email: '[email protected]',
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-employeesponent.html
<div class="panel panel-primary" *ngFor="let employee of employees">
<div class="panel-heading">
<h3 class="panel-title">{{employee.name}}</h3>
</div>
<div class="panel-body">
<div class="col-xs-10">
<div class="row vertical-align">
<div class="col-xs-4">
<img class="imageSize" [src]="employee.photoPath"/>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-6">
Gender:
</div>
<div class="col-xs-6">
{{employee.gender}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Birth of date:
</div>
<div class="col-xs-6">
{{employee.dateOfBirth | date}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Contact Preference:
</div>
<div class="col-xs-6">
{{employee.contactPreference}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Phone:
</div>
<div class="col-xs-6">
{{employee.phoneNumber}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Email:
</div>
<div class="col-xs-6">
{{employee.email}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Department:
</div>
<div class="col-xs-6">
{{employee.department}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Is active:
</div>
<div class="col-xs-6">
{{employee.isActive}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
appponent.html
<app-list-employees></app-list-employees>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './appponent';
import { ListEmployeesComponent } from './employees/list-employeesponent';
@NgModule({
declarations: [
AppComponent,
ListEmployeesComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
I am facing some issues trying to rendering my new ponent in the browser. I have created a new project using the Angular CLI. Also I created a ponent called list-employees.
When I execute ng serve -o, the project is piled 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.ponent.html:
<app-list-employees></app-list-employees>
and I put static HTML instead:
<p>Hello world</p>
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/mon": "~8.2.12",
"@angular/piler": "~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/piler-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.ponen.html when I call the list-employees ponent:
<body>
<app-root _nghost-xoo-c0="" ng-version="8.2.12">
<app-list-employees _ngcontent-xoo-c0="" _nghost-xoo-c1="">
<!--bindings={}-->
</app-list-employees>
</app-root>
<script src="runtime.js" type="module"></script>
<script src="polyfills.js" type="module"></script>
<script src="styles.js" type="module"></script>
<script src="vendor.js" type="module"></script>
<script src="main.js" type="module"></script>
</body>
UPDATED
Here the respective code:
list-employees.ponent.ts
import { Component, OnInit } from '@angular/core';
import { Employee } from '../models/employee.model';
@Component({
selector: 'app-list-employees',
templateUrl: './list-employees.ponent.html',
styleUrls: ['./list-employees.ponent.css']
})
export class ListEmployeesComponent implements OnInit {
employee: Employee[] = [
{
id: 1,
name: 'Mark',
gender: 'Male',
contactPreference: 'Email',
email: '[email protected]',
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.ponent.html
<div class="panel panel-primary" *ngFor="let employee of employees">
<div class="panel-heading">
<h3 class="panel-title">{{employee.name}}</h3>
</div>
<div class="panel-body">
<div class="col-xs-10">
<div class="row vertical-align">
<div class="col-xs-4">
<img class="imageSize" [src]="employee.photoPath"/>
</div>
<div class="col-xs-8">
<div class="row">
<div class="col-xs-6">
Gender:
</div>
<div class="col-xs-6">
{{employee.gender}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Birth of date:
</div>
<div class="col-xs-6">
{{employee.dateOfBirth | date}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Contact Preference:
</div>
<div class="col-xs-6">
{{employee.contactPreference}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Phone:
</div>
<div class="col-xs-6">
{{employee.phoneNumber}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Email:
</div>
<div class="col-xs-6">
{{employee.email}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Department:
</div>
<div class="col-xs-6">
{{employee.department}}
</div>
</div>
<div class="row">
<div class="col-xs-6">
Is active:
</div>
<div class="col-xs-6">
{{employee.isActive}}
</div>
</div>
</div>
</div>
</div>
</div>
</div>
app.ponent.html
<app-list-employees></app-list-employees>
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.ponent';
import { ListEmployeesComponent } from './employees/list-employees.ponent';
@NgModule({
declarations: [
AppComponent,
ListEmployeesComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
- You should probably include the code of the appModule, of the custom ponent, etc. Better yet, you could upload the code to StackBlitz: stackblitz./edit/angular Without that, it's really hard to guess what's going on. Things you should check: 1 have you the ListEmployees ponent declared in the App Module? 2 is the selector of the ListEmployeesComponent actually app-list-employees? 3 what is the html template of ListEmployeesComponent? I would guess that the child ponent is not properly resolved. – Alberto Chiesa Commented Oct 29, 2019 at 23:13
-
If you correctly declared the Component in your module - then I would suggest double checking the spelling of
app-list-employeesin your ponent. – Zze Commented Oct 29, 2019 at 23:25 - @A.Chiesa Thank you for your suggestion.I have added the respective code. – Daniel Commented Oct 29, 2019 at 23:29
1 Answer
Reset to default 4The 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.