intellij-idea - 如何从IDEA在Dartium浏览器中正确运行Angular2 dart应用程序？

Question

如何在Dartium中正确打开Dart应用程序？

我正在做this Angular2-Dart教程。

要获得可用的应用程序，我可以运行pub build命令，然后在build/web目录中启动http服务器，并且应用程序将正常运行。

另外，我可以运行pub serve命令，然后在浏览器中打开localhost:8080地址，等待一段时间进行Dart编译，该应用程序也将运行。

如何在Dartium中正确运行应用程序？我要转到IDEA中的web/index.html文件，按Alt + F2(打开用于打开应用程序的变体)，然后按dartium。我现在看不到正在运行的应用程序。我只看到Loading...消息(因为我的html是<my-app>Loading...</my-app>)。

我看到这个窗口

此外，在开发Dart应用程序时使用Dartium Web浏览器有什么好处？例如，pub serve在每次刷新页面时重新编译Dart代码。这确实需要很多时间。也许我不会花太多时间用Dartium进行编译？

我可以正确打开Dart应用程序的一种方法是dartium:

在web目录(此处为index.html文件)上设置http服务器。

运行此服务器(例如在8086 port0上

在dartium中打开localhost:8086。

一段时间后，应用程序将正确打开。我的Intellij想法可能存在一些问题？

更新:

当我尝试使用Dartium打开 pub serve时，我在IDEA的 index.html选项卡中获得了此功能:

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.

我在Dartium中看到了这一点:


当我尝试使用Chrome打开index.html时收到以下文本:

    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

这是图片:

Answer 1

在Dartium中运行和调试

在IDEA(或WebStorm)中，您可以右键单击web/index.html并选择 Run (index.html) 或 Debug (index.html) ，IDEA应该

开始pub serve

启动Dartium

加载index.html

我不知道 Alt + F2会做什么，因为有各种键盘快捷键设置。

在Chrome，Firefox，Safari等...中运行

您还应该能够将URL从Dartium复制到Chrome或其他浏览器，并且pub serve服务于Dart-to-JavaScript转译应用程序。这比pub build更为有效，因为在修改源代码后不需要重建整个应用程序。它可以重用代码未更改的缓存部分，因此速度更快。

已知问题

最近有一个IDEA(和WebStorm)问题，导致与您描述的行为类似。请检查您是否拥有最新的IDEA版本。