angular.dart - 相对 URL 解析需要有效的基本 URI [英] angular.dart - Relative URL resolution requires a valid base URI

问题描述

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

This is a question for those of you who were able to build a working Phonegap app from a Dart app that uses angular.dart v1.1.0

我制作了一个非常简单的 Dart 应用程序.它只有一个web"目录，其中包含三个文件:index.html、main.dart 和 Phonegap 的 config.xml.

I made a very simple Dart app. It has only a "web" directory containing three files: index.html, main.dart and config.xml for Phonegap.

index.html 包含在 body 标签的末尾:

The index.html contains at the end of body tag:

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

main.dart 包含:

The main.dart contains:

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 文件包含以下内容:

The pubspec.yaml file contains this:

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 内容为:

config.xml content is:

<?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 调试.我启动应用程序.

I use pub build to build this app. This generates a build directory containing a web directory. I create a .zip file with the content of the web directory. I upload the zip file to phonegap build which generates the .apk file. I install the .apk file into my phone, connect the phone to the laptop using USB cable for Chrome debugging. I start the app.

网络"选项卡显示一切正常:

The "Network" tab shows that everything is in order:

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

The problem is that the Console shows: Relative URL resolution requires a valid base URI

因此该应用程序不起作用.如果我要使用组件、装饰器等，它们将不会因为这个错误而被使用.如果我使用 angular.dart v0.14.0 或在 Dartium 中运行该应用程序，则不会出现此问题.

So the app does not work. If I were to use Components, Decorators and so on they will not have been used because of this error. I do not have this problem if I use angular.dart v0.14.0 or if I run the app in Dartium.

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

So did anyone encounter this problem before? If so, did anyone find a solution to this problem?

我使用 dart 1.8.5 和 angular.dart 1.1.0

I use dart 1.8.5 and angular.dart 1.1.0

我见过这个:https://github.com/angular/angular.飞镖/提交/d929109333fe2370f5156df2204177ce37aa5bc0但这似乎比解决问题带来的问题更多.

I've seen this: https://github.com/angular/angular.dart/commit/d929109333fe2370f5156df2204177ce37aa5bc0 but it seems to create more problems than fixing them.

提前致谢！

推荐答案

现在我能够通过使用包装类覆盖 ResourceUrlResolver 类来使其工作.见原文 _getBaseUri() 方法:

For now I was able to make it work by overwriting ResourceUrlResolver class using a wrapper class. See the original _getBaseUri() method in:

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

因此，创建一个包装文件，例如:

So, create a wrapper file like:

resource_url_resolver_wrapper.dart

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

Import all the needed libraries into it:

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

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

Copy the entire ResourceUrlResolver class into the wrapper file and rename it to:

class ResourceUrlResolverWrapper implements ResourceUrlResolver

将 _getBaseUri() 改为:

Change _getBaseUri() to this:

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

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

Now go to your main.dart file and:

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

并将其添加到应用模块:

And add this to the app module:

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 build.将它安装在您的手机上，它将起作用.也许这会破坏其他东西.就我而言，它适用于 Phonegap 构建.

Now you can build your app, zip it and upload it to Phonegap build. Install it on your phone and it will work. Maybe this will broke something else. As far as I'm concerned, it works with Phonegap build.

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

I hope to find a better solution, so maybe someone else can share a cleaner solution for this.

谢谢

这篇关于angular.dart - 相对 URL 解析需要有效的基本 URI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！