angular.dart - 相对 URL 解析需要有效的基本 URI

Question

对于那些能够从使用 angular.dart v1.1.0 的 Dart 应用构建工作的 Phonegap 应用的人来说，这是一个问题

我做了一个非常简单的 Dart 应用程序。它只有一个“web”目录，其中包含三个文件：index.html、main.dart 和 config.xml for Phonegap。

index.html 包含在 body 标记的末尾：

<script type="application/dart" src="main.dart"></script>
<script data-pub-inline src="packages/browser/dart.js"></script>

main.dart 包含：

import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';

class AppModule extends Module{
  AppModule(){

  }
}

void main() {
  applicationFactory().addModule(new AppModule()).run();
}

pubspec.yaml 文件包含以下内容：

name: test_app
version: 0.0.1
description: A test app.
environment:
  sdk: '>=1.0.0 <2.0.0'
dependencies:
  angular: any
  browser: any
transformers:
  - angular

config.xml 内容为：

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns   = "http://www.w3.org/ns/widgets"
    xmlns:gap   = "http://phonegap.com/ns/1.0"
    id          = "com.test.app.example"
    versionCode = "10"
    version     = "1.0.0" >

    <name>TestApp PhoneGap Example</name>

    <description>
        An example of phonegap app.
    </description>

    <author href="https://build.phonegap.com">Me</author>

    <gap:platform name="android" />

    <access origin="*"/>
</widget>

我使用 pub build 来构建这个应用程序。这会生成一个包含 web 目录的构建目录。我创建了一个包含 web 目录内容的 .zip 文件。我将 zip 文件上传到生成 .apk 文件的 phonegap build。我将 .apk 文件安装到手机中，使用 USB 电缆将手机连接到笔记本电脑以进行 Chrome 调试。我启动应用程序。

“网络”标签显示一切正常：

file:///android_asset/www/index.html
file:///android_asset/www/packages/browser/dart.js
file:///android_asset/www/main.dart.js
Request method GET, Status code: 200

问题是控制台显示：Relative URL resolution requires a valid base URI

所以该应用程序无法运行。如果我要使用组件、装饰器等，它们将不会因为这个错误而被使用。如果我使用 angular.dart v0.14.0 或在 Dartium 中运行应用程序，我不会遇到这个问题。

那么以前有人遇到过这个问题吗？如果是这样，有没有人找到解决这个问题的方法？

我使用 dart 1.8.5 和 angular.dart 1.1.0

我看过这个：https://github.com/angular/angular.dart/commit/d929109333fe2370f5156df2204177ce37aa5bc0 但这似乎比解决问题造成的问题更多。

提前致谢！

Answer 1

现在我可以通过使用包装类覆盖 ResourceUrlResolver 类来使其工作。见原 _getBaseUri() 方法：

file://packages/angular/core_dom/resource_url_resolver.dart

所以，创建一个包装文件，如：

resource_url_resolver_wrapper.dart

将所有需要的库导入其中：

import 'dart:html';
import 'package:angular/angular.dart';
import 'package:angular/core_dom/type_to_uri_mapper.dart';

将整个 ResourceUrlResolver 类复制到包装文件中并重命名为：

class ResourceUrlResolverWrapper implements ResourceUrlResolver

把 _getBaseUri() 改成这样：

static String _getBaseUri() {
  return "${Uri.base.scheme}://${Uri.base.authority}/";
}

现在转到您的 main.dart 文件并：

import 'package:yourApp/wrapper/location/resource_url_resolver_wrapper.dart';

并将其添加到应用模块：

bind(ResourceResolverConfig, toValue: new ResourceResolverConfig.resolveRelativeUrls(false));
bind(ResourceUrlResolver, toImplementation: ResourceUrlResolverWrapper);

它应该是这样的：

import 'package:angular/angular.dart';
import 'package:angular/application_factory.dart';
import 'package:yourApp/wrapper/location/resource_url_resolver_wrapper.dart';

class AppModule extends Module{
    AppModule(){
        bind(ResourceResolverConfig, toValue: new ResourceResolverConfig.resolveRelativeUrls(false));
        bind(ResourceUrlResolver, toImplementation: ResourceUrlResolverWrapper);
    }
}

void main(){
  applicationFactory().addModule(new AppModule()).run();
}

现在您可以构建您的应用，将其压缩并上传到 Phonegap 构建。将它安装在您的手机上，它会工作。也许这会破坏其他东西。就我而言，它适用于 Phonegap 构建。

我希望找到一个更好的解决方案，所以也许其他人可以为此分享一个更清洁的解决方案。

谢谢