CODEWITHSUNDEEP
aurelia
GimmeDaKitty
GimmeDaKitty

Reputation: 23

Aurelia will not load custom component

I have created several custom components that are loaded in another component. One of those components will not load. The constructor is not called, and neither does all the rest of the component lifecycle events.

I am using Local aurelia-cli v1.0.2

My element's name is 'boardingpass-list'. It does not have any bindings I am using all the 'require' tags, all names and folder structures are ok. I even stripped everything from the component to leave an empty constructor, and the html just being a 'hellow world!' string. Same result.

Main custom component:

<template>
    //require other elements
    <require from="Views/Passenger/boardingpass-list"></require>

    //some more divs here
    <div>
       <boardingpass-list></boardingpass-list>
    </div>
</template>

This is the .ts file for my component: 'boardingpass-list.ts'. I removed any methods except constructor and attached/detached:

import { autoinject } from "aurelia-framework";
import { BoardingpassPopupInfo } from "Objects/BoardingpassPopupInfo";
import { Subscription, EventAggregator } from "aurelia-event-aggregator";
import { BoardingpassDatasource } from "Data/BoardingpassDatasource";
import { PopulateBoardingPassListMessage } from "Core/messages";

@autoinject
export class BoardingPassList {
    public popoverInitialized : boolean;
    public boardingpassPopupInfoList: Array<BoardingpassPopupInfo>;
    public populateBoardingPassListSubscription : Subscription;

    constructor(private readonly boardingpassDatasource: BoardingpassDatasource, private readonly ea : EventAggregator) {
        this.popoverInitialized = false;
        this.boardingpassPopupInfoList = new Array<BoardingpassPopupInfo>();
        this.populateBoardingPassListSubscription = null;
        console.log('constructor');
    }

    public attached() : void {
        this.populateBoardingPassListSubscription = this.ea.subscribe(PopulateBoardingPassListMessage, () => console.log('hello!'));
    }

    public detached() : void {
        this.populateBoardingPassListSubscription.dispose();
    }
}

This is the html for my component: 'boardingpass-list.hml'. I stripped it to the basics to see whether it works (it does not):

<template>
    Hello world!
</template>

When I do au run --watch all components except this particular one are properly rendered. For the boardingpass-list component I get only this empty HTML module:

<div>
<boardingpass-list></boardingpass-list>
</div>

The resources for the module are loaded normally according to the console output from aurelia, just like the rest of the elements:

DEBUG [templating] importing resources for Views/Passenger/boardingpass-list.html

No other errors, exceptions or warnings.

Hopefully someone can point me in the right direction because I have no clue what is going on, thanks in advance!

Upvotes: 2

Views: 469

Answers (1)

avrahamcool
avrahamcool

Reputation: 14094

your class name is BoardingPassList, so by convention the tag in the html should be boarding-pass-list instead of boardingpass-list.

if you want to use boardingpass-list as the html tag, choose one of those two options.

  1. change the exported class name to BoardingpassList
  2. use @customElement('boardingpass-list') on your exported class.

more on that can be found here

Upvotes: 1

Related Questions