Angular8的使用(八):打包到tomcat中部署

1.修改build指令

在package.json文件中,修改scripts的build的value值:

{
  "name": "test-web",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --base-href /test-web/ --output-path /home/fracong/test/test-web --delete-output-path=false",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  }

说明:
1.修改以下代码"build": "ng build --base-href /test-web/ --output-path /home/fracong/test/test-web --delete-output-path=false"即可。

2.--base-href /test-web/ 是将文件打包后,访问的路径的项目名称为:test-web;
在生成的index.html中,会生成如下代码(href的值):

<base href="/test-web/">  <meta name="viewport" content="width=device-width, initial-scale=1">

3.--output-path 当在编译之后,会自动将生成的项目打包到指定的路径下(通常会部署到tomcat的webapps目录下)实现自动编译部署

2.编译命令和访问

在黑窗口进行编译命令:

npm run build

这个时候在--output-path的路径中,会出现项目文件,这个时候正常启动tomcat即可。并输入以下路径进行访问:

http://localhost:8080/test-web/

3.问题解决

3.1.路由页面刷新出现404

3.1.1.使用hash模式

*弊端:会在路径中出现#号,如http://localhost:8080/test-web/会变成http://localhost:8080/test-web/#/
1.方案一
在app-routing.module.ts中,修改为以下代码:

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {useHash: true})
  ],
  exports: [RouterModule]
})

添加{useHash: true} 即可。
2.方案二
在app.module.ts中修改添加以下代码:

import {HashLocationStrategy, LocationStrategy} from '@angular/common';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [
  	{provide: LocationStrategy, useClass: HashLocationStrategy}
  ],
  bootstrap: [AppComponent]
})

添加{provide: LocationStrategy, useClass: HashLocationStrategy}即可。

3.1.2.修改tomcat

在conf/web.xml中添加:

<error-page>
    <error-code>404</error-code>
    <location>/</location>
</error-page>

*弊端:如果出现真的404页面,无法进行区分。

3.1.4.不使用子路由

所有的模块都继承在副模块上,不存在子路由的时候,这个时候就不会出现404这种情况了!

你可能感兴趣的:(Angualr8)