Aurelia-typescript-plugin help

1

I’m trying to move existing working code in a plugin for sharing between my web application and my electron application. I decided to use the https://github.com/aurelia-toolbelt/aurelia-plugin-skeleton-typescript as my starting point.

I’m having issues using classes from the plugin in my application. I beleive I’m doing what I should be. My plugin index.js looks like this.

import { FrameworkConfiguration } from "aurelia-framework";
export { CustomControlFactory } from "./customControlFactory";
export { ViewStateMode} from "./models/viewState";

export function configure(config: FrameworkConfiguration) {
  config.globalResources("./control-view");

  config.aurelia.use
    .plugin("aurelia-validation")
    .plugin("aurelia-kendoui-bridge");
}

ViewStateMode and CustomControlFactory are the 2 classes I need exposed to any application consuming this plugin and they can’t be found.

My sample project page looks like this

<template>
  <section>
    ${title}<br>

    <control-view controls.bind="controls"></control-view>
  </section>
</template>

import { Router } from "aurelia-router";
import { autoinject } from "aurelia-framework";
import { CustomControlFactory } from "../../custom-controls/customControlFactory";
import { ViewStateMode } from "../../custom-controls/models/viewState";

@autoinject
export class Page1 {
    public title: string;

    constructor(public router: Router, private customControlFactory: CustomControlFactory) {
        this.customControlFactory.loadControls([], ViewStateMode.all, false);
    }

    public canActivate(_a: any, b: any, _c: any) {
        this.title = b.title;
    }
}

I know customControlFactory is actually working as it’s injected into the control-view and I can see it spitting out my debug messages when it gets instantiated, i just can’t use this class to do what I really need it to do, which is loadControls.

Here is my error output. Do i need to do something special to Fusebox?

ERROR [app-router] Error: "
        Fusebox-loader _import() telling this not registered in the loader:routes/page1, module path returned: ~/routes/page1
        Did you forget to add it to bundle?

        TypeError: customControlFactory_1 is undefined
      "
_importhttp://localhost:4444/vendor.js:312740:35stephttp://localhost:4444/vendor.js:312549:18verbhttp://localhost:4444/vendor.js:312530:53__awaiterhttp://localhost:4444/vendor.js:312524:15__awaiterhttp://localhost:4444/vendor.js:312520:12_importhttp://localhost:4444/vendor.js:312709:16loadModulehttp://localhost:4444/vendor.js:312687:39stephttp://localhost:4444/vendor.js:312549:18verbhttp://localhost:4444/vendor.js:312530:53__awaiterhttp://localhost:4444/vendor.js:312524:15__awaiterhttp://localhost:4444/vendor.js:312520:12loadModulehttp://localhost:4444/vendor.js:312673:16importViewModelResourcehttp://localhost:4444/vendor.js:307021:12ensureViewModelhttp://localhost:4444/vendor.js:308341:14loadRoutehttp://localhost:4444/vendor.js:298151:12loadComponenthttp://localhost:4444/vendor.js:293986:10loadRoutehttp://localhost:4444/vendor.js:293959:10loadPromiseshttp://localhost:4444/vendor.js:293923:12loadNewRoutehttp://localhost:4444/vendor.js:293922:22runhttp://localhost:4444/vendor.js:293914:12nexthttp://localhost:4444/vendor.js:292583:18iteratehttp://localhost:4444/vendor.js:293692:12processDeactivatablehttp://localhost:4444/vendor.js:293695:10runhttp://localhost:4444/vendor.js:293626:12nexthttp://localhost:4444/vendor.js:292583:18runhttp://localhost:4444/vendor.js:293055:14 vendor.js:289671:6
ERROR [app-router] Router navigation failed, and no previous location or fallbackRoute could be restored. vendor.js:289671:6
../../custom-controls/customControlFactory not found on request vendor.js:323469:2249
../../custom-controls/models/viewState not found on request
2

You said you developed a plugin, but you are using it like a sub folder in your application. Maybe that contributed to the issue?

3

Maybe, but looking at the skeleton sample, the author intentional y set up the skeleton to have a sample app. The author’s example has it being used like a sub folder in the sample. It seems like a fuse box issue. To the sample app, it is just a sub folder, but the bundler seems to be the issue in my case.

I may try the cli approach that I just saw someone mention. I really don’t want to understand the ins and outs of another bundler (fusebox)

4

Well, you chose to start it that way, maybe file an issue there and link it to here? Or maybe you can use plugin skeletons from @fkleuver or @dwaynecharrington.

5

I’m going to look at a different template, I’d prefer to use the CLI instead of fusebox.

See my comment about the REALLY poor plugin documentation. There isn’t one official best practice from the Aurelia team :frowning:

6

Well, I can compete and create another skeleton. Will try to make a dead simple one.

7

I’m not sure more skeletons are necessary? The issue is getting this info onto the guides page. More skeletons will just make it harder for someone to pick the right one.

Also, IMO, this should be part of the CLI. I’m experimenting with the CLI method right now with the instructions on the aurelia-getting-started (which should also be available on the aurelia.io site) as a requirejs solution. I’m not sure how different the webpack way is but I can live with requirejs for this.

8

Well, I shoulda said I will create new skeleton, a simple one, accompanied by a tutorial in instruction style to explain how to do everything from scratch.

1 Like
9

It would be great if this or something lived right under the plugins tab of the guides section so someone else can easily find it.

10

I spent the day trying to get my code to work with the CLI approach. I have some more debugging to do, but i could not get it to work when I took it into a webpack project. I’m getting some generic errors from bluebird. I may try a requirejs project tomorrow at work. Sadly i can’t post my whole repo so I’ll have to post snippets.

11

It appears my only issue was I wasn’t using PLATFORM.moduleName(’’) in the plugin when defining resources and other plugins.

12

Oh, that’s a lot simpler than expected :smiley:

13

Yes, thankfully. I didn’t spend tons of time with it yesterday, i was actually building out the plugin and getting the Karma stuff to work and running into issues there…

14

Thanks for the help, the CLI way is probably the way people should be guided.