Angular: Populating @Component's styleUrls attribute throws an exception with Dart SDK 2.4.0
- [ Dart VM version: 2.4.0 (Unknown timestamp) on "linux_x64"] Dart SDK Version (
dart --version) - [5.0.0] AngularDart Version (i.e.
4.0.0,5.0.0-alpha+5,MASTER) - [Linux] Whether you are using Windows, macOS, or Linux (if applicable)
- [Firefox] Whether you are using Chrome, Safari, Firefox, Edge (if applicable)
* [build_runner: 1.6.1, build_web_compilers: 2.1.1, webdev: 2.2.0] Any other packages or constraints we should know about
Having upgraded to Dart SDK v2.4.0, the https://github.com/angular-examples/quickstart project throws the following exception in Firefox once styleUrls[] is added to AppComponent's @Component annotation:
`EXCEPTION: Failed assertion: boolean expression must not be null
STACKTRACE:
dart:sdk_internal 8984:25 replaceAll]
package:angular/src/bootstrap/packages/angular/src/core/linker/style_encapsulation.dart 130:29 _flattenStyles
package:angular/src/bootstrap/packages/angular/src/core/linker/style_encapsulation.dart 123:7 _flattenStyles
package:angular/src/bootstrap/packages/angular/src/core/linker/style_encapsulation.dart 96:66 [_appendStyles]
package:angular/src/bootstrap/packages/angular/src/core/linker/style_encapsulation.dart 52:5 __
package:angular/src/bootstrap/packages/angular/src/core/linker/style_encapsulation.dart 66:28 scoped
package:angular_app/packages/angular_app/app_component.template.dart 57:81 initComponentStyles
package:angular_app/packages/angular_app/app_component.template.dart 28:5 new
package:angular_app/packages/angular_app/app_component.template.dart 76:19 build
package:angular/src/bootstrap/packages/angular/src/core/linker/app_view.dart 258:12 createHostView
package:angular/src/bootstrap/packages/angular/src/core/linker/component_factory.dart 104:20 create
package:angular/src/bootstrap/packages/angular/src/core/application_ref.dart 70:41
package:angular/src/bootstrap/packages/angular/src/core/change_detection/host.dart 247: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 245: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 5: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
dart_sdk.js:102091:66
`
Steps to reproduce:
- Upgrade to Dart SDK v2.4.0 (and webdev 2.2.0)
- git clone https://github.com/angular-examples/quickstart.git
- Update dependencies build_runner to 1.6.1 and build_web_compilers to 2.1.1 as required by webdev 2.2.0
- Create lib/mystyles.css
- Open lib/app_component.dart
- Add the following to AppComponent's @Component annotation:
styleUrls: const [ 'mysstyles.css', ], - webdev serve
scsims
All 11 comments
Same on
- angular: ^6.0.0-alpha
- build_runner: ^1.6.0
- build_web_compilers: ^2.1.1
warenix
on 2 Jul 2019
Thanks for reporting. I'm guessing 2.4.0 either introduced a bug in replaceAll(), or more likely is now throwing when given a null parameter that previously was just accepted.
leonsenft
on 2 Jul 2019
@scsims I'm not able to reproduce this. What exactly are the contents of lib/mystyles.css?
leonsenft
on 2 Jul 2019
@leonsenft Please refer to repo below
Environment:
❯ dart --version
Dart VM version: 2.4.0 (Unknown timestamp) on "linux_x64"
angular/examples/registration_form git/master*
❯ webdev --version
2.2.0
Checkout sample code
git clone [email protected]:dart-lang/angular.git cd angular/examples/registration_formModify
pubspec.ymlto use latest libraries--- a/examples/registration_form/pubspec.yaml +++ b/examples/registration_form/pubspec.yaml @@ -6,14 +6,14 @@ environment: dependencies: # No strict dependencies, we always use dependency_overrides. angular: - angular_components: ^0.12.0 + angular_components: ^0.14.0-alpha # No strict dependencies, we always use dependency_overrides. angular_forms: dev_dependencies: - build_runner: ^1.0.0 + build_runner: ^1.6.0 build_test: ^0.10.2+5 - build_web_compilers: ^2.0.0 + build_web_compilers: ^2.1.1 sass_builder: ^2.0.0 # DO NOT REMOVE. We don't publish this package, it is just for testing.Start webdev
pub get webdev serve web:8080Test on browser http://localhost:8080 with console opened. You should see error message:
EXCEPTION: Failed assertion: boolean expression must not be null STACKTRACE: dart:sdk_internal 8984:25 replaceAll] package:angular/src/bootstrap/packages/angular/src/core/linker/style_encapsulation.dart 130:29 _flattenStyles package:angular/src/bootstrap/packages/angular/src/core/linker/style_encapsulation.dart 123:7 _flattenStyles package:angular/src/bootstrap/packages/angular/src/core/linker/style_encapsulation.dart 96:66 [_appendStyles] package:angular/src/bootstrap/packages/angular/src/core/linker/style_encapsulation.dart 52:5 __ package:angular/src/bootstrap/packages/angular/src/core/linker/style_encapsulation.dart 66:28 scoped package:angular_components/material_input/packages/angular_components/material_input/material_input.template.dart 468:82 initComponentStyles package:angular_components/material_input/packages/angular_components/material_input/material_input.template.dart 124:10 new package:examples.registration_form/root/packages/examples.registration_form/root/root_component.template.dart 117:32 build package:angular/src/bootstrap/packages/angular/src/core/linker/views/component_view.dart 87:5 createAndProject package:angular/src/bootstrap/packages/angular/src/core/linker/views/host_view.dart 89:19 create package:angular/src/bootstrap/packages/angular/src/core/linker/component_factory.dart 128:20 create package:angular/src/bootstrap/packages/angular/src/core/application_ref.dart 70:41 <fn> package:angular/src/bootstrap/packages/angular/src/core/change_detection/host.dart 185:26 <fn> package:angular/src/core/change_detection/packages/angular/src/core/zone/ng_zone.dart 144:18 <fn> dart:sdk_internal 28349:14 run package:angular/src/core/change_detection/packages/angular/src/core/zone/ng_zone.dart 141:18 [_run] dart:sdk_internal 28555:14 run package:angular/src/core/change_detection/packages/angular/src/core/zone/ng_zone.dart 303: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 183: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 210:16 runApp main.dart 8:3 main webdev/src/serve/injected/client.js 11440:45 $0 webdev/src/serve/injected/client.js 3424:26 <fn> webdev/src/serve/injected/client.js 1188:72 <fn> 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 <fn> webdev/src/serve/injected/client.js 1188:72 <fn> 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 <fn> dart_sdk.js:102091:66
warenix
on 3 Jul 2019
@leonsenft The contents of mystyles.css could be anything (or it could be empty); I first saw the issue on the internal project that I'm working on but then reproduced it within "quickstart". The content of mystyles.css that I have here as an example is:
h1 {
color: red;
}
I notice that @warenix is also on Linux; perhaps it's specific to the Linux implementation of Dart 2.4.0?
scsims
on 3 Jul 2019
@warenix Thank you for the detailed steps. Unfortunately I followed your steps exactly, and the application runs fine without throwing that exception.
Can you please run pub deps -s list and share the output? That way I can compare our dependencies and make sure I'm testing the exact same versions of everything.
@scsims Thanks. The operating system shouldn't matter, because this exception is occurring in the browser which would share the same code regardless. I'm also on Linux and not able to reproduce.
leonsenft
on 3 Jul 2019
@leonardortlima Please find the dependencies list in this file: https://github.com/warenix/angulardart240bug/blob/master/deps.list
I created a demo repo for you to test: https://github.com/warenix/angulardart240bug
warenix
on 4 Jul 2019
I was faced same problem on Firefox, when i changed the browser to Chrome the problem solved!
AnasSafi
on 8 Jul 2019
Ah! I'm sorry @scsims I'd overlooked that you had reported the issue in Firefox. Given @AnasSafi's comment it seems likely that's the cause.
I'm a little confused, since the main page for DDC claims it supports any modern browser, but then the FAQ mentions that Chrome is the only supported browser, and that other modern browsers may work.
I'll double check that I can reproduce the issue on Firefox. If so, I'll try to reduce the reproduction to something in pure Dart and move this issue to the Dart SDK repo.
leonsenft
on 8 Jul 2019
Same error is found on Firefox (67.0.4 (64-bit)) on windows while Chrome (Version 75.0.3770.100 (Official Build) (64-bit)) is working fine.
λ dart --version
Dart VM version: 2.5.0-dev.1.0 (Tue Jul 9 15:27:01 2019 +0200) on "windows_x64"
I got confirmation that DDC is only officially supported in Chrome, and the page has been updated accordingly.
This is just an issue with the output DDC produces in Firefox. Unfortunately there's nothing Angular can do about it. I've filed https://github.com/dart-lang/sdk/issues/37492 to see about getting this issue fixed in Firefox.
leonsenft
on 10 Jul 2019
Related issues
ranquild
·
6Comments
filiph
·
4Comments
supermuka
·
5Comments
matanlurey
·
3Comments
Adamovskiy
·
6Comments
Most helpful comment
I was faced same problem on Firefox, when i changed the browser to Chrome the problem solved!