如何将带有子页面的angular app部署到外部服务器
如何将带有子页面的angular app部署到外部服务器
提问于 2018-06-04 03:22:05
我有一个简单的角度应用程序的几个组件，我想服务到我的外部服务器在互联网上，该应用程序与我的本地服务器的命令ng serve的工作，但当我发布它与命令ng build --prod它是创建一个单一的html文件，当我存储这个ng build --prod的所有创建文件到我的根目录的服务器上，服务器只知道我的第一页，当我点击为ex转到另一个页面时，我有一个错误的404 (没有找到页面)。
我的问题是如何解决这个问题，谢谢
app.component.html：
<mat-sidenav-container class="sidenav-container">
<mat-sidenav
#drawer
class="sidenav"
fixedInViewport="true"
[attr.role]="isHandset ? 'dialog' : 'navigation'"
[mode]="(isHandset | async)!.matches ? 'over' : 'side'"
[opened]="!(isHandset | async)!.matches">
<mat-toolbar color="primary">Menu</mat-toolbar>
<mat-nav-list>
<a mat-list-item href="/about-me">About Me</a>
<a mat-list-item href="/second-page">Projects</a>
<a mat-list-item href="/third-page">Contact</a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
<mat-toolbar color="primary">
<button
type="button"
aria-label="Toggle sidenav"
mat-icon-button
(click)="drawer.toggle()"
*ngIf="(isHandset | async)!.matches">
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
</button>
</mat-toolbar>
<router-outlet></router-outlet>
</mat-sidenav-content>
</mat-sidenav-container>app.module.ts
const appRoutes: Routes = [
{ path: 'about-me', component: AboutMeComponent},
{ path: 'second-page', component: SecondPageComponent},
{ path: 'third-page', component: ThirdPageComponent}
];回答 2
Stack Overflow用户
发布于 2018-06-04 04:18:52
您的本地服务器通常位于服务器地址的根目录下，例如。http://localhost:xxxx。但是，当您将其托管在远程服务器上时，您可能不会将其部署在根文件夹下作为http://mywebsite.com，而是可以将其部署在http://mywebsite.com/myapp/下。
如果是这样的话，您需要在index.html中设置一项内容，
<base href="/myapp/">或运行
ng build --base-href /myapp/Stack Overflow用户
发布于 2018-06-04 05:19:22
RewriteEngine On #如果请求现有资产或目录，请按RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f or RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d RewriteRule ^-L#转到该资源。如果请求的资源不存在，请使用index.html RewriteRule ^ /index.html
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/50670151
复制相关文章
相似问题
腾讯云开发者
