1.创建angullar4 项目 ng new NGVAL
2.创建登录页面 添加响应式表单验证 以及主界面 前端UI采用的adminLTE
adminLTE 应用如下：
3.完成后项目结构如下：
4.前端工作流程：默认进入登录页面——（主路由）——>验证登录————>进入main模块———（子路由）———>默认进入home页面
上代码了： 主路由配置(模块懒加载)：
对应路由插座在app.component.ts：
router 属性相关说明可以查文档 ；注意这里的RouterModule.forRoot() 用的forRoot 根用forRoot模块 子模块用forChild
子路由：设置默认进入home页面
对应的子路由插座在布局文件里面：
完成后 进行编译 发现进入不了 login登录页面 而是导航到了的main/home 不知道为什么 后来参考了其它的带卡 发现在loginModule.ts 给login 模块加入子路由就可以正常导入到login中 如下：
5.添加路由守卫（CanActivate）：gurade.service.ts 如下：实现canActivate接口 我这里用sessionStroge保存登录状态，当然也可以用localStroage保存，然后再路由守卫中判断是否登录：
路由守卫的配置：
登录页：
