Some features not working with enhance mode

Framework Knowledge
1

Hi all ,
I’m using Aurelia with enhance mode (with existing asp.net mvc site)
Some of Aurelia features aren’t working : Inject , autoinject , @bindable

Is there a reason may cause this ? Is there a best practice to use aurelia in an existing site.

Here is the code I’m using to initialize Aurelia :slight_smile:

<script type="text/javascript">
    window.BaseWebAPIUrl  = '@(ViewBag.BaseWebAPIUrl)';
    function applyAurelia() {
        requirejs(['aurelia-bootstrapper', 'aurelia-event-aggregator'], function (bootstrapper, aggregator) {
            bootstrapper.bootstrap(function (aurelia) {
                requirejs(['modules/violation/violationSummaries'], function (r) {
                    aurelia.use
                        .defaultBindingLanguage()
                        .defaultResources()
                        .feature("resources")
                        .developmentLogging();

                    var vm = new r.ViolationSummaries;
                    aurelia.start().then(function () {
                        aurelia.enhance(vm, document.body);
                    });
                });
            });
        });
    }
</script>

Thanks in advance …

2

Is there a reason may cause this ?

enhance : you enhance an existing Element in 2 steps:

It doesn’t process <require/>, it doesn’t load any extra resources automatically, unlike setRoot.

Is there a best practice to use Aurelia in an existing site.

Is there a best practice to use Aurelia in an existing site ?

3

Inject and the rest should work
but you have to register all your components as global resources

4

Please look at the code I used to initialize Aurelia (I edited the post)

5

Do you have

    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,

in you tsconfig.json ?
decorators like @autoinject need those to work

6

If you are wondering why your root view model (created by var vm = new r.ViolationSummaries;) doesn’t have the dependencies declared with @inject or @autoinject. Then change that to this:

 var vm = new aurelia.container.get(r.ViolationSummaries);
7

I’m failing in this line -
var resolver = this._resolvers.get(key);

_resolvers is undefined !!

8

use aurelia in an existing site

About a 1 year back I created a pivot table view in existing MVC 5 project.
Didn’t use enhance, want to share how I did it back then, but not saying this is “best practice”.

The project has a tree view and when the user selects an item, it calls a method in the app.ts of the Aurelia app. This updates the pivot table view when this view mode is activated.

Inside the *.cshtml

<div id="aureliaPivot" aurelia-app="main">
    <script src="@Model.VendorBundle" data-main="aurelia-bootstrapper"></script>
</div>

function selectProjectItem(selectedId) {
        require(['app'], function (module) {
            var App = module.App;
            var appRoot = $("#aureliaPivot")[0];
            var container = appRoot.aurelia.container;
            var app = container.get(App);
            app.selectProjectItem(selectedId);
        });
}

and in the Aurelia SPA

export class App {
    private router: Router;
    ...
    public selectProjectItem(projectItemId: Number) {
        this.selectedProjectItemId = projectItemId;
        this.router.navigateToRoute('pivot', { id: projectItemId });
    }
}
1 Like