在Angular中构建后无法加载路由模块 [英] Cannot load routing modules after building in Angular

问题描述

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

I am trying to build my angular app und serve it on xampp, but after building my Angular Project and copying the dist folder into the htdocs folder, I cannot access the routing modules. When running the angular app with ng serve, I have no problems accessing the route in the module, but after building it, I am getting an 404 error when trying to acess a route thats in the routing module.

app模块中的路由正常工作.

The routes that are in the app module work just fine.

我的app-routing.module.ts:

My 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 { }

我的intern-routing.module.ts:

My intern-routing.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文件:

After I added the following htaccess file to my htdocs folder I am not getting an 404 error any more but the page is just empty. .htaccess file:

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 ="./"> ，但这也不能解决我的问题.

I have also already changed the base href in index.html to <base href="./"> but this didn't solve my problem as well.

推荐答案

使用angular cli这样构建您的应用

Build your app like this using angular cli

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

尝试一下，让我知道，因为它对我有用

Try with this one and let me know as It works for me

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

这篇关于在Angular中构建后无法加载路由模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！