Michael Prescott Michael Prescott - 4 months ago 36
Javascript Question

jspm cannot find globalResources of a 'feature' plugin for Aurelia app

Aurelia docs describe how setup and use a feature plugin at http://aurelia.io/docs.html#features

I'm having some trouble because it seems that jspm or Aurelia is transforming paths to resources. I discovered that if I specify a current path with

.aurelia.use.feature('./plugins/auth');
that
calvert-auth/index.js
cannot be found when booting. The request looks correct, but the browser throws a 404 error. I fixed that simply by removing the "./" from
.aurelia.use.feature('plugins/auth');


Next, I added a call in index.s's configure() to frameworkConfig.globalResources('auth'). This causes a new 404 error because the request is for calvert-auth/auth.html instead of the expected calvert-auth/auth.js

I suspect the problem may be in the jspm config or maybe corejs, but haven't been able to isolate it yet.

How do I create and use internal feature plugins for Aurelia? Here are the classes:

config.js

...
paths: {
"*": "dist/*",
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*"
},
...


main.js

import 'bootstrap';
import authConfig from './auth-config';

export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.feature('plugins/calvert-auth', (baseConfig) => {
baseConfig.configure(authConfig);
});

aurelia.start().then(a => a.setRoot());
}


plugins/calvert-auth/auth.js

export class Auth {
constructor() {
console.log('Auth: constructor()');
}
}


plugins/calvert-auth/index.js

import {BaseConfig} from './baseConfig';

export function configure(frameworkConfig, configCallback) {
frameworkConfig.globalResources('./auth');

let baseConfig = frameworkConfig.container.get(BaseConfig);
if (configCallback !== undefined && typeof(configCallback) === 'function') {
configCallback(baseConfig);
}
}

Answer

Try this:

Assuming your code above, and this structure:

main.js
plugins/calvert-auth/index.js
plugins/calvert-auth/auth.js

In main.js:

import 'bootstrap';
import authConfig from './auth-config';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .feature('plugins/calvert-auth', (baseConfig) => {
      baseConfig.configure(authConfig);
    });

  aurelia.start().then(a => a.setRoot());
}

In plugins/calvert-auth/index.js:

export function configure(frameworkConfig, configCallback) {
  // this assumes you're importing a view model
  frameworkConfig.globalResources('auth');
}

In plugins/calvert-auth/auth.js:

import {noView} from 'aurelia-framework';
@noView
export class Auth {
  constructor() {
    console.log('Auth: constructor()');
  }
}