Flutter

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

Issue

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

Solution

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

Answered By – Marc Freeman

Answer Checked By – Clifford M. (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *