Angular Typescript Controller's Constructor not being invoked

I have been working with Angular using TypeScript.

Here is my model class in TypeScript:

module app.form {

    export class Patient{

        constructor(
            public firstName: string,
            public lastName: string,
            public gender: string,
            public birthDate: Date,
            public currentMedications: string,
            public notes: string,
            public isMedicare: boolean,
            public medicareName: string,
            public medications: string[],
            public ethnicity: string[],
            public billingInfo: BillingInformation,
            public specimenInfo: SpecimenInformation,
            public assayRequested: AssayRequested,
            public authorizationDetail: AuthorizationDetail
        ) {

        }
    }
}

This is how my controller code looks like in TypeScript:

module app.form {
    export class MainController {
        constructor(public patient: Patient) {

        } 
    }   
}

Below is a snippet from my app file:

module app.form {
    angular
        .module("formApp", [
            "ngMaterial",
            "ngMdIcons",
            "ngMessages"
        ])
        .controller("MainController", MainController);
}

I have included all the scripts in my HTML file in the following order:

<script src="Scripts/angular.min.js"></script>
    <script src="Scripts/angular-resource.min.js"></script>
    <script src="Scripts/angular-animate/angular-animate.min.js"></script>
    <script src="Scripts/angular-aria/angular-aria.min.js"></script>
    <script src="Scripts/angular-messages.min.js"></script>
    <script src="Scripts/angular-material/angular-material.min.js"></script>
    <script src="Scripts/angular-material-icons/angular-material-icons.min.js"></script>

    <script src="app/model.js"></script>
    <script src="app/controllers/main-controller.js"></script>
    <script src="app/app.js"></script>

However, when I run my application, I encounter this error:

https://i.sstatic.net/lnsiU.png

Can anyone pinpoint where I might be going wrong?

Answer №1

In order to fix the issue, it is necessary to employ the static $inject within the controller when working with TypeScript

static $inject = [];

Answer №2

It is common practice to retrieve data from a service rather than injecting it directly. Specifically, you should retrieve the Patient data in your main controller. As pointed out by @toskv in the comments, your constructor does not have any parameters which means Angular will expect you to provide injection arguments with names matching the parameter or specified in the injection args string array.

To fix this issue, consider updating your code as follows. If you need to access a specific patient, create a Service or Factory to handle this task. Then, inject that Service/Factory into your controller and register it with Angular.

module app.form {
    export class MainController {
        public patient: Patient; // define as a field
        constructor() {
           this.patient = new Patient(/*add parameters here if needed*/); //initialize a new instance
        } 
    }   
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refreshing the current window with the ``Window.location.reload()`` function

I have integrated a map that displays clients using markers. The map I am utilizing is Leaflet with an AngularJS directive. The issue I am facing is that when I initially access the map, it functions correctly. However, when I change routes, all the marke ...

The error message "undefined is not a function" occurs when using the router.post function with mongo and express.js

https://i.sstatic.net/l0ikC.pngI am currently working on developing an application using resources from this link. I have noticed that the code breaks when it comes to the posting function. Could this be due to a change in express js or is it a syntax erro ...

The table's value remains unchanged despite updating the data in $localStorage using AngularJS

In my AngularJS project, I have implemented two components. The first component, usersList, consists of a table: <table> <tbody> <tr ng-repeat="..."><!--Contains code to repeat the entries in usersList localstorage object-->& ...

Automapper for AngularJS to format results retrieved from a RESTful service

When using the $resource service for data access from a restful service, I encounter a small challenge. The JSON data retrieved is in the following format: { "name_surname": "john_smith", "years_of_employment": "10" } However, I would like to map ...

Unexpected token error due to character sequence disruption from Webpack

Although the title may not be very descriptive, I am currently experimenting with the 'xstate' library and running into an issue with an 'Unexpected token' error in my build result. Here is a snippet from my webpack configuration file ...

Error encountered while utilizing the Extract function to refine a union

I am currently working on refining the return type of my EthereumViewModel.getCoinWithBalance method by utilizing the Extract utility type to extract a portion of my FlatAssetWithBalance union based on the generic type C defined in EthereumViewModel (which ...

display angular filter for mat radio option selected from mat-radio group

On the screenshot provided below, there are 2 buttons within a mat radio group. The condition is that if modelForm.get('schedule').value equals '1', then only display the radio button with the value 'A'. Otherwise, show all va ...

Angular Service: AppleID is not recognized following the loading of the Apple script

I'm new to this forum and have been struggling to find a solution for my problem. I am attempting to integrate AppleConnect into my Angular 8 app with the following approach: I have created an appleService.ts file that dynamically generates the Apple ...

Unable to $delete within nested angularfire controllers

Utilizing angularfire, I am managing a series of online courses where each course contains multiple lectures. I have structured the lectures as nested within their respective courses. The factory I have implemented successfully enables CRUD operations for ...

AngularJS inputs using ng-model should be blank when in the pristine state

Check out this input element within an HTML form: <input ng-model="amount" /> Currently, the input displays as $scope.amount = 0 in the controller. I want to start with a blank input field instead. This way, users can easily input data without havi ...

Proper method for inserting a value into a string array in a React application using TypeScript

How can I properly add elements to a string array in react? I encountered an error message: Type '(string | string[])[]' is not assignable to type 'string[]' You can view the code on this playground link : Here Could it be that I&apos ...

Creating specific union types for a bespoke React hook

There are 4 objects with both similar and different keys. The union of these objects is used for database operations as follows -> type Objects = Food | Diary | Plan | Recipe ; A Custom Pagination Hook function usePaginate (key: string, options: Option ...

Tips for using $apply and $digest in Angular 4 and IONIC 3?

I am currently working on developing an application using IONIC 3, but facing challenges with the view not refreshing properly. During my experience with Angular 1X, I used to use $apply and $digest to resolve similar issues. How can I achieve the same in ...

"HTML glitches in Onsen 2: A Dynamic Dilemma

During runtime, my app context is dynamically generated. In Onsen 1.3, I utilized the following function to create and compile the HTML: $scope.generateFrom = function (div) { var el = div; var html = HTMLGenerator.getHTML(); el.in ...

I am looking to abstract a TypeScript function

Looking for advice on how to generalize a TypeScript method. Here's my current approach - I want to find a way to reduce the amount of code in this method. function getAuthProvider(authProvider) { let provider; switch (authProvider) { ...

Are there any potential methods for converting HTML to PDF within a Cordova Angular JS and UWP app using jQuery? I encountered an error stating that 'blob:ms-appx-web' is not permitted to load

view image here I encountered this issue: SEC7134: Resource 'blob:ms-appx-web://mysiteurl/3d5c0f51-04e2-4944-bf3e-4ea19185511c' not allowed to load If anyone has a solution, please help us in resolving this problem. Below is my code snippet ...

Simulated static functions are invoked within the main function under evaluation

Looking to mock certain functions within a function I'm currently testing. In my code, there is a class with various static private functions that are called by the main function. Specifically, I want to verify the output of MyClass.functionD (which ...

Getting the value of a sibling select element when a button is clicked

Trying to retrieve the selected option value on button click has become a challenge due to multiple groups of buttons and select elements. The key seems to be using siblings somehow, but the exact method remains elusive... <div class="form-group" ng-re ...

Verify the presence of identical items in the array

I have been attempting to identify any duplicate values within an array of objects and create a function in ES6 that will return true if duplicates are found. arrayOne = [{ agrregatedVal: "count", value: "Employee Full Name" }, { agrrega ...

How come using ng-model twice on an input field is effective?

Working with a form that requires two values for ng-model has led to some interesting discoveries. Initially, attempting to assign two different values to ng-model seemed impossible. However, an experiment using ng-model twice yielded surprising results. T ...