在 Angular 中构建后无法加载路由模块答案

【问题标题】：Cannot load routing modules after building in Angular在 Angular 中构建后无法加载路由模块
【发布时间】：2020-09-18 06:35:34
【问题描述】：

我正在尝试构建我的 Angular 应用程序并在 xampp 上提供它，但是在构建我的 Angular 项目并将 dist 文件夹复制到 htdocs 文件夹后，我无法访问路由模块。使用 ng serve 运行 Angular 应用程序时，访问模块中的路由没有问题，但是在构建它之后，尝试访问路由模块中的路由时出现 404 错误。

应用模块中的路由工作正常。

我的 app-routing.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';


const routes: Routes = [
  {path: 'intern', loadChildren: () => import('./intern/intern.module').then(m => m.InternModule)}
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

我的实习路由.module.ts：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashboardSiteComponent } from './sites/dashboard-site/dashboard-site.component';


const routes: Routes = [
  {
    path: '', children: [
      { path: 'dashboard', component: DashboardSiteComponent }
    ]
  }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class InternRoutingModule { }

在我将以下 htaccess 文件添加到我的 htdocs 文件夹后，我不再收到 404 错误，但页面只是空的。 .htaccess 文件：

RewriteEngine On

    # -- REDIRECTION to https (optional):
    # If you need this, uncomment the next two commands
    # RewriteCond %{HTTPS} !on
    # RewriteRule (.*) https://%{HTTP_HOST}%{REQUEST_URI}
    # --

    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -f [OR]
    RewriteCond %{DOCUMENT_ROOT}%{REQUEST_URI} -d

    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) index.html [NC,L]

我也已经将 index.html 中的基本 href 更改为 <base href="./">，但这也没有解决我的问题。

【问题讨论】：

网址是什么样的？它在域的根目录？ http://example.com 或 http://example.com/mysite ?

标签： angular xampp

【解决方案1】：

使用 Angular cli 像这样构建您的应用

ng build --prod --base-href /<project_name>/

试试这个，让我知道它对我有用

<IfModule mod_rewrite.c>
 RewriteEngine On
 RewriteBase /
 RewriteRule ^index\.html$ - [L]
 RewriteCond %{REQUEST_FILENAME} !-f
 RewriteCond %{REQUEST_FILENAME} !-d
 RewriteRule . /index.html [L]
</IfModule>

【讨论】：