在本教程中，将学习如何在Angular 9项目中导入HttpClient，以及如何生成构成用户界面的组件。
HttpClient是Angular内置的服务，但默认情况下不会包含在项目中，因此需要手动导入。
可以通过导入HttpClientModule并将其添加到想要使用的模块中来轻松完成此操作。在这一步中，只有一个模块——应用程序模块，因此将在该模块中导入HttpClient。
打开src/app/app.module.ts文件并更新如下：
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HttpClientModule } from '@angular/common/http';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
完成上述步骤后，就可以在应用程序中使用HttpClient发送HTTP请求了。
在现代前端框架中，需要使用组件来构建应用程序。组件是控制UI部分或完整视图的代码片段。
项目已经包含一个组件——App组件，它被称为根组件，是将添加到应用程序中的每个组件的父组件。
但是，需要更多的组件来显示应用程序的首页和关于视图。
由于在之前的命令行界面中启动了开发服务器，让它继续运行，并打开一个新的终端，然后运行以下命令：
$ cd ~/first-angular-app
$ ng generate component home
将获得一组文件，其中包含基本组件所需的代码：
src/app/home/home.component.htmlsrc/app/home/home.component.spec.tssrc/app/home/home.component.tssrc/app/home/home.component.css组件需要在模块中声明。会注意到首页组件已自动添加到Angular CLI的app模块中的declarations数组中。
现在如何查看这个组件呢（即使它几乎除了一些样板文本之外是空白的）？
有两种方法：
src/app/home/home.component.ts文件中的@Component装饰器的selector属性中找到它）。回到命令行界面并运行以下命令以生成关于组件：
$ ng generate component about
让也在该组件的模板中添加一些文本。打开src/app/about/about.component.html文件并添加以下HTML标记：
<p style="padding: 20px;">
第一个Angular 9应用程序！
</p>