CODEWITHSUNDEEP
javascriptaureliajspm
user56512
user56512

Reputation:

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);
  }
}

Upvotes: 2

Views: 783

Answers (1)

shanonvl
shanonvl

Reputation: 629

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()');
  }
}

Upvotes: 2

Related Questions