Injecting routes into router-outlet throws 'boolean expression must not be null' error

Question

I've just started using Angular Dart, I've been using the Routing tutorial at: https://angulardart.dev/tutorial/toh-pt5 as a reference but my application seems to blow up whenever passing my routes into router-outlet

I've tried declaring router-outlet on it's own without passing it routes, obviously this didn't create any errors but also didn't bring in the desired components.

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>

I expect my login path to be available to the user at runtime, instead I get "Hello there" on the page and the following error in the console:

EXCEPTION: Failed assertion: boolean expression must not be null STACKTRACE: dart:sdk_internal 11901:16 get isNotEmpty package: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 set routes package:music_portal/packages/music_portal/app_component.template.dart 69:25 detectChangesInternal package:angular/src/bootstrap/packages/angular/src/core/linker/views/view.dart 58:7 detectCrash package:angular/src/bootstrap/packages/angular/src/core/linker/app_view.dart 377:7 detectChanges package:music_portal/packages/music_portal/app_component.template.dart 124:17 detectChangesInternal package:angular/src/bootstrap/packages/angular/src/core/linker/views/view.dart 58:7 detectCrash package:angular/src/bootstrap/packages/angular/src/core/linker/app_view.dart 377:7 detectChanges package: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 package:angular/src/bootstrap/packages/angular/src/core/application_ref.dart 107:5 [_loadedRootComponent] package:angular/src/bootstrap/packages/angular/src/core/application_ref.dart 95:7 package: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 run package:angular/src/core/change_detection/packages/angular/src/core/zone/ng_zone.dart 129:18 [_run] dart:sdk_internal 28555:14 run package:angular/src/core/change_detection/packages/angular/src/core/zone/ng_zone.dart 291:23 run package: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 run package:angular/src/bootstrap/packages/angular/src/core/application_ref.dart 69:23 bootstrap package:angular/src/bootstrap/packages/angular/src/bootstrap/run.dart 207:16 runApp main.dart 15:3 main 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

Marc Freeman Marc Freeman · Accepted Answer · 2019-07-05T10:06:27

Turns out that when using Firefox to develop an Angular Dart application, it will 404 when looking for source map files.

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

I honestly have no idea why Firefox blocks, or cannot find the source map files but switching to Chrome was the instant fix for the issue. I guess it makes sense considering they're both Google products.

EDIT: Possibly related github issue: https://github.com/dart-lang/build/issues/1788

Injecting routes into router-outlet throws 'boolean expression must not be null' error

1 Answers