How to correctly run Angular2 dart application in Dartium browser from IDEA?

Issue

How to correctly open Dart application in Dartium?

I am doing this Angular2-Dart tutorial.

To get working application, I can run pub build command, then start http server on build/web directory and applciation will work correctly.

Also, I can run pub serve command, then open localhost:8080 address in browser, wait some time for Dart compilation and the application will work too.

How to correctly run application in Dartium? I am going to web/index.html file in IDEA, press Alt + F2 (to open variants to open application with) and press dartium. I don’t see working application now. I see only Loading... message (because my html is <my-app>Loading...</my-app>).

I see this window

Also, what are benefits of using Dartium web browser when developing Dart application? For example, pub serve recompile Dart code on each page refresh. It takes really much time. May be I wouldn’t spend so much time for compilation with Dartium?

One way, I can correctly open my Dart application is dartium is:

1. Set up http server on web directory (index.html file is here).
2. Run this server (for example on 8086 port0
3. Open localhost:8086 in dartium.

After some time application is correctly opened. May be there is some problems with my intellij idea?

Update:

I got this in pub serve tab in IDEA when I am trying to open index.html with Dartium:

C:\tools\dart-sdk\bin\pub.bat serve web --port=53852
Loading source assets...
Loading angular2 and dart_to_js_script_rewriter transformers...
Serving ng2_hero_app web on http://localhost:53852
[web] GET index.html => (cached) ng2_hero_app|web/index.html
[web] GET Served 9 cached assets.
Build completed successfully
[web] GET Served 2 cached assets.
[web] GET Served 3 cached assets.
[web] GET packages/angular2/src/core/metadata.dart => (cached) angular2|lib/src/core/metadata.dart
[web] GET packages/angular2/src/core/util.dart => (cached) angular2|lib/src/core/util.dart
[web] GET packages/angular2/src/core/di.dart => (cached) angular2|lib/src/core/di.dart
[web] GET packages/angular2/src/facade/facade.dart => (cached) angular2|lib/src/facade/facade.dart
[web] GET packages/angular2/src/core/application_ref.dart => (cached) angular2|lib/src/core/application_ref.dart
[web] GET packages/angular2/src/core/application_tokens.dart => (cached) angular2|lib/src/core/application_tokens.dart
[web] GET packages/angular2/src/core/zone.dart => (cached) angular2|lib/src/core/zone.dart
[web] GET packages/angular2/src/core/render.dart => (cached) angular2|lib/src/core/render.dart
[web] GET packages/angular2/src/core/linker.dart => (cached) angular2|lib/src/core/linker.dart
[web] GET packages/angular2/src/core/debug/debug_node.dart => (cached) angular2|lib/src/core/debug/debug_node.dart
[web] GET packages/angular2/src/core/testability/testability.dart => (cached) angular2|lib/src/core/testability/testability.dart
[web] GET packages/angular2/src/core/change_detection.dart => (cached) angular2|lib/src/core/change_detection.dart
[web] GET packages/angular2/src/core/platform_directives_and_pipes.dart => (cached) angular2|lib/src/core/platform_directives_and_pipes.dart
[web] GET packages/angular2/src/core/platform_common_providers.dart => (cached) angular2|lib/src/core/platform_common_providers.dart
[web] GET packages/angular2/src/core/application_common_providers.dart => (cached) angular2|lib/src/core/application_common_providers.dart
[web] GET packages/angular2/src/core/reflection/reflector.dart => (cached) angular2|lib/src/core/reflection/reflector.dart
[web] GET packages/angular2/src/core/reflection/types.dart => (cached) angular2|lib/src/core/reflection/types.dart
[web] GET packages/angular2/src/core/reflection/platform_reflection_capabilities.dart => (cached) angular2|lib/src/core/reflection/platform_reflection_capabilities.dart
[web] GET packages/angular2/src/facade/lang.ngfactory.dart => (cached) angular2|lib/src/facade/lang.ngfactory.dart
[web] GET packages/angular2/src/platform/browser_common.ngfactory.dart => (cached) angular2|lib/src/platform/browser_common.ngfactory.dart
[web] GET packages/angular2/core.ngfactory.dart => (cached) angular2|lib/core.ngfactory.dart
[web] GET packages/angular2/src/core/angular_entrypoint.ngfactory.dart => (cached) angular2|lib/src/core/angular_entrypoint.ngfactory.dart
[web] GET packages/angular2/src/facade/collection.dart => (cached) angular2|lib/src/facade/collection.dart
[web] GET packages/angular2/src/core/change_detection/change_detection.dart => (cached) angular2|lib/src/core/change_detection/change_detection.dart
[web] GET packages/angular2/src/core/metadata/di.dart => (cached) angular2|lib/src/core/metadata/di.dart
[web] GET Served 2 cached assets.

And I see this in Dartium:

I got this text when I try to open index.html with Chrome:

    C:\tools\dart-sdk\bin\pub.bat serve web --port=54019
Loading source assets...
Loading angular2 and dart_to_js_script_rewriter transformers...
Serving ng2_hero_app web on http://localhost:54019
[web] GET index.html => (cached) ng2_hero_app|web/index.html
[web] GET Served 3 cached assets.
Build completed successfully

And this is pic:

Solution

Run and debug in Dartium

In IDEA (or WebStorm) you can just right-click on web/index.html and select Run (index.html) or Debug (index.html) and IDEA should

• start pub serve
• start Dartium
• load index.html

I don’t know what Alt + F2 does because there are various of keyboard shortcut settings.

Run in Chrome, Firefox, Safari, …

You should also be able to just copy the URL from Dartium to Chrome or other browsers and pub serve serves the Dart-to-JavaScript transpiled application. This is more efficient than pub build because it doesn’t need to rebuild the entire application after a modification of the source. It can reuse cached parts where code didn’t change and is therefore much faster.

Known issue

There was an IDEA (and WebStorm) issue recently that resulted in a behavior similar to the one you describe. Please check you have the latest IDEA version.

Answered By – Günter Zöchbauer

Answer Checked By – Robin (FlutterFixes Admin)