那么打开调试器，我们就能从dom节点上看清楚，router-outlet的嵌套关系：
目录结构
再看下src的目录结构，component文件夹是存放一些公共的组件，login和main组件是注册的一级路由，home和另一个马赛克组件是注册为main的二级路由，实际后面会注册很多组件到main下，但是他们的文件夹划分都是同级。
使用hash路由
RouterModule.forRoot(routes, { useHash: true });使用hash路由，后端不用修改配置，这样比较方便，省去很多麻烦
title
引入了platform-browser的Title，使用它的setTitle方法改标题
APP_BASE_HREF
在非hash路由情况下，有时候环境的原因布置静态资源路径的时候可能不是根域名,同时还要删除index.html的<base>标签，否则会有问题
import { APP_BASE_HREF } from '@angular/common';
在app.module里注册providers: [{provide: APP_BASE_HREF, useValue: environment.publicBase}],
http
使用http相关API，需要注入HttpModule，否则会报错: No provider for Http
import { HttpModule } from '@angular/http';
引入了三方JS，三方JS定义的全局变量，在引入到代码里，编译会报错：没有定义。需要在前面加个申明declare let thirdVar:any;
规范
文件命名service，component，route，module，主要类型的文件种类不多，每次新建文件命名太长，引入的时候也麻烦，所以除了根目录命名保持xx.component.ts这种格式，其他文件统一为xx.c.ts，xx.s.ts。
xx.s.ts == xx.service.ts | export class xxS xx.r.ts == xx.routes.ts | export class xxR xx.m.ts == xx.module.ts | export class xxM xx.c.ts == xx.component.ts | export class xxC
bootstrap4
考虑引入boostrap4来作为css库布局。
关于rem，我们一般用rem作为单位的时候，是更希望利用它的特性改变font-size达到自适应效果，会先定义一个font-size的范围和对应的屏幕宽度范围，根据设计稿的宽度得到一个基数，再用设计稿中元素的实际像素去除以基数得到rem，最后根据屏幕宽度动态设置font-size的相应值达到自适应效果。bootstrap4以浏览器字体默认大小16px，直接定义了元素的rem值，它的源码里没有任何计算，我想他们是参照16px来设置的元素大小，然后求出的rem值，当页面根font-size的值是16px的时候，所有的bootstrap4的元素大小就是标准大小，如果我们想让页面的元素整体放大或者缩小，我们只需要去改变font-size的大小，font-size设置为多少，需要我们自己计算和定义规则。因为是三方库，所以这块的实现方法和我们自己实际项目使用rem的时候，会有些反差。