Encountering dependency issues with minified directives that remain unresolved

My directive is functioning correctly when the application is not minified

However, when I minify it, an error occurs

Unknown provider: tProvider <- t <- dateTimeFilterDirective

Is there a way to ensure the directive works even when minified?

module bundledAppModule {
'use strict';

export class ngDateTimeFilterDirective implements ng.IDirective {
    static $inject = ['$filter'];
    // static $inject = ['$scope', '$element', '$attrs', '$ngModel', '$filter'];
    public static className = 'dateTimeFilter';
    public restrict: string;
    public require: string;
    public priority: number;
    public link: ng.IDirectiveLinkFn;

    constructor($filter: ng.IFilterService) {
        this.restrict = 'A';
        this.require = 'ngModel';
        this.priority = 1;

        this.link = ($scope: ng.IScope, $element: JQuery, $attrs: any, $ngModel: ng.INgModelController) => {
            $ngModel.$formatters.push((modelValue) => {
                console.log('ngDateTimeFilterDirective', modelValue);


                return new Date($filter('date')(modelValue, 'medium'));
            });
        };
    }

    public static factory(): ng.IDirectiveFactory {
        var directive = ($filter: ng.IFilterService) => {
            return new ngDateTimeFilterDirective($filter);
        };
        return directive;
    }
};

}

UPDATE:

The error is related to the dependency $filter: ng.IFilterService. Removing it allows the directive to work in both minified and unminified versions. However, I need the filter and am unsure how to make it function after minification. I understand that for controllers, specifying dependencies twice is necessary for them to work after minification, so perhaps a similar approach is needed for directives.

Here is the stack trace - minified :-) https://i.sstatic.net/PkuyF.png

This is how the directive is implemented:

<div ng-app="bundledApp" ng-controller="bundledController">
<input type="datetime-local" ng-model="someDate" date-time-filter />
{{someDate}}
<input type="button" ng-click="setDate();" value="changedate">
</div>

The error occurs during initialization of the app. While the controller action is triggered on button click, the directive is not executed (no console log message appears)

Answer №1

To include the $inject property in the directive function after instantiation, follow these steps:

public static factory(): ng.IDirectiveFactory {
    var directive = ($filter: ng.IFilterService) => {
        return new ngDateTimeFilterDirective($filter);
    };
    //ADD $filter dependency
    directive.$inject = ['$filter'];
    return directive;
}

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

What is the best way to assign or convert an object of one type to another specific type?

So here's the scenario: I have an object of type 'any' and I want to assign it an object of type 'myResponse' as shown below. public obj: any; public set Result() { obj = myResponse; } Now, in another function ...

Exploring the capabilities of combining Typescript with withStyles in the latest @material-ui/core framework

I have been working on updating some old Typescript code that was using material-ui@next to now use @material-ui/core. Typescript Version: 2.8.3 @material-ui/core: 1.1.0 I created a simple component that accepts a single prop, but when I try to use it, t ...

Unable to perform real-time transpilation of ES module, a loader plugin must be set up through the SystemJS.config configuration

I encountered an issue while trying to develop a plugable application. Everything was functioning correctly until I introduced "ngx-bootstrap" and "FullCalendarModule"/primeng in the plugin app. Importing any of these modules resulted in the following erro ...

Leveraging Promises in AngularJS to create a chain between two separate controllers

I've developed a provider called MyRestServices to handle my REST-Services: app.provider('MyRestServices', function() { this.baseUrl = null; this.setBaseUrl = function(_baseUrl) { this.baseUrl = _baseUrl; }; this.$get = [' ...

Sending an array of functions to the onClick event of a button

Having difficulty with TypeScript/JavaScript Currently working with an array of functions like this private listeners: ((name: string) => void)[] = []; Successfully adding functions to the array within another function. Now looking to trigger those ...

Best Practices for Including Authorization in HTTP Headers with Angular.JS

Currently working on a chat application that utilizes AngularJS and the Openfire XMPP server. I am looking for guidance on how to integrate the Openfire REST API into my AngularJS project. Any suggestions on how to properly send authorization in the HTTP ...

Angular CORS issue with connecting to gist

Hey everyone, I'm currently working on an Angular app and I've encountered an issue accessing some JSON data on a gist. Here is the link to the JSON file When attempting to use $http.get on this URL, I'm receiving the following error messag ...

Is it possible to have a TypeScript Reducer alongside JavaScript Reducers in my combineReducers function?

export default combineReducers({ todosReducer, calculatorReducer, dateReducer, }); I've encountered a challenge while trying to incorporate TypeScript into a portion of my extensive codebase. In the code snippet above, envision the first two reducers ...

Leverage JSON to display data retrieved from a database

My website allows users to input the title of a movie into a database using an input field. Now, I want to display that title on the front page of the website. I have created a template for displaying it: %div{"ng-repeat" => "movie in movies"} {{ mo ...

The ng-class index is malfunctioning

Seeking help with troubleshooting the following code: <div> <table class="list" border="0" cellpadding="0" cellspacing="0"> <thead> <tr class="headerRow"> ...

Is it possible to lengthen a function in TypeScript?

I am part of a team responsible for maintaining a unique JavaScript library that generates spy functions. These spy functions are designed to allow users to monitor how a function is called, primarily used in the context of unit testing. Our library creat ...

Angular - Creating validations for numeric input fields within reactive forms to ensure values fall within a designated range

One issue I am facing in my Angular form is with a numeric input field. The requirement is to set the minimum value as 3 and the maximum value as 10. However, upon loading the form, the default value should be 0. Users are expected to enter values ranging ...

What steps should I take to export a function from a React functional component in order to create a reusable library?

Currently, I am in the midst of developing a React component library and one of my components contains a function that I want to export. The purpose of the addParticle function is to enable users of the library to dynamically insert particles into a cont ...

Encountered an Angular routing issue - Unable to POST to localhost at angulav/public/auth due to a 500 Internal Server Error

Upon attempting to login with Angular, I encountered an error in my console after submitting the form: POST http://localhost/angulav/public/auth 500 (Internal Server Error). Here is how the Route is set up: Route::any('/', function() { re ...

A guide to accessing array elements (JSON) in Angular

Having a variable named $scope.informationData, the data appears like this when outputted by console.log: {"completed":100,"pending":50,"defects":20,"overdue":10} However, when trying to display just the "overdue" value in my HTML using the following cod ...

Using Ajax with Angular services

Recently, I decided to explore Angular JS and Async calls as an alternative to $JQuery. However, I encountered a peculiar issue while making ajax calls. To adhere to 'best practices', I shifted my ajax requests to a service and then initiated th ...

The array has unexpectedly condensed to contain only a single element, rather than its original three

Whenever I fetch data from a server, I use promises to wait for the data to arrive. However, I recently encountered an unusual situation where, upon navigating back and forth between pages, the tasks array contains three SelectedCustomerTasks elements when ...

Using ThreeJS to Apply Dual Materials to a Mesh Entity

With ThreeJS, it's possible to incorporate more than one material into an Object3D/Mesh as stated in the documentation. You can either utilize a single Material or an array of Material: Class declaration and constructor for Mesh TypeScript file (exce ...

Error encountered while injecting Angular dependencies in component constructor

Here is my newly created component. I am looking to allow users to adjust the count variable. import { Component, Inject } from '@angular/core'; @Component({ selector: 'app-likebtn', templateUrl: './likebtn.component.html&apos ...

Having trouble logging out of ADFS 3.0 using Internet Explorer

We have successfully created an MVC/Angular application integrated with ADFS. Due to the Angular framework, a wrapper had to be developed around ADFS in order to capture the token and utilize it as a claim for access within angular. The primary method res ...