Search code examples
aurelia

Aurelia: not recognizing feature module

I just discovered this framework and I was loving it so far. But then I tried to create a feature module and for some reason it's not working.

I created a new Aurelia app using the CLI:

au new

Then I started coding, created an HTML-only custom element and used it, it worked great.

The problem came when I wanted to create a feature module.

First, this is my src folder (yeah, I'm going with a classic todo-list app):

src folder

So, in the main.js file I've declared the todo feature module:

import 'regenerator-runtime/runtime';
import * as environment from '../config/environment.json';
import {PLATFORM} from 'aurelia-pal';

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .feature(PLATFORM.moduleName('todo/index'));

  aurelia.use.developmentLogging(environment.debug ? 'debug' : 'warn');

  if (environment.testing) {
    aurelia.use.plugin(PLATFORM.moduleName('aurelia-testing'));
  }

  aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}

Now, depending on what I do I get one error or another.

Option 1

If I configure todo/index.js as a module like this:

export function configure(config) {
  config.globalResources(['./todo-list', './todo-item']);
}

Then I get this warning and the web goes blank:

Warning message and blank page

Option 2

If I comment out the config.globalResources() line in todo/index.js then I don't get the warning, the page seems to work. But when I click on the button to add a new Todo item I get an error that the function doesn't exist.

In app.html I import todo/todo-list.html:

<template>
  <require from="./app-header.html"></require>
  <require from="./todo/todo-list.html"></require>

  <app-header></app-header>

  <main>
    <todo-list></todo-list>
  </main>
</template>

And this is the content of todo-list.html:

<template>
  <form>
    <label for="item-text">Añadir elemento: </label>
    <input id="item-text" value.bind="newTodo"/>
    <button type="button" click.trigger="addTodo()">Añadir</button>
  </form>
</template>

This is todo-list.js:

import {TodoItem} from './todo-item';

export class TodoList {
  constructor() {
    this.todos = [];
    this.newTodo = '';
    this.lastId = 0;
  }

  addTodo() {
    this.lastId++;
    this.todos.push(new TodoItem(this.lastId, this.newTodo));
    this.newTodo = '';

    console.log(this.todos.length);
  }
}

So, I guess if I don't configure todo/index.js as a module Aurelia doesn't know that todo-list.html and todo-list.js are related and that's why it can't find the function addTodo().

What am I doing wrong?

I have created a github repo with the code: https://github.com/dhAlcojor/aurelia-todo-list

Solution

  • You need to wrap all references to module names (files) in PLATFORM.moduleName calls.

    So instead of 

     export function configure(config) {
   config.globalResources(['./todo-list', './todo-item']);
 }

    switch to 

     export function configure(config) {
   config.globalResources(
     PLATFORM.moduleName('./todo-list'), 
     PLATFORM.moduleName('./todo-item');
 }

    Also note that I got rid of wrapping the paths in an array. The framework does that for you.