Using webpack I can't load a viewmodel

Help Requests
1

Hey all, I’m really new to Aurelia and am running into a problem. A finally got a basic project setup and running using webpack. I am now trying to create my first component. At least I think it’s a component. I want to display some information about a logged in user. I can get it to load the .html file with no problem. But I can’t get it to include the backing typescript. I am able to get it to load the html by putting <require from="../debug/userinformation.html" /> and then a <UserInformation></UserInformation> element in the page I want it displayed on. I have turned on the analysis of the packed js file and found that the javascript isn’t even being included in it.

I feel like I’ve tried everything, but there’s something I’m missing.
Things I have tried (that I can remember):

  • <require from="../debug/UserInformation.html" /> <- only displays the html
  • <require from="../debug/UserInformation" /> <- breaks with an ugly error on the page saying its not found
  • <require from="../debug/UserInformation.ts" /> <- breaks with an ugly error on the page saying its not found
  • <require from="../debug/UserInformation.js" /> <- breaks with an ugly error on the page saying its not found
  • In boot.ts, adding to the Aurelia.use, .globalResources("app/components/debug/UserInformation"). With this I just get an error saying Error: Unable to find module with ID: app/components/debug/UserInformation. I have tried with .html, .js and .ts extensions. Same error (with the extension).
  • Adding import UserInformation from "./app/components/debug/UserInformation"; to boot.ts. This didn’t include it either.

Here’s my UserInformation.html

<template>
    Hello!
    <button click.trigger="speak()">Say hello to the world</button>
</template>

Here’s UserInformation.ts

import { autoinject, customElement } from 'aurelia-framework';

@autoinject
export default class {
    constructor() {
        console.log("<<FOUND IT!>>"); //never logged
    }
    public async attached() {
        console.log("hello"); //never logged
    }
    public speak() {
        alert("Spoken"); //never called
    }
}

If anybody can offer any guidance on creating a component while using webpack that may help. The little example offered in the docs yielded the same results, backing javascript was not found or executed.

2

Your issue here seems to be that you are exporting default

this is what I would do

  • rename UserInformation.* to user-information.*
  • export class UserInformation...
  • if you are “in” some components subfolder then <require from="../debug/user-information" />
  • and use it like <user-information></user-information>
  • if you wish to use globalResources instead of require then .globalResources(PLATFORM.moduleName("app/components/debug/user-information"))
1 Like
3

Thank you! The export default was the problem. Thanks for the suggestions on the naming since that looks like the way the rest of Aurelia is done I will go that route with my project :smiley:. So far I like Aurelia far more than Angular 2. It’s a lot easier to understand and follow.