浅谈angular4实际项目搭建总结-创新互联

前言

接到一个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
  },
]

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。