先在项目里添加一个格式化代码用的配置文件，在根目录的下面，新建一个 .prettierrc ，配置一下 singleQuote ，把它设置成 true，再把 trailingComma 的值设置成 all 。

在编辑器上可以安装一下 Prettier 这个插件，然后可以再配置一下编辑器，保存代码的时候自动格式化代码。

下面在项目里再去创建一个演示用的模块还有一个组件，在终端，项目所在目录的下面，执行 ng generate 生成一个 module，把它放在 pages 里面，名字叫 demo。后面再加上一个 --routing 选项，附带一个对应的路由模块。

ng generate module pages/demo --routing

然后再给这个模块生成一个组件，ng generate 生成一个 component ，放在 pages 里面，名字叫 demo。

路由

回到项目，打开 app, pages，demo 下面的 demo-routing 模块，在这个路由模块里，定义一条路由，放在 routes 里面，一个对象，路由的 path 是一个空白，路由的 component 是 DemoComponent 。

再打开 app-routing 模块，在应用的根路由模块里再定义一条路由，可以复制一份上面这个 welcome 路由，然后修改一下，路由的 path 是 demo，这是一个异步路由，导入的模块的位置是 pages，demo 下面的 demo.module，要导入的是 DemoModule 模块。 这条异步路由的作用就是访问这个 demo 地址的时候，才会加载需要的 DemoModule 模块的代码。

模板

打开 AppComponent 组件的模板文件，处理一下边栏菜单，修改一下这个 Form 项目，标题文字设置成 Demo，小图标可以使用 copy 。

它里面又嵌套了一个列表，这个列表项目的链接文字可以设置成 Basic，在这个 a 标签上用一下 routerLink 绑定的地址是 /demo 。

下面再清理一下上面的这两个菜单项目，只留下 Dashboard 还有它里面的这个 Welcome 菜单项目。

预览

回到浏览器可以预览一下，现在边栏上会出现一个 Demo 菜单，点击它里面的 Basic 访问的地址就是 demo，这样就会加载 DemoModule 模块，现在界面上主体这块显示的内容就是这个模块里的 DemoCompoennt 组件的视图。

在项目里可以找到这个模板文件，修改一下它里面的内容，再回到浏览器预览一下。你会发现界面上的内容会是我们修改之后的。