Separating typescript file (into 2 files) causes RequireJS Uncaught ReferenceError

43 Views Asked by At

I have been having problems splitting my Typescript file into 2 separate Typescript files (with one imported into the other).

When the files aren't separated, my web app runs perfectly fine, but when I separate them, I get an Uncaught ReferenceError for an initialisation function in my main Typescript file.

The start of the main Typescript file is as follows:

import { Ticket } from "./Ticket";


// Constant Declarations
const arrCategory: string[] = ["Billing", "Marketing", "Developing"];
const arrPriority: string[] = ["Low", "Medium", "High"];
const arrStatus: string[] = ["Open", "Solved", "Closed"];


// Variable Declarations
// Form Inputs
let labelSearch: HTMLElement = (<HTMLElement>document.getElementById("search-label"));
let inputSearchList: HTMLInputElement = (<HTMLInputElement>document.getElementById("search-list"));
let inputIdentifier: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-identifier"));
let inputSubject: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-subject"));
let inputCategory: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-category"));
let inputAssignee: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-assignee"));
let inputPriority: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-priority"));
let inputStatus: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-status"));
let inputComments: HTMLInputElement = (<HTMLInputElement>document.getElementById("ticket-comments"));
let buttonSubmit: HTMLInputElement = (<HTMLInputElement>document.getElementById("submit"));
let buttonReset: HTMLInputElement = (<HTMLInputElement>document.getElementById("reset"));
let message: HTMLElement = (<HTMLElement>document.getElementById("message"));

// Database of Ticket Objects
let arrTickets: Ticket[] = [];
let activeTicket: Ticket;   // The active ticket in the form (if editing/deleting)
let ticket1: Ticket;
let ticket2: Ticket;
let ticket3: Ticket;
let ticket4: Ticket;
let ticket5: Ticket;
let ticket6: Ticket;
let ticket7: Ticket;
let ticket8: Ticket;
let ticket9: Ticket;
let ticket10: Ticket;


/**
 * initialiseDatabase prepares a predefined set of 10 records in the database. 
 * Is called onload after the HTML is loaded and also calls the initialiseForm function.
 */
function initialiseDatabase(): void {
    
    // Initialise database with 10 records
    ticket1 = new Ticket("Rec001", "Submit Button Bug", arrCategory[2], "Matthew Martin", 
        arrPriority[2], arrStatus[1], "Submit button doesn't save ticket information.");
    arrTickets.push(ticket1);
    ticket2 = new Ticket("Rec002", "Payment Information Error", arrCategory[0], "Lisa Kim", 
        arrPriority[2], arrStatus[0], "Error whenever I try to enter my payment information.");
    arrTickets.push(ticket2);
    ticket3 = new Ticket("Rec003", "No Advertisements", arrCategory[1], "Fidel Badiola", 
        arrPriority[0], arrStatus[2], "Not receiving advertisements even though I am signed up.");
    arrTickets.push(ticket3);
    ticket4 = new Ticket("Rec004", "Output Message Timing", arrCategory[2], "Aaron Parry", 
        arrPriority[1], arrStatus[0], "Sometimes the output message disappears immediately.");
    arrTickets.push(ticket4);
    ticket5 = new Ticket("Rec005", "Save Card Information", arrCategory[0], "Anthony George", 
        arrPriority[0], arrStatus[0], "");
    arrTickets.push(ticket5);
    ticket6 = new Ticket("Rec006", "Edit Form", arrCategory[2], "Stephanie Lea", 
        arrPriority[0], arrStatus[2], "A reset button on the edit form would be especially useful.");
    arrTickets.push(ticket6);
    ticket7 = new Ticket("Rec007", "Spelling Mistake", arrCategory[1], "Tonia Martin", 
        arrPriority[0], arrStatus[0], "There is a spelling mistake on the edit page.");
    arrTickets.push(ticket7);
    ticket8 = new Ticket("Rec008", "Card Denied", arrCategory[0], "David Kim", 
        arrPriority[1], arrStatus[2], "Some bank cards are automatically denied.");
    arrTickets.push(ticket8);
    ticket9 = new Ticket("Rec009", "Save Card Function?", arrCategory[0], "Matthew Martin", 
        arrPriority[0], arrStatus[0], "");
    arrTickets.push(ticket9);
    ticket10 = new Ticket("Rec010", "Form Scaling", arrCategory[0], "Lisa Kim", 
        arrPriority[1], arrStatus[1], "The form doesn't scale properly at low window widths.");
    arrTickets.push(ticket10);

    // Prepare the form
    initialiseForm();

}

The import Ticket class code is fairly simple, but I'd like to be able to separate it from the main Typescript file.

My HTML code is as follows:

    <head>
        <script data-main="src/TicketApp.js" src="src/require.js"></script>
    </head>
    <body>
    </body>
    <script>
        require(['domReady!', 'TicketApp'], function(domReady) {
            initialiseDatabase();
        });
    </script>

When I try to load the web app, I get the following error: Uncaught ReferenceError: initialiseDatabase is not defined

I'm bewildered as to why I only get this error when I separate the Ticket class from the main Typescript file.

I've only just started learning RequireJS so there may be some problems with my syntax, except I get no errors when there is only 1 Typescript file, so I'm having a lot of trouble working out where the problem might be.

0

There are 0 best solutions below