Angular4打包项目

angular打包过程遇到的坑 

1.打包命令

ng build --prod --aot

2.各种坑

    2.1打包后后静态页面在服务器端无法正常显示  添加路由<router-outlet></router-outlet>  页面首页出现两次渲染情况  

         路由配置如下：    

@NgModule({
    imports: [
        RouterModule.forRoot([
            {path: '',  component: AppComponent},
            { path: 'sign/:openId', component: SignComponent },
            { path: 'suc', component: SucComponent }
        ])
    ],
    exports: [RouterModule]
})

         html：

<app-header></app-header>
<router-outlet></router-outlet>

 

解决方法：

                  （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 const ROUTES: 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 const ROUTES: 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 const ROUTES: 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运行也可以，刷新页面也不发请求

 

 

转载于:https://my.oschina.net/xionghaiziCEO/blog/1503212