Guide for Building TS Packages for Aurelia

Not sure if this is the right place to ask but just wondering if anyone has a good guide on setting up a Typescript package to be consumed by an Aurelia App (either in ESNext or in TS)?

I’ve gotten something to sort of work, but there seems to be a lot of issues between the bundler, tsc, etc. So would be good if someone has something as an example or even just to point me in the right direction.

I was able to do a simple package, but the moment it gets more complicated, things seem to breakdown.

I’d be interested in this too. I noticed that many aurelia
plugins include ouput for various module loaders so maybe its required for compatibility?

It looks like you can include some aurelia config in your package.json to help with the aurelia-cli.

Similar issues for non-ts packages, we could probably use an up to date guide for all plugin types with an example that has:

  • Custom Element
  • CSS export for element
  • Sub Custom Element used within Custom Element
  • Stand Alone Class Export
  • Plugin Config

I’ve been having plugin issues for quite some time now both on the CLI and Webpack, so some solid up to date examples would really help out. Better yet a CLI create plugin command.

Did you try using the Aurelia-cli to create a typescript project?

@gregoryagu Yea, I created a TS project using Aurelia-CLI to consume the package/plugin. But I ran into a few issues doing that. Basically got to the point where I wasn’t sure where the problem lied, whether that be Aurelia CLI, Webpack (used to generate the UMDs for the package) or if its Typescript itself.

I am not sure whether I understand your question quite well, are you seeking for a template in typescript to create Aurelia plugins? and you wish that you could create custom elements, value converters and etc. in that template? If yes I recommend that you use this

1 Like

A template and an accompanying guide on why certain things are done the way they are is probably what I’m looking for. So that I understand more why it is done so, and not just for an Aurelia specific plugin but also for any package to be consumed by an Aurelia App.

I’ve seen a couple, but they seem to just stay on the simple “Hello World” side of things instead of something a bit more complicated.

As an example with the Skeleton Plugin, having a sub-directory in the src folder does not work well when being consumed, there are a couple TS issues with the module resolution, unless you use relative paths instead of absolute paths.

1 Like


I have done some sort of plugins with what I have suggested above, value converters, custom elements,
attributes and so on, they are also include sub directories in src folder; it does not contain any documentation for how to use and configure though.

1 Like

I could add more to the readme on how to use.
Made it a long time when I was creating the build setup for my vgrid for using typescript.
Grid uses fusebox for sample folder now though.

But if I dont remember wring its just ‘gulp watch’ for using it with sample project and ‘gulp build’ when you need to create new build in the dist folder.

That would be great, and I could help if needed

Ive activated the issues tab in the repo, so we can add suggestions etc

1 Like


Ive updated the entire repo now

  • updated all packages, and added lock file
  • replaced sample to use fusebox, and added typechecker I made to get simple feedback for ts and lint errors in sample and plugin
  • new build that does ts and lint check before removing old build
  • updated readme with how to use

1 Like

Hello @vegarringdal

I am very glad to see you using fuse-box.I tried to replace the fuse-box instead of the webpack but for some reasons I did not succeed.

Integration with ASP.NET Core and Aurelia

FuseBox and ASP.NET Core with HMR support

I use Mr. Steve Sanderson`s ASP .NET Core template.

  • dotnet new --install Microsoft.AspNetCore.SpaTemplates::*
  • dotnet new aurelia

I uploaded the whole template in my github:

I would like to ask you update the sample to fuse-box if possible like the plugin skeleton.

It would be great :slight_smile:

I know very little about dotnet and have never used it, but Ive just updated the fuse-box-aurelia-seed, maybe that can help you getting started.
Its using the fuse-box-aurelia-loader and fuse-box-typechecker I created.

Loader is old webpack loader modified to use fusebox paths (without HMR)

HMR was kinda buggy so did not want it as a part of it, since hmr isnt something you use for production, more of a nice to have feature

Most fun (I think) is the fusebox-typechecker, it also do tslint and have some nice options like yellow text og tslint erros etc.
Name is kinda wrong now, since it does not need fusebox to work anymore.



Picture of typechecker in action, in vscode you can use contr+mouseclick to jump to code


1 Like

Thanks @shahabganji @vegarringdal I shall check them out now and hopefully gives me a better understanding of it.


1 Like

You did a lot bro thanks :+1:

I ran some basic tests, and it sounds that everything works just fine :slight_smile: :+1:

@vegarringdal what’s required for fuse-box-aurelia-loader to support quantum and code splitting?

Lets start a discussion about that part here by asking nchanged