Aurelia CLI - Plugin Skeleton - Requiring a Custom Element (created inside the dev-app) not working. [Solved]

Help Requests
1

Hello,

I have created a new plugin project using the aurelia-cli with the default typescript setup. This builds and runs correctly.

I need to create a custom element within the dev-app (ie, it’s not part of the finished product, I just need it to make developing the actual component easier).

I created a custom element (in the dev-app folder) the usual way and tried to <require> it within the dev app.

When I run the dev app I get the following error:

The resource from “http://localhost:9001/dev-app/components/self-contained-custom-element/self-contained-custom-element.js” was blocked due to MIME type (“text/html”) mismatch (X-Content-Type-Options: nosniff)

When I try to access the url directly it gives a 404.

I’ve checked that there are no typos in the path. There are no changes to the skeleteon app other than having added my custom element to dev-app.

I suspect the issue might be one of the following:

  • I’m used to developing using webpack. Perhaps I’m missing some extra / different step that is required for the aurelia bundler when requiring an element.
  • Perhaps the component is not being transpiled from typescript to javascript.

Any assistance would be much appreciated.

Regards,
Grant

Edit: Fixed markdown formatting

1 Like
2

I found a solution.

If you have your component in a directory in the dev-app as follows:
dev-app/components/my-component/my-component.ts
dev-app/components/my-component/my-component.html

You can either:

  1. Include your component using globalResources("./components/my-component/my-component") in main.ts (if you do this you don’t need to use the <require> tag to include it).

  2. in aurelia_project/aurelia.json you can add the dev-app/components directory as a path. I added it as ‘devResources’ in the paths section (as seen below). The key you use doesn’t matter.

  "type": "project:plugin",
  "paths": {
    "root": "dev-app",
    "resources": "../src",
    "devResources": "dev-app/components",
    "elements": "../src/elements",
    "attributes": "../src/attributes",
    "valueConverters": "../src/value-converters",
    "bindingBehaviors": "../src/binding-behaviors"
  },

You can then use the <require> tag as normal within the dev-app to load your component.

Edit: Added note about <require> when using globalResources()

1 Like