Populating @Component's styleUrls attribute throws an exception with Dart SDK 2.4.0

[scsims]

• [ 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:

1. Upgrade to Dart SDK v2.4.0 (and webdev 2.2.0)
2. git clone https://github.com/angular-examples/quickstart.git
3. Update dependencies build_runner to 1.6.1 and build_web_compilers to 2.1.1 as required by webdev 2.2.0
4. Create lib/mystyles.css
5. Open lib/app_component.dart
6. Add the following to AppComponent's @component annotation:
   styleUrls: const [ 'mysstyles.css', ],
7. webdev serve

[warenix]

Same on

• angular: ^6.0.0-alpha
• build_runner: ^1.6.0
• build_web_compilers: ^2.1.1

[leonsenft]

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]

@scsims I'm not able to reproduce this. What exactly are the contents of lib/mystyles.css?

[warenix]

@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

1. Checkout sample code

   git clone git@github.com:dart-lang/angular.git
   cd angular/examples/registration_form

2. Modify pubspec.yml to 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.

3. Start webdev

   pub get
   webdev serve web:8080

4. Test 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

[scsims]

@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?

[leonsenft]

@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.

[warenix]

@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

[AnasSafi]

I was faced same problem on Firefox, when i changed the browser to Chrome the problem solved!

[leonsenft]

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.

[warenix]

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"

[leonsenft]

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 dart-lang/sdk#37492 to see about getting this issue fixed in Firefox.