AngularJS的$stateProvider在Angular 12中的等价实现是什么？

Angular 12 中与 AngularJS 的 $stateProvider 等价的实现就是 Angular 官方提供的 @angular/router 库，完全可以通过 AppRoutingModule 实现你之前用 $stateProvider 完成的所有路由能力，无需额外引入第三方依赖。

• 路由状态定义：原 $stateProvider.state() 定义路由的逻辑，对应在 AppRoutingModule 的 Routes 数组中声明路由对象

原 AngularJS 写法示例：

$stateProvider.state('user', {
  url: '/user/:userId',
  templateUrl: 'user.tpl.html',
  controller: 'UserCtrl',
  resolve: {
    userInfo: (UserService) => UserService.fetch()
  }
})

Angular 12 对应写法（写在 AppRoutingModule 的路由配置中）：

const routes: Routes = [
  {
    path: 'user/:userId',
    component: UserComponent,
    resolve: {
      userInfo: UserResolver
    }
  }
]

• 嵌套路由：原 $stateProvider 的子状态配置对应 Angular 路由的 children 属性，支持多层嵌套路由、多路由出口的配置，逻辑完全对齐
• 路由钩子：原状态的 onEnter/onExit 等钩子可以通过 Angular 路由的 canActivate、canDeactivate、canMatch 等守卫接口实现
• 路由跳转：原 $state.go('stateName') 逻辑对应 Angular 中 Router 服务的 navigate(['/route-path']) 方法，模板中可直接使用 routerLink 指令实现跳转
• 扩展能力：如果之前重度依赖 ui-router 的命名视图、状态参数透传等高级特性，@angular/router 也支持命名 router-outlet、query参数、动态路由参数、自定义data属性等能力，可完全覆盖迁移需求

内容的提问来源于stack exchange，提问作者Afraa K GH