angular.dart - Relative URL resolution requires a

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

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.

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>

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();
}

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 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>

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

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

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?

I use dart 1.8.5 and angular.dart 1.1.0

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

Thanks in advance!

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';

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

class ResourceUrlResolverWrapper implements ResourceUrlResolver

Change _getBaseUri() to this:

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

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);

This is how it should look like:

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();
}

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.

Thanks