Aurelia: not recognizing feature module - aurelia

Question

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):
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:
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

Answer 1

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.