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

Question

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:

Answer 1

I'm using IntelliJ IDEA 2016.3 and there is still no Run/Debug when right-clicking on web/index.html. My project is recognized as a Dart project (Pub actions are displayed when looking at pubspec.yaml).

When i Open in Browser|Dartium two things happen:

1) Problem description

Dartium opens with the url http://localhost:63342/enighet_register/web/index.html?_ijt=kg22cgo907ps6ivcv3sm5dmvt1 which displays forever loading because as the console log shows as Dartium is unable to find the other resources from the web directory (e.g. requested via http://localhost:63342/main.dart ). If you compare these two urls you notice that the first one retains the project name and web-directory, while the second one is relative to index.html. This seems to be the source of the problem. (main.dart is available via http://localhost:63342/enighet_register/web/main.dart)

2) Workaround

Opening the file in Dartium also starts the Pub Serve-tab in IntelliJ (next to the Dart Analysis- and Terminal-tab). Here we get the line: "Serving enighet_register web on http://localhost:39030" opening this url in Dartium (or other browsers) works perfektly fine (the port is dynamic, so check the output each time).

Not sure if you can debug in IntelliJ though, but you can set breakpoints and debug within Dartium!

Answer 2

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.