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

Question

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

我正在做这个 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：

1. 在web目录上设置http服务器（此处是index.html文件）。
2. 运行此服务器（例如在8086 port0上）
3. 在dartium中打开localhost:8086 。

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

更新：

当我尝试使用Dartium打开index.html时，我在IDEA的pub serve选项卡中得到了这个：

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更为有效，因为在修改源代码后不需要重新pub build整个应用程序。 它可以重用代码未更改的缓存部分，因此速度更快。

已知问题

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

Answer 2

我正在使用IntelliJ IDEA 2016.3，右键单击web / index.html时仍然没有运行/调试。 我的项目被认为是Dart项目（查看pubspec.yaml时会显示“ Pub”操作）。

当我在Browser | Dartium中打开时，会发生两件事：

1）问题描述

Dartium的URL为http：// localhost：63342 / enighet_register / web / index.html？_ijt = kg22cgo907ps6ivcv3sm5dmvt1 ，它会显示永久性加载，因为控制台日志显示为Dartium无法从Web目录中找到其他资源（例如，已请求）通过http：// localhost：63342 / main.dart ）。 如果比较这两个URL，则会注意到第一个保留了项目名称和Web目录，而第二个相对于index.html。 这似乎是问题的根源。 （main.dart可通过http：// localhost：63342 / enighet_register / web / main.dart获得 ）

2）解决方法

在Dartium中打开文件还会在IntelliJ中启动“发布服务”选项卡（“ Dart分析”和“终端”选项卡旁边）。 在这里，我们得到以下内容：“在http：// localhost：39030上为enighet_register网站提供服务”在Dartium（或其他浏览器）中打开此url可以正常工作（端口是动态的，因此请每次检查输出）。

虽然不确定是否可以在IntelliJ中进行调试，但是可以在Dartium中设置断点并进行调试！