创建ABP Angular客户端（二）使用模板创建Angular前端

现在我们使用ABP CLI创建Angular客户端。

首先，进入控制台，创建一个空目录，进入这个目录，执行：

abp new ZL.Test -u angular

这里我们使用与上一个系列相同的项目名称ZL.Test，这样，生成的配置文件会与前一个项目基本类似。我们看一下生成的代码结构会发现客户端代码在angular目录中，服务端代码在aspnetcore目录中，由于我们已经有了服务端，所以可以删除服务端代码，仅保留客户端。

ABP Angular客户端推荐使用Visual Studio Code进行开发，所以我们使用Visual Studio Code打开angular目录，做一些修改，使这个项目可以与我们的服务端一起工作。

我们修改src/environments中的ts文件，使里面的配置与服务端相同：

import { Config } from '@abp/ng.core';

const baseUrl = 'http://localhost:4200';

export const environment = {

production: false,

application: {

baseUrl,

name: 'Test',

logoUrl: '',

},

oAuthConfig: {

issuer: 'https://localhost:44362',

redirectUri: baseUrl,

clientId: 'Test_App',

responseType: 'code',

scope: 'offline_access Test',

},

apis: {

default: {

url: 'https://localhost:44362',

rootNamespace: 'ZL.Test',

},

},

} as Config.Environment;

配置完成后，在控制台执行：

yarn

yarn start

会启动客户端。注意，启动客户端之前，需要先启动服务端。客户端启动后，在浏览器访问http://localhost:4200就可以了。我们可以使用admin用户登录测试一下功能。我们还不能访问poet相关的新功能，因为我们还没有为这个客户端增加新功能需要的界面。