angulardart

Fixing my AngularDart webapp after Chrome 86 update

wafrat

Oct 16, 2020 • 11 min read

Yesterday, my AngularDart webapp broke, with two exceptions.

One in firebase-app.js:

Error: Expected a value of type 'UserJsImpl', but got one of type 'MemoryInfo'

And one in AngularForms:

EXCEPTION: NoSuchMethodError: 'call'
method not found
Receiver: Instance of 'DeferredValidator'
Arguments: []

It still works in Safari and Firefox. Another thing to note is I compiled it long ago with DDC (dev JS) instead of dartjs (prod JS). At the time, there was an issue with dartjs.

Incidentally I was using angular: ^6.0.0-alpha+1, which dates back from June 2019. It's been more than a year! Luckily, the stable version got out last week. See https://pub.dev/packages/angular/versions.

Before trying to update libraries, let's just try to recompile using the regular tooling using webdev build. webdev --version returns version 2.5.4, from Nov 2019. It looks like each version depends on specific versions of Dart: https://pub.dev/packages/webdev/changelog. The latest version to date, 2.6.2, from Sept 2020, requires Dart >=2.8.1. My dart --version is Dart SDK version: 2.10.0-7.3.beta (beta) (Wed Aug 26 09:46:50 2020 +0200) on "macos_x64".

Even though my version of Dart is fine, let's upgrade Dart, then webdev. On https://dart.dev/get-dart, they say I should run brew upgrade dart. After running it, it turns out I already had the latest beta version of Dart. Then webdev:

% pub global activate webdev
Package webdev is currently active at version 2.5.4.
Resolving dependencies... (3.1s)
+ args 1.6.0
...
+ yaml 2.2.1
Downloading webdev 2.6.2...
...
Downloading matcher 0.12.9...
Precompiling executables... (5.3s)
Precompiled webdev:webdev.
Installed executable webdev.
Activated webdev 2.6.2.

Now let's try to compile:

% webdev build
webdev could not run for this project.
Dart 2.10.2 is incompatible with your dependencies' SDK constraints. Please run "pub get" again.

Ok, I'll pub get:

% pub get
Resolving dependencies... (1.2s)
> dart_internal 0.1.12-nullsafety (was 0.1.8)
Downloading dart_internal 0.1.12-nullsafety...
Changed 1 dependency!
% webdev build
Can't load Kernel binary: Invalid kernel binary format version.
[WARNING] Throwing away cached asset graph due to Dart SDK update.
[INFO] Cleaning up outputs from previous builds. completed, took 1.7s
[INFO] Building new asset graph completed, took 2.4s
[INFO] Checking for unexpected pre-existing outputs. completed, took 1ms
[INFO] Generating SDK summary completed, took 5.3s
[INFO]build_web_compilers:entrypoint on web/main.dart: Running dart2js with --minify --packages=.package-3548bf3fcfd922b555acae6260dab793 -oweb/main.dart.js web/main.dart
[SEVERE]build_web_compilers:entrypoint on web/main.dart: Dart2Js finished with:

packages/dart_internal/extract_type_arguments.dart:25:7:
Error: Null safety features are disabled for this library.
Object? extractIterableTypeArgument(
      ^
packages/dart_internal/extract_type_arguments.dart:26:34:
Error: Null safety features are disabled for this library.
        Iterable iterable, Object? Function<T>() extract) =>
                                 ^
packages/dart_internal/extract_type_arguments.dart:43:7:
Error: Null safety features are disabled for this library.
Object? extractMapTypeArguments(Map map, Object? Function<K, V>() extract) =>
      ^
packages/dart_internal/extract_type_arguments.dart:43:48:
Error: Null safety features are disabled for this library.
Object? extractMapTypeArguments(Map map, Object? Function<K, V>() extract) =>
                                               ^
packages/service_worker/src/js_facade/isomorphic_fetch.dart:72:3:
Error: JS interop classes do not support non-external constructors.
  Headers.fakeConstructor$();
  ^
packages/service_worker/src/js_facade/isomorphic_fetch.dart:101:3:
Error: JS interop classes do not support non-external constructors.
  Body.fakeConstructor$();
  ^
packages/service_worker/src/js_facade/isomorphic_fetch.dart:196:3:
Error: JS interop classes do not support non-external constructors.
  Request.fakeConstructor$() : super.fakeConstructor$();
  ^
packages/service_worker/src/js_facade/isomorphic_fetch.dart:278:3:
Error: JS interop classes do not support non-external constructors.
  Response.fakeConstructor$() : super.fakeConstructor$();
  ^
Error: Compilation failed.

[INFO] Running build completed, took 52.5s
[INFO] Caching finalized dependency graph completed, took 583ms
[SEVERE] Failed after 53.1s
[SEVERE] FailureType: 1

I have two questions. What does "Invalid kernel binary format version"mean? And what's this other exception about?

For the first error, https://github.com/flutter/flutter/issues/32319 says that Dart has to match the version restrictions of webdev. But I already have a good version of Dart. So let's try and tweak the version declared in pubspec.yaml. I change the string sdk: '>=2.6.0 <3.0.0' to sdk: '>=2.6.2 <3.0.0'. Then pub get, then webdev. Still the same error. Then pub upgrade:

% pub upgrade
Resolving dependencies... (5.1s)
+ _fe_analyzer_shared 6.0.0 (11.0.0 available)
> analyzer 0.39.16 (was 0.37.1+1) (0.40.4 available)
> angular 6.0.0 (was 6.0.0-alpha+1)
> angular_ast 1.0.0 (was 0.5.11)
> angular_compiler 1.0.0 (was 0.4.5)
  angular_components 0.14.0-alpha+1 (1.0.1 available)
  angular_forms 2.1.4 (3.0.0 available)
> angular_router 2.0.0 (was 2.0.0-alpha+24)
  angular_test 2.4.0 (3.0.0 available)
  archive 2.0.13
> args 1.6.0 (was 1.5.3)
> async 2.5.0-nullsafety.1 (was 2.4.0)
> bazel_worker 0.1.21+1 (was 0.1.21) (0.1.25 available)
> boolean_selector 2.1.0-nullsafety.1 (was 2.0.0)
> build 1.3.0 (was 1.2.2) (1.5.0 available)
  build_config 0.4.2
> build_daemon 2.1.4 (was 2.1.3)
> build_modules 2.11.3 (was 2.8.1) (3.0.0 available)
> build_resolvers 1.3.11 (was 1.2.1) (1.4.1 available)
> build_runner 1.10.2 (was 1.7.4) (1.10.3 available)
> build_runner_core 6.0.1 (was 4.4.0) (6.0.3 available)
  build_test 0.10.12+1 (1.2.2 available)
> build_web_compilers 2.11.0 (was 2.9.0) (2.12.2 available)
  built_collection 4.3.2
> built_value 7.1.0 (was 7.0.9)
> charcode 1.2.0-nullsafety.1 (was 1.1.3)
  checked_yaml 1.0.2
  cli_repl 0.2.0+1
+ cli_util 0.1.4 (0.2.0 available)
> code_builder 3.5.0 (was 3.2.1)
> collection 1.15.0-nullsafety.3 (was 1.14.12)
  convert 2.1.1
> coverage 0.14.1 (was 0.13.8)
> crypto 2.1.5 (was 2.1.4)
> csslib 0.16.2 (was 0.16.1)
  dart_internal 0.1.12-nullsafety
> dart_style 1.3.6 (was 1.2.10) (1.3.7 available)
> firebase 7.3.2 (was 7.2.1)
  fixnum 0.10.11
  glob 1.2.0
> googleapis_auth 0.2.12 (was 0.2.11+1)
  graphs 0.2.0
> html 0.14.0+4 (was 0.14.0+3)
> http 0.12.2 (was 0.12.0+4)
  http_multi_server 2.2.0
> http_parser 3.1.4 (was 3.1.3)
> intl 0.16.1 (was 0.15.8)
> io 0.3.4 (was 0.3.3)
> js 0.6.3-nullsafety.1 (was 0.6.1+1)
> json_annotation 3.1.0 (was 3.0.1)
  logging 0.11.4
> matcher 0.12.10-nullsafety.1 (was 0.12.6)
> meta 1.3.0-nullsafety.4 (was 1.1.8)
> mime 0.9.7 (was 0.9.6+3)
> mockito 4.1.2 (was 4.1.1)
> node_interop 1.1.1 (was 1.0.3)
> node_io 1.1.1 (was 1.0.1+2)
> node_preamble 1.4.12 (was 1.4.8)
  observable 0.22.2
> package_config 1.9.3 (was 1.9.1)
  package_resolver 1.0.10
  pageloader 3.3.0
> path 1.8.0-nullsafety.1 (was 1.6.4)
> pedantic 1.10.0-nullsafety.1 (was 1.9.0)
> pool 1.5.0-nullsafety.1 (was 1.4.0)
  protobuf 0.13.16+1 (1.0.1 available)
> pub_semver 1.4.4 (was 1.4.3)
  pubspec_parse 0.1.5
  quiver 2.1.3
> resource 2.1.7 (was 2.1.6)
> sass 1.27.0 (was 1.26.2)
  sass_builder 2.1.3
  scratch_space 0.0.4+2
> service_worker 0.2.4 (was 0.2.3)
> shelf 0.7.9 (was 0.7.5)
  shelf_packages_handler 2.0.0
  shelf_static 0.2.8
  shelf_web_socket 0.2.3
> source_gen 0.9.7+1 (was 0.9.4+6)
> source_map_stack_trace 2.1.0-nullsafety.2 (was 2.0.0)
> source_maps 0.10.10-nullsafety.1 (was 0.10.9)
> source_span 1.8.0-nullsafety.2 (was 1.6.0)
> stack_trace 1.10.0-nullsafety.4 (was 1.9.3)
> stream_channel 2.1.0-nullsafety.1 (was 2.0.0)
  stream_transform 1.2.0
> string_scanner 1.1.0-nullsafety.1 (was 1.0.5)
  sync_http 0.2.0
> term_glyph 1.2.0-nullsafety.1 (was 1.1.0)
> test 1.16.0-nullsafety.5 (was 1.14.1)
> test_api 0.2.19-nullsafety.2 (was 0.2.15)
> test_core 0.3.12-nullsafety.5 (was 0.3.2)
> time_machine 0.9.15 (was 0.9.12)
  timing 0.1.1+2
  tuple 1.0.3
> typed_data 1.3.0-nullsafety.3 (was 1.1.6)
> vm_service 5.2.0 (was 3.0.0+1)
> watcher 0.9.7+15 (was 0.9.7+13)
  web_socket_channel 1.1.0
  webdriver 2.1.2
> webkit_inspection_protocol 0.7.3 (was 0.5.0+1)
> yaml 2.2.1 (was 2.2.0)
These packages are no longer being depended on:
- front_end 0.1.21+1
- kernel 0.3.21+1
- multi_server_socket 1.0.2
Downloading service_worker 0.2.4...
Downloading googleapis_auth 0.2.12...
Downloading angular_router 2.0.0...
Downloading angular 6.0.0...
Downloading angular_compiler 1.0.0...
Downloading angular_ast 1.0.0...
Downloading csslib 0.16.2...
Downloading mockito 4.1.2...
Downloading build 1.3.0...
Downloading dart_style 1.3.6...
Downloading cli_util 0.1.4...
Downloading _fe_analyzer_shared 6.0.0...
Downloading source_gen 0.9.7+1...
Downloading analyzer 0.39.16...
Downloading test_api 0.2.19-nullsafety.2...
Downloading test_core 0.3.12-nullsafety.5...
Downloading test 1.16.0-nullsafety.5...
Downloading matcher 0.12.10-nullsafety.1...
Downloading path 1.8.0-nullsafety.1...
Downloading async 2.5.0-nullsafety.1...
Downloading pool 1.5.0-nullsafety.1...
Downloading pedantic 1.10.0-nullsafety.1...
Downloading js 0.6.3-nullsafety.1...
Downloading string_scanner 1.1.0-nullsafety.1...
Downloading charcode 1.2.0-nullsafety.1...
Downloading stream_channel 2.1.0-nullsafety.1...
Downloading source_maps 0.10.10-nullsafety.1...
Downloading term_glyph 1.2.0-nullsafety.1...
Downloading boolean_selector 2.1.0-nullsafety.1...
Downloading build_runner 1.10.2...
Downloading source_span 1.8.0-nullsafety.2...
Downloading code_builder 3.5.0...
Downloading source_map_stack_trace 2.1.0-nullsafety.2...
Downloading build_runner_core 6.0.1...
Downloading time_machine 0.9.15...
Downloading resource 2.1.7...
Downloading firebase 7.3.2...
Downloading collection 1.15.0-nullsafety.3...
Downloading build_resolvers 1.3.11...
Downloading typed_data 1.3.0-nullsafety.3...
Downloading stack_trace 1.10.0-nullsafety.4...
Downloading meta 1.3.0-nullsafety.4...
Downloading bazel_worker 0.1.21+1...
Downloading build_web_compilers 2.11.0...
Downloading html 0.14.0+4...
Downloading build_modules 2.11.3...
Downloading coverage 0.14.1...
Downloading node_preamble 1.4.12...
Downloading vm_service 5.2.0...
Downloading sass 1.27.0...
Changed 71 dependencies!
16 packages have newer versions incompatible with dependency constraints.
Try `pub outdated` for more information.

Then webdev. Still the same error.

As for the second error, googling it gets me to https://github.com/flutter/flutter/issues/67319. Apparently I should update build_web_comilers. In my project it's set to 2.9.0, which is from Jan 2020. Ah, indeed, in the changelog of webdev, it does say that my version requires build_web_compilers to be at least version 2.12.0-dev.1.

Setting this to be ^2.12.0, pub get runs and returns:

pub get
Resolving dependencies...
The current Dart SDK version is 2.10.0-7.3.beta.

Because elysium_client depends on build_web_compilers >=2.12.0-dev.2 which requires SDK version >=2.10.0-93.0.dev <3.0.0, version solving failed.

Why is it trying to download the dev version of build_web_compilers?... I don't get it but the developer on the GitHub issue said they used 2.10 successfully. Let's try that.

% webdev build
Can't load Kernel binary: Invalid kernel binary format version.
webdev could not run for this project.
Dart 2.10.2 is incompatible with your dependencies' SDK constraints. Please run "pub get" again.
% pub get
Resolving dependencies... (2.2s)
> collection 1.15.0-nullsafety.3 (was 1.15.0-nullsafety.2)
> test 1.16.0-nullsafety.5 (was 1.16.0-nullsafety.4)
> test_api 0.2.19-nullsafety.2 (was 0.2.19-nullsafety)
> test_core 0.3.12-nullsafety.5 (was 0.3.12-nullsafety.4)
Changed 4 dependencies!
% webdev build
Can't load Kernel binary: Invalid kernel binary format version.
[WARNING] Throwing away cached asset graph due to version mismatch or corrupted asset graph.
[INFO] Reading cached asset graph completed, took 965ms
[INFO] Building new asset graph completed, took 2.7s
[INFO] Found 1 declared outputs which already exist on disk. This is likely because the`.dart_tool/build` folder was deleted, or you [SEVERE] Conflicting outputs were detected and the build is unable to prompt for permission to remove them. These outputs must be removed manually or the build can be run with `--delete-conflicting-outputs`. The outputs are: test/app_po.g.dart
Unhandled exception:
Bad state: Unable to start build daemon.
#0      _handleDaemonStartup (package:build_daemon/client.dart:82:5)
<asynchronous suspension>
#1      BuildDaemonClient.connect (package:build_daemon/client.dart:183:11)
<asynchronous suspension>
#2      connectClient (package:webdev/src/daemon_client.dart:17:23)
#3      BuildCommand.run (package:webdev/src/command/build_command.dart:57:26)
<asynchronous suspension>
#4      CommandRunner.runCommand (package:args/command_runner.dart:197:27)
#5      _CommandRunner.runCommand (package:webdev/src/webdev_command_runner.dart:38:24)
#6      CommandRunner.run.<anonymous closure> (package:args/command_runner.dart:112:25)
#7      new Future.sync (dart:async/future.dart:223:31)
#8      CommandRunner.run (package:args/command_runner.dart:112:14)
#9      run (package:webdev/src/webdev_command_runner.dart:19:56)
#10     main (file:///Users/anhtuan/.pub-cache/hosted/pub.dartlang.org/webdev-2.6.2/bin/webdev.dart:17:22)
#11     _startIsolate.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:299:32)
#12     _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:168:12)

So I delete test/app_po.g.dart manually and try again:

% webdev build
Can't load Kernel binary: Invalid kernel binary format version.
[WARNING] Throwing away cached asset graph due to version mismatch or corrupted asset graph.
[INFO] Reading cached asset graph completed, took 170ms
[INFO] Building new asset graph completed, took 2.3s
[INFO] Checking for unexpected pre-existing outputs. completed, took 5ms
[SEVERE] Throwing away cached asset graph due to version mismatch or corrupted asset graph.
[INFO] Generating SDK summary completed, took 4.0s
[SEVERE]build_web_compilers:entrypoint on web/main.dart: Unable to find modules for some sources, this is usually the result of either a
bad import, a missing dependency in a package (or possibly a dev_dependency
needs to move to a real dependency), or a build failure (if importing a
generated file).

Please check the following imports:

`import 'material_datepicker/date_range_editor.template.dart' as _ref58;` from angular_components|lib/angular_components.template.dart at 65:1
`import 'package:angular_components/material_datepicker/date_range_editor.template.dart' as _ref14;` from angular_components|lib/material_datepicker/material_date_range_picker.template.dart at 22:1


[INFO] Running build completed, took 6.2s
[INFO] Caching finalized dependency graph completed, took 310ms
[SEVERE]angular:angular on package:angular_components/material_datepicker/date_range_editor.dart (cached): Template parse errors:
line 172, column 31 of package:angular_components/material_datepicker/date_range_editor.html: ParseErrorLevel.FATAL: Can't bind to 'popupHandle' since it isn't a known native property or known directive. Please fix typo or add to directives list.
    ╷
172 │                               [popupHandle]="popupHandle"
    │                               ^^^^^^^^^^^^^^^^^^^^^^^^^^^
    ╵

Let's update angular_components and angular_router from dev to the latest stable versions.

Now compilation goes a bit further and fails because of time_machine, one of my project's dependencies:

[SEVERE]build_web_compilers:entrypoint on web/main.dart: Dart2Js finished with:

packages/time_machine/src/calendar_system.dart:8:2:
Error: 'internal' is imported from both 'package:meta/meta.dart' and 'package:time_machine/src/time_machine_internal.dart'.
@internal
 ^^^^^^^^
packages/time_machine/src/calendar_system.dart:8:2:
Error: This can't be used as metadata; metadata should be a reference to a compile-time constant variable, or a call to a constant constructor.
...

But I'm already on the latest version... Turns out it's an issue with time_machine. There's an open issue for it. https://github.com/Dana-Ferguson/time_machine/issues/44. So I'll just wait for now. I hope they fix it soon!

Fast forward 2 days later, and someone posted a workaround. I tried overriding the version to some package like they suggested, and it worked! My app compiles again.

Sign up for more like this.