前言
接到一个pc端后台项目，还会加入两个安卓同事一起学习和做这个项目，需要带一下他们。 既ng1之后，我就没怎么有过其它后台框架的实际项目经验了，期间用的移动端框架也并非vue、angular系列、react，包括es6、webpack等也都并不熟悉。 公司一个其它后台项目使用了vue，偶尔我会维护一下但是总体来说对体系不熟悉。 一直比较喜欢angular，应该是有过ng1框架搭建的经验的原因（前面也有写过博客），学习过ng2和ng4的官方demo，总的来说照着抄写一遍意义不大，必须要用于实际项目才能真正吸收。 目前ng1肯定不要用了，我要重新熟悉和搭建一个架子，从自我喜好和前期一些基础来讲，ng4是最好的选择，刚好typescript的语法对安卓同事也比较友好。 向领导请示了之后，也得到了允许。
入坑之初，问题一般比较多，使用的是官方angular-cli创建项目。 中途完善cli的功能，理解整个框架是比较费精力的事情。 总的来说这次就花了两三天时间，梳理好了框架，配置好了一些基本功能和依赖，比如环境部署，路由嵌套，主页面布局（侧边栏，导航栏，内容，底部），公共服务（loading，http请求封装，全局服务title，用户信息存取）。 而后就直接和同事一起开发了。 最开始还有点没底，不知道搭架子要花多久时间，现在来看这个进度和时间还是很满意的，当然过程中参考了一些网上的同行分享的资源和代码。 非常感谢两位同事的积极支持，他们学习的也很快。
问题细节点
scss
angular-cli.json 设置 styleExt为scss之后，在组件里写Styles，并不会编译把scss编译成css，必须要写在独立的scss，然后通过styleUrls引入。
routes path
routes path前面不能加 / 否则会报错
const routes: Routes = [
{ path: '', redirectTo: '/main', pathMatch: 'full' },
{
path: 'main',
component: MainComponent
},
]
<router-outlet>
<router-outlet> 的意思是当通过路由访问component的时候，component的selector会找到 <router-outlet></router-outlet> ，@Component定义的selector会直接生成一个标签，载入到<router-outlet></router-outlet>下方，如果不设置selector标签名就是默认的ng-component。
RouterModule
- forRoot creates a module that contains all the directives, the given routes, and the router service itself.
- forChild creates a module that contains all the directives and the given routes, but does not include the router service.
总的来说forRoot是定义一级路由，forChild是定义二级路由或者说是子路由。比如我们的引导模块（命名一般是app.module.ts），也就是根模块，里面注册路由假设是 /main，就需要使用forRoot。根模块通过forRoot注册的路由/main，需要嵌套路由成为 /main/home,那home的module就需要用forChild去注册路由。