# Some features not working with enhance mode

**URL:** <https://discourse.aurelia.io/t/some-features-not-working-with-enhance-mode/907>\
**Category:** Framework Knowledge\
**Created:** [March 14, 2018, 10:01am UTC](https://discourse.aurelia.io/t/some-features-not-working-with-enhance-mode/907 "2018-03-14T10:01:20Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![wasimf](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/wasimf/32/651_2.png) [@wasimf](https://discourse.aurelia.io/u/wasimf)\
**Post date:** [March 14, 2018, 10:01am UTC](https://discourse.aurelia.io/t/some-features-not-working-with-enhance-mode/907/1 "2018-03-14T10:01:20Z")

</div>

Hi all ,  
I’m using Aurelia with enhance mode (with existing [asp.net](http://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 🙂

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [March 14, 2018, 11:18am UTC](https://discourse.aurelia.io/t/some-features-not-working-with-enhance-mode/907/2 "2018-03-14T11:18:26Z")

</div>

> Is there a reason may cause this ?

`enhance` : you enhance an existing Element in 2 steps:

- compile with the view compiler, [https://github.com/aurelia/templating/blob/master/src/templating-engine.js#L91](https://github.com/aurelia/templating/blob/master/src/templating-engine.js#L91)
- then bind the view created from that `Element` to first parameter in `.enhance()`you called [https://github.com/aurelia/templating/blob/master/src/templating-engine.js#L97](https://github.com/aurelia/templating/blob/master/src/templating-engine.js#L97)

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 ?

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [March 14, 2018, 11:51am UTC](https://discourse.aurelia.io/t/some-features-not-working-with-enhance-mode/907/3 "2018-03-14T11:51:40Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![wasimf](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/wasimf/32/651_2.png) [@wasimf](https://discourse.aurelia.io/u/wasimf)\
**Post date:** [March 14, 2018, 11:59am UTC](https://discourse.aurelia.io/t/some-features-not-working-with-enhance-mode/907/4 "2018-03-14T11:59:04Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Alexander-Taran](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/alexander-taran/32/2308_2.png) [@Alexander-Taran](https://discourse.aurelia.io/u/Alexander-Taran)\
**Post date:** [March 14, 2018, 2:03pm UTC](https://discourse.aurelia.io/t/some-features-not-working-with-enhance-mode/907/5 "2018-03-14T14:03:26Z")

</div>

Do you have

```auto
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,

```

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

---

<div class="post-metadata">

**Author:** ![bigopon](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/bigopon/32/18_2.png) [@bigopon](https://discourse.aurelia.io/u/bigopon)\
**Post date:** [March 14, 2018, 8:49pm UTC](https://discourse.aurelia.io/t/some-features-not-working-with-enhance-mode/907/6 "2018-03-14T20:49:32Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![wasimf](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/wasimf/32/651_2.png) [@wasimf](https://discourse.aurelia.io/u/wasimf)\
**Post date:** [March 15, 2018, 8:08am UTC](https://discourse.aurelia.io/t/some-features-not-working-with-enhance-mode/907/7 "2018-03-15T08:08:17Z")

</div>

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

\_resolvers is undefined !!

---

<div class="post-metadata">

**Author:** ![GerbenDekker](https://yyz1.discourse-cdn.com/flex027/user_avatar/discourse.aurelia.io/gerbendekker/32/399_2.png) [@GerbenDekker](https://discourse.aurelia.io/u/GerbenDekker)\
**Post date:** [March 15, 2018, 10:19pm UTC](https://discourse.aurelia.io/t/some-features-not-working-with-enhance-mode/907/8 "2018-03-15T22:19:29Z")

</div>

> 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

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

```

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

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

```