参数路由和条件不适用于生产模式

Question

我有一个像这样的简单路由：

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

const routes: Routes = [
{
    path: 'scenario',
    loadChildren: () => import('./pages/scenarios/scenario/scenario.module').then( m => m.ScenarioPageModule)
  }
 ]

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

然后在app.component.ts

    export class AppComponent  {
    
    {
        this.initializeApp();
    }
    
      initializeApp() {
    
            //Get urlParameter
            this.getParameter()
    
              if(this.source == "kiosk"){
    
               //go to route
               this.navController.navigateRoot('scenario');
             }
           }


getParameter() {
    if (document.URL.indexOf("?") > 0) {
      let splitURL = document.URL.split("?");
      let splitParams = splitURL[1].split("&");
      let i: any;
      for (i in splitParams){
        let singleURLParam = splitParams[i].split('=');
        console.log(singleURLParam[1])
        if (singleURLParam[0] == "utm_source"){
          this.source = singleURLParam[1];
        }
      }
    }
  }
}

如您所见，我读取了 URL 参数，如果它等于“Kiosk”，它会重定向到场景页面。因此，如果我运行本地主机上的项目并尝试使用此 URL：http://localhost:8100/scenario/?utm_source=kiosk 它有效，它会重定向到场景并做好所有事情。

当我发布产品时问题开始了，我尝试的 URL 是：myapp.company.com/scenario/?utm_source=kiosk 它只是 return 404 - 找不到文件目录

感谢任何帮助，谢谢

Answer 1

Angular 网络服务器充当反向代理，其行为如下：

如果传入请求与资产文件（CSS、JS、图像等）相匹配，则提供它
否则，提供 index.html 文件以便在浏览器中执行 JavaScript 代码

当 index.html 被服务并且 JavaScript 执行时，当前 URL 被视为 Angular 路由，相应的 layout/component 是显示。

无论您尝试部署到哪里，它都应该具有 URL 重写能力，并且您应该对其进行配置以模仿 Angular 的开发服务器行为。

以下是三个最流行的 Web 服务器的一些有用资源：

参数路由和条件不适用于生产模式

Parameter routing and condition dont work on production mode

angular

ionic-framework

ionic4