在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目录下)实现自动编译部署。
在黑窗口进行编译命令:
npm run build
这个时候在--output-path
的路径中,会出现项目文件,这个时候正常启动tomcat即可。并输入以下路径进行访问:
http://localhost:8080/test-web/
*弊端:会在路径中出现#号,如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}
即可。
在conf/web.xml中添加:
<error-page>
<error-code>404</error-code>
<location>/</location>
</error-page>
*弊端:如果出现真的404页面,无法进行区分。
所有的模块都继承在副模块上,不存在子路由的时候,这个时候就不会出现404这种情况了!