Question

我刚刚开始使用Angular Dart，我一直在使用https://angulardart.dev/tutorial/toh-pt5上的“路由”教程作为参考，但是每当将路线传递到路由器出口时，我的应用程序似乎都崩溃了

我尝试自己声明路由器出口而不传递路由，显然这不会产生任何错误，但也没有引入所需的组件。

route_paths.dart

class RoutePaths {
  static final loginPath = RoutePath(path: 'login');
  static final signUpPath = RoutePath(path: 'sign-up');
}

routes.dart

class Routes {
    static final login = RouteDefinition(
    routePath: RoutePaths.loginPath,
    component: login_component.LoginComponentNgFactory
  );

  static final signUp = RouteDefinition(
    routePath: RoutePaths.signUpPath,
    component: sign_up_component.SignUpComponentNgFactory
  );

  static final all = <RouteDefinition> [
    login,
    signUp,
    RouteDefinition.redirect(
      path: '',
      redirectTo: RoutePaths.loginPath.toUrl(),
    )
  ];
}

app_component.dart

@Component(
  selector: 'app-component',
  templateUrl: 'app_component.html',
  directives: [routerDirectives, NgIf],
  exports: [RoutePaths, Routes],
)

class AppComponent {}

app_component.html

<h1>Hello there</h1>
<router-outlet [routes]="Routes.all"></router-outlet>

我希望我的登录路径在运行时可供用户使用，而不是在页面上看到“ Hello there”字样，并且在控制台中出现以下错误：

例外：断言失败：布尔表达式不能为null 堆栈跟踪： dart：sdk_internal 11901：16 get isNotEmpty 包：angular_router / src / directives / packages / angular_router / src / route_definition.dart 285：5 assertValid package：angular_router / src / directives / packages / angular_router / src / directives / router_outlet_directive.dart 82:14设置路线软件包：music_portal / packages / music_portal / app_component.template.dart 69:25 detectChangesInternal 包：angular / src / bootstrap / packages / angular / src / core / linker / views / view.dart 58：7 detectCrash 软件包：angular / src / bootstrap / packages / angular / src / core / linker / app_view.dart 377：7 detectChanges 封装：music_portal / packages / music_portal / app_component.template.dart 124：17 detectChangesInternal 包：angular / src / bootstrap / packages / angular / src / core / linker / views / view.dart 58：7 detectCrash 软件包：angular / src / bootstrap / packages / angular / src / core / linker / app_view.dart 377：7 detectChanges 软件包：angular / src / bootstrap / packages / angular / src / core / change_detection / host.dart 128：13 [_runTickGuarded] package：angular / src / bootstrap / packages / angular / src / core / change_detection / host.dart 83:12 tick 软件包：angular / src / bootstrap / packages / angular / src / core / application_ref.dart 107：5 [_loadedRootComponent] 软件包：Angular / src / bootstrap / packages / angular / src / core / application_ref.dart 95：7 软件包：Angular / src / bootstrap / packages / angular / src / core / change_detection / host.dart 186：26 package：angular / src / core / change_detection / packages / angular / src / core / zone / ng_zone.dart 132：18 dart：sdk_internal 28349：14运行 package：angular / src / core / change_detection / packages / angular / src / core / zone / ng_zone.dart 129：18 [_run] dart：sdk_internal 28555：14运行 package：angular / src / core / change_detection / packages / angular / src / core / zone / ng_zone.dart 291：23运行软件包：Angular / src / bootstrap / packages / angular / src / core / application_ref.dart 139：52 runInZone package：angular / src / bootstrap / packages / angular / src / core / change_detection / host.dart 184：5运行 package：angular / src / bootstrap / packages / angular / src / core / application_ref.dart 69:23 bootstrap 包：角度/ src / bootstrap /包/角度/src/bootstrap/run.dart 207：16 runApp 主镖15：3主 webdev / src / serve / injected / client.js 11440：45 $ 0 webdev / src / serve / injected / client.js 3424：26 webdev / src / serve / injected / client.js 1188：72 webdev / src / serve / injected / client.js 4914：23 $ 2 webdev / src / serve / injected / client.js 4906：30 $ 1 webdev / src / serve / injected / client.js 5475：40 iB webdev / src / serve / injected / client.js 5477：30 dw webdev / src / serve / injected / client.js 5078：13 $ 0 webdev / src / serve / injected / client.js 1240：41 cJ webdev / src / serve / injected / client.js 4996：3 bz webdev / src / serve / injected / client.js 4932：3 ai webdev / src / serve / injected / client.js 4894：12 ai webdev / src / serve / injected / client.js 1179：20 bN webdev / src / serve / injected / client.js 3485：17 webdev / src / serve / injected / client.js 1188：72 webdev / src / serve / injected / client.js 4914：23 $ 2 webdev / src / serve / injected / client.js 4906：30 $ 1 webdev / src / serve / injected / client.js 5475：40 iB webdev / src / serve / injected / client.js 5477：30 dw webdev / src / serve / injected / client.js 5078：13 $ 0 webdev / src / serve / injected / client.js 1240：41 cJ webdev / src / serve / injected / client.js 5044：3 $ 0 webdev / src / serve / injected / client.js 1268：5 uK webdev / src / serve / injected / client.js 1270：7 uP webdev / src / serve / injected / client.js 4865：3 $ 1 webdev / src / serve / injected / client.js 441：17 vk webdev / src / serve / injected / client.js 449：51

Answer 1

事实证明，使用Firefox开发Angular Dart应用程序时，在查找源地图文件时将显示404。

Source map error: request failed with status 404
Resource URL: http://localhost:8080/packages/build_web_compilers/src/dev_compiler/dart_sdk.js
Source Map URL: dart_sdk.js.map

Source map error: request failed with status 404
Resource URL: http://localhost:8080/webdev/src/serve/injected/client.js
Source Map URL: client.dart.js.map

老实说，我不知道为什么Firefox会阻止或找不到源地图文件，但是立即切换到Chrome是解决此问题的方法。考虑到它们都是Google产品，我认为这很有意义。

编辑：可能与之相关的github问题：https://github.com/dart-lang/build/issues/1788

将路由注入路由器出口会引发“布尔表达式不能为空”错误

1 个答案: