【发布时间】：2019-10-30 07:36:54
【问题描述】：
我在尝试在浏览器中呈现我的新组件时遇到了一些问题。我使用 Angular CLI 创建了一个新项目。我还创建了一个名为 list-employees 的组件。
当我执行ng serve -o 时，项目编译成功，但浏览器没有显示任何内容（IE 和谷歌浏览器的空白页面）。甚至 Chrome 中的 Web 控制台也没有显示任何错误消息，而是打印 Angular is running in the development mode。调用 enableProdMode() 启用生产模式。
如果我更改 app.component.html 中的内容：
<app-list-employees></app-list-employees>
我用静态 HTML 代替：
<p>Hello world</p>
浏览器按预期显示内容。这对我来说似乎很奇怪，因为我没有收到任何错误。请你能帮我理解为什么会这样吗？
这里是package.json文件的内容：
{
"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"
}
}
这里是我调用 list-employees 组件时 app.componen.html 的输出：
<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>
更新
这里是相应的代码：
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
<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.component.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.component';
import { ListEmployeesComponent } from './employees/list-employees.component';
@NgModule({
declarations: [
AppComponent,
ListEmployeesComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
【问题讨论】：
-
您可能应该包含 appModule、自定义组件等的代码。更好的是，您可以将代码上传到 StackBlitz：stackblitz.com/edit/angular 没有它，真的很难猜测发生了什么.您应该检查的事项： 1 您是否在 App 模块中声明了 ListEmployees 组件？ 2 ListEmployeesComponent 的选择器实际上是app-list-employees 吗？ 3 ListEmployeesComponent的html模板是什么？我猜想子组件没有正确解析。
-
如果您在模块中正确声明了组件 - 那么我建议您仔细检查组件中
app-list-employees的拼写。 -
@A.Chiesa 谢谢你的建议。我已经添加了相应的代码。
标签： javascript angular angular-cli