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

Question

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

我正在做this Angular2-Dart教程。

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

另外，我可以运行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打开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

这是pic：

Answer 1

在Dartium中运行和调试

在IDEA（或WebStorm）中，您只需右键点击web/index.html，然后选择 Run (index.html) 或 Debug (index.html) 和IDEA应该

• 启动pub serve
• 启动Dartium
• load index.html

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

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

您还应该能够将网址从Dartium复制到Chrome或其他浏览器，而pub serve可以提供Dart-to-JavaScript转换后的应用程序。这比pub build更有效，因为它不需要在修改源之后重建整个应用程序。它可以重用代码没有改变的缓存部分，因此速度更快。

已知问题

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

Answer 2

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

当我在浏览器中打开| Dartium时会发生两件事：

1）问题描述

Dartium打开，其中显示永久加载的网址http://localhost:63342/enighet_register/web/index.html?_ijt=kg22cgo907ps6ivcv3sm5dmvt1，因为控制台日志显示为Dartium无法从网络目录中找到其他资源（例如通过http://localhost:63342/main.dart请求）。如果比较这两个URL，您会注意到第一个保留了项目名称和web目录，而第二个保留了index.html。这似乎是问题的根源。 （main.dart可通过http://localhost:63342/enighet_register/web/main.dart）

获取

2）解决方法

在Dartium中打开文件也会启动IntelliJ中的Pub Serve选项卡（在Dart Analysis-和Terminal-tab旁边）。在这里，我们得到的线： “在http://localhost:39030上提供enighet_register网页” 在Dartium（或其他浏览器）中打开此URL可以很好地工作（端口是动态的，因此每次检查输出）。

不确定您是否可以在IntelliJ中调试，但您可以在Dartium中设置断点和调试！