CODEWITHSUNDEEP
aurelia
Shaun Luttin
Shaun Luttin

Reputation: 141512

Include a component as part of a plugin

Initial Question

How, if at all, can we expose a view/view-model component from a plugin? For instance, we have the following: 

// ./open-id/foo-bar.html
<template>
    <p>FooBar</p>
</template>

// ./open-id/foo-bar.ts
export class FooBar { }

In the consuming application, we would like to do this: 

// ./app.html
<require from="open-id/foo-bar"></require>
<foo-bar></foo-bar>

Edits

Simpler Name

Based on Robinson Collado's answer, we using a simpler name (foo not foo-bar) to reduce complexity. 

// ./open-id/foo.html
<template>
    <p>Foo</p>
</template>

// ./open-id/foo.ts
export class Foo { }

// ./app.html
<require from="open-id/foo"></require>
<foo></foo>

That approach threw this error:

Unhandled rejection Error: Load timeout for modules: template-registry-entry!open-id/foo.html,text!open-id/foo.html

Global Resource

Based on the Installing Plugins documentations, we tried adding the component as a global resource. 

// ./open-id/open-id.ts
function configure(config: FrameworkConfiguration) {
    config.globalResources('./foo');
}

That approach threw this error:

GET http://localhost:9000/src/open-id/open-id/foo.js 404 (Not Found)

That means Aurelia is looking for the component in open-id/open-id/, which is one directory too deep.

Loading as a Plugin

During development of the plugin, we're loading the plugin like this, which may be why Aurelia is looking one directory too deep. How can we load the plugin differently during developent? 

// ./main.ts
aurelia.use.plugin("./open-id/open-id");

Loading as a Feature

aurelia.use.feature("./aurelia-open-id-connect");

The error now is this for each constructor that receiving an injection from our feature.

Message: key/value cannot be null or undefined. Are you trying to inject/register something that doesn't exist with DI?

Upvotes: 0

Views: 136

Answers (1)

Robinson Collado
Robinson Collado

Reputation: 316

Try changing the name of the custom tag <foo-bar></foo-bar> to <foobar></foobar>. The name of the tag should match the name of it's view-model class. Unless, if you use the @customElement decorator to explicitly declare the tag name for the custom element.

Upvotes: 1

Related Questions