Angular 5 生产环境运行报错：Cannot read property 'startsWith' of null

我之前也碰到过Angular 5生产模式下这个路由相关的空指针错误，结合经验给你几个排查和解决的方向：

• 检查路由配置中的空路径/通配符路由
  这个错误大概率是路由解析时遇到了未正确配置的空路径。比如你有没有类似{ path: '', ... }或者{ path: '**', ... }的路由，要确保它们的配置完整：

  • 空路径路由必须指定redirectTo或者对应的component，同时加上pathMatch: 'full'
  • 通配符路由也要明确redirectTo或者处理逻辑，不能只留空配置
    举个错误示例和修复后的代码：
    错误配置：

  const routes: Routes = [
    { path: '', pathMatch: 'full' }, // 无redirectTo或component
    { path: 'home', component: HomeComponent },
    { path: '**', redirectTo: '' }
  ];
  

  修复后：

  const routes: Routes = [
    { path: '', pathMatch: 'full', redirectTo: '/home' },
    { path: 'home', component: HomeComponent },
    { path: '**', redirectTo: '/home' }
  ];
  

• 排查路由守卫/解析器的逻辑
  如果你的应用有自定义的路由守卫（CanActivate、CanLoad等）或者路由解析器（Resolve），检查这些逻辑里有没有返回null或者导致路由状态异常的情况。生产模式下Angular对这类异常的容忍度更低，开发模式下可能被忽略的null值，在生产环境会直接触发这个错误。比如某个解析器没有正确返回数据，返回了null，就可能干扰路由解析流程。

• 临时禁用构建优化排查问题
  你可以尝试运行ng serve --prod --build-optimizer=false，如果错误消失了，说明是构建优化器对router.js的处理存在bug（Angular 5版本比较老，确实存在一些构建优化相关的已知问题）。这种情况下，你可以考虑升级Angular版本到5.x的最新补丁版，或者暂时禁用构建优化（不建议长期这么做，会影响性能）。

• 检查初始URL状态
  在AppComponent的ngOnInit里添加代码打印初始URL，确认应用启动时的路由状态：

  import { Router } from '@angular/router';
  
  constructor(private router: Router) {}
  
  ngOnInit() {
    console.log('Initial URL:', this.router.url);
  }
  

  如果初始URL是异常值（比如空字符串或者奇怪的格式），那就要排查服务器配置或者路由的初始跳转逻辑。

• 检查路由模块的配置语法
  确保RouterModule.forRoot()/forChild()的配置数组没有语法错误，比如遗漏逗号、括号，或者属性拼写错误（比如把pathMatch写成小写的pathmatch）。生产模式下的编译不会像开发模式那样给出详细提示，这类小错误可能导致路由配置解析失败，进而触发空指针。

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