2

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

我正在做这个Angular2-Dart 教程。

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

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

如何在 Dartium 中正确运行应用程序？我要web/index.html在 IDEA 中归档，按 Alt + F2（打开变体以打开应用程序）并按 dartium。我现在看不到有效的应用程序。我只看到Loading...消息（因为我的 html 是<my-app>Loading...</my-app>）。

我看到这个窗口在此处输入图像描述

另外，在开发 Dart 应用程序时使用 Dartium Web 浏览器有什么好处？例如，pub serve在每次页面刷新时重新编译 Dart 代码。这真的需要很多时间。可能我不会花那么多时间用 Dartium 编译？

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

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

一段时间后应用程序正确打开。我的intellij想法可能有问题吗？

更新：

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

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

这是图片： 在此处输入图像描述

4

2 回答 2

2

在 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 版本。

于 2016-06-09T19:35:03.307 回答
1

我正在使用 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 中启动 Pub Serve 选项卡（在 Dart 分析和终端选项卡旁边）。在这里，我们得到这一行：“在http://localhost:39030上服务 enighet_register web ”在 Dartium（或其他浏览器）中打开这个 url 工作得非常好（端口是动态的，所以每次都要检查输出）。

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

于 2016-12-08T14:09:29.127 回答