Angular模块链接新标签页打开报NotFoundHttpException问题求助

这个问题在Laravel搭配Angular的单页应用场景里很常见，我来帮你拆解原因和对应的解决方案：

问题根源 #

当你在新标签页直接打开http://schoolerp.dci.in/vidyauraweb/registration时，浏览器会直接向Laravel服务器发送GET请求。Laravel会遍历自身routecollection.php里的路由规则，发现没有匹配/vidyauraweb/registration的后端路由，因此抛出NotFoundHttpException。

而正常在Angular应用内部跳转时，是Angular的前端路由器在浏览器端处理路径，不会触发新的后端请求，所以不会出现这个问题。

解决方案 #

核心思路是让Laravel把所有指向Angular子路径的请求，都转发到Angular的入口文件（index.html），由Angular的前端路由器来接管路由处理。

1. 配置Laravel通配符路由 #

在Laravel的routes/web.php文件中添加一条通配符路由，捕获所有/vidyauraweb/*的请求，返回Angular的入口文件：

// 捕获所有/vidyauraweb下的子路径请求
Route::get('/vidyauraweb/{any}', function () {
    // 假设Angular编译后的index.html放在public/vidyauraweb目录下
    return file_get_contents(public_path('vidyauraweb/index.html'));
})->where('any', '.*');

如果你的Angular文件是通过Laravel视图加载的（比如把index.html放在resources/views/vidyauraweb目录下），可以改成：

Route::get('/vidyauraweb/{any}', function () {
    return view('vidyauraweb.index');
})->where('any', '.*');

2. 确保Angular配置正确的Base Href #

编译Angular应用时，必须指定base href为/vidyauraweb/，这样Angular的路由器才能正确识别根路径：

ng build --prod --base-href="/vidyauraweb/"

同时在Angular的app-routing.module.ts中，保持路由配置的相对路径正确：

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RegistrationComponent } from './registration/registration.component';

const routes: Routes = [
  { path: 'registration', component: RegistrationComponent },
  // 其他路由配置...
];

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

3. 可选：服务器层面配置重写规则 #

如果你的服务器是Nginx，可以在配置文件中添加重写规则，确保所有/vidyauraweb下的请求都转发到index.html：

location /vidyauraweb {
    try_files $uri $uri/ /vidyauraweb/index.html;
}

如果是Apache，先确保开启了mod_rewrite，然后在public/.htaccess中添加规则：

RewriteRule ^vidyauraweb/(.*)$ /vidyauraweb/index.html [L]

完成以上配置后，直接在新标签页打开Angular的路由路径，Laravel会返回Angular的入口文件，Angular的路由器就能正确加载对应的注册组件了。

内容的提问来源于stack exchange，提问作者Vetrivel Pandiyarajan