angular打包过程遇到的坑

1.打包命令

ng build --prod --aot

2.各种坑

2.1打包后后静态页面在服务器端无法正常显示  添加路由

  页面首页出现两次渲染情况

路由配置如下：

@NgModule({

          imports: [       

                         RouterModule.forRoot([           

                                    {path:'',component: AppComponent},           

                                    {path:'sign/:openId',component: SignComponent },           

                                     {path:'suc',component: SucComponent }        ])    ],

                           exports: [RouterModule]

})

html：

解决方法：

（1）http://blog.csdn.net/catwindboy/article/details/70209872

（2）重定向到自己想要渲染的页面

ps：我照着方法（1）走到一半发现问题依旧存在，过程中还不断出现bug，同事建议我用angular重定向。

2.2 angular重定向踩过的坑

angular重定向 参考的以下几篇文章

（1）重定向配置方法http://www.cnblogs.com/longhx/p/7238933.html

（2） 遇到bug需要写全的：http://blog.csdn.net/huangyezi/article/details/52135339

（3）RouterModule.forRoot用法https://segmentfault.com/a/1190000009265310

根据第一篇文章第三篇文章，修改自己的代码为

export constROUTES:Routes = [   

  {path:'',redirectTo:SignComponent},   

 {path:'sign/:openId',component:SignComponent },   

 {path:'suc',component:SucComponent }

];

@NgModule({

imports:[     

     RouterModule.forRoot(ROUTES)    ],

exports:[RouterModule]

})

结果报错，然后百度redirectTo用法，看到第二篇文章，redirectTo后面需要添加pathMatch:'full'，并且redirectTo后面跟的是路径而不是组件……

再次修改代码

export constROUTES:Routes = [  

  {path:'',redirectTo:'/sign/',pathMatch:'full'},  

  {path:'sign/:openId',component:SignComponent },  

  {path:'suc',component:SucComponent }

];

@NgModule({

imports:[    

  RouterModule.forRoot(ROUTES)    ],

exports:[RouterModule]

})

打包生成静态文件终于可以在tomcat运行

然而，页面刷新向服务器发送请求了……这并不是我想要的

各种百度无果，在angular交流群广发我的问题，终于等到一个回复。

像tomcat 直接用/XX被当成数据请求处理了  加个#号防止向服务器发送请求，所以加个{useHash:true}

问小伙伴从哪里获得消息，答曰：谷歌……

我的电脑貌似好像没有翻墙……所以只能百度

最终修改代码如下，

/路由配置

export constROUTES:Routes = [  

    {path:'',redirectTo:'/sign/',pathMatch:'full'},

    {path:'sign/:openId',component:SignComponent },

    {path:'suc',component:SucComponent }

];

@NgModule({

imports:[ 

       RouterModule.forRoot(ROUTES,{useHash:true})   

 ],

exports:[RouterModule]

})

测试开发环境可以，打包后静态文件在tomcat运行也可以，刷新页面也不发请求