Search code examples
c#angularjslazy-loadingawesomium

LazyLoading AngularJs module with css file fails with Awesomium web view


I try to lazy load an AngularJs module with ocLazyLoad. It all works fine until I add a css file, then the AngularJs application does not work. Here the code that works for any browsers and also CEF but not for Awesomium:

(you can easily test with the Awesomium Tabbed Browser Example)

index.html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="https://code.jquery.com/jquery-1.11.2.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.7/angular.js"></script>
    <script src="ocLazyLoad.js"></script>
</head>
<body>
    <div id="example" ng-app="LazyLoadTest" ng-controller="TestController">
    </div>
    <script>
        angular.module("LazyLoadTest", [ "oc.lazyLoad"])
            .controller("TestController", function($scope, $ocLazyLoad, $compile){
                $ocLazyLoad.load({
                        name: "testApp",
                        files: ["testApp.js", "testApp.css"],
                        serie: true
                    }).then(function () {
                        var el, elToAppend;
                        elToAppend = $compile('<say-hello to="world"></say-hello>')( $scope );
                        el = angular.element('#example');
                        el.append(elToAppend);
                    }, function (e) {
                        console.log(e);
                    })
        });
    </script>
</body>
</html>

testApp.js:

(function () {
    'use strict';
    angular.module("testApp", []).directive("sayHello", function () {
        return {
            scope: {
                to: '@to'
            },
            restrict: "E",
            template: '<p>Hello {{to}}</>'
        };
    });
})();

testApp.css:

body{color: red;}

Is this a problem of Awesomium or ocLazyLoad? Is there a work-around?

EDIT:

Very interesstingly if you test with the WPF example the CSS is not applied at all, in the WinForms example it is. But for both the AngularJs directive does not work.


Solution

  • The problem is most certenly with awesomium. It's using the chromium version 18, and a current version is 40. I am having the same problem with it too. I've tried CEF, but the problem with cef is that i get poor performance with it. Next i tried with GeckoFx, but any version from bitbucket that i tried just plain didn't compile...