dart - 在 AngularDart 中，我应该如何在 templateUrl 中引用我的模板，以便它们同时适用于 Dartium 和 dart2js？

Question

我目前有这个目录布局:

project
    web
        app.html
        main.dart
        templates
            app.html
            alerts.html
            menu.html
        components
            AppComponent.dart
            AlertsComponent.dart
            MenuComponent.dart
        resources
            css
                bootstrap.css

我的组件看起来像:

@Component(
    selector: 'app',
    templateUrl: 'templates/app.html'
)
class AppComponent { ... }

我的应用程序的 index.html(在另一个项目中)来自 /client , 和 project/web来自 /project .以上在 Dartium 中有效，但我收到来自 pub build 的错误:

[Warning from _Serial on project|web/main.dart with input project|web/components/AppComponent.dart]:
line 3, column 1 of web/components/AppComponent.dart: Unable to find templates/app.html at project|templates/app.html
@Component(
^^^^^^^^^^^

和

[Warning from _Serial]:
Unable to find webatara|web/main.dart from html_files in pubspec.yaml.

和

[Warning from TemplateCacheGenerator]:
Can't find asset web/web/templates/app.html.

取决于我在 templateUrl 中使用的路径组合和 html_files (对于 Angular 的变压器)。

在 templateUrl 中，究竟应该去哪里以及如何引用它和 pubspec.yaml ?

更新:我可以通过将模板移至 lib 来消除构建错误。目录并使用 templateUrl: 'packages/project/templates/app.html' ，但随后 Dartium 尝试将其加载为 /packages/project/templates/app.html ，而不是 /project/packages/project/templates/app.html ，这是正确的。我看不到任何方法可以告诉它基本 URL 是什么。

Answer 1

but then Dartium tries to load that as /packages/project/templates/app.html, and not /project/packages/project/templates/app.html, which would be correct. I don't see any way to tell it what the base URL is.

我相信您使用的是 angulardart 1.1.1 或 1.1.2？从 1.1.0 切换到 1.1.2 后，我们的项目中遇到了同样的问题。这是自 1.1.1 版以来添加的奇怪行为。

出于某种原因，AngularDart 中的默认包根目录现在是“/packages/”。这会导致生成根相对 URL。在您的情况下，它会生成

/packages/project/templates/app.html

代替

packages/project/templates/app.html

当您的应用程序位于域的根目录中时，没关系。但是在您的情况下，您需要做的是在 main.dart 中的初始化方法中添加以下内容:

bind(ResourceResolverConfig, toValue: new ResourceResolverConfig
         .resolveRelativeUrls(true, packageRoot: 'packages/'));

这将覆盖 angular 的默认包根目录，并使其生成正确的相对 URL。

希望能帮助到你。