Issue with minifying AngularJS and TypeScript route configuration for safe minification

Currently, I have a package containing multiple js files that were created from typescript files.

However, when I attempt to apply minification to the package, the webpage encounters errors.

The error message displayed on the Chrome console is:

Uncaught Error: [$injector:modulerr] Failed to instantiate module AppModule due to: Error: [$injector:unpr] Unknown provider: n

After conducting some tests, I narrowed down the issue to either the app.module or app.routes files. The snippets of these files are provided below:

Snippet from app.module:

((): void=> {
    var app = angular.module("AppModule", ['ngRoute', 'ngMessages', 'app.xxx.xxx.xxxModule', 'ngSanitize']);
    app.config(AppModule.Routes.configureRoutes);
})();

Snippet from app.routes:

/// <reference path="../../../../../scripts/typings/angularjs/angular.d.ts" />
/// <reference path="../../../../../scripts/typings/angularjs/angular-route.d.ts" />
module AppModule {
    declare var staticsDir: string;

    export class Routes {
        static $inject = ["$routeProvider"];
        static configureRoutes($routeProvider: ng.route.IRouteProvider) {
            $routeProvider.when("/xxx", { controller: "Uni.controllers.xxx", templateUrl: staticsDir + "/projects/xxx/xxx/xxx/xxx.html", controllerAs: "xxx" });
            $routeProvider.when("/xxx2", { controller: "Uni.controllers.xxx2", templateUrl: staticsDir + "/projects/xxx2/xxx2/xxx2/xxx2.html", controllerAs: "xxx2" });
        }
    }
}

(Note that the names have been replaced with xxx for privacy reasons.)

It seems that the error pertains to the $routeProvider. Could the issue lie in how I am injecting it? How can I properly inject this to ensure compatibility with minification?

Answer №1

When trying to inject $routeProvider into your static function, keep in mind that this is not min-safe. The static $inject should only be applied to the Routes class constructor. You have a few options:

app.config(['$routeProvider', AppModule.Routes.configureRoutes])

If you want to fully utilize Angular's DI capabilities:

    export class Routes {
        static $inject = ["$routeProvider"];

        constructor(private $routeProvider: ng.route.IRouteProvider){
        }
        configureRoutes() {
            this.$routeProvider.when("/xxx", { controller: "Uni.controllers.xxx", templateUrl: staticsDir + "/projects/xxx/xxx/xxx/xxx.html", controllerAs: "xxx" });
            this.$routeProvider.when("/xxx2", { controller: "Uni.controllers.xxx2", templateUrl: staticsDir + "/projects/xxx2/xxx2/xxx2/xxx2.html", controllerAs: "xxx2" });
        }
    ...
    ...
    }

You can also register it as a provider itself:

For example:

app.provider('myRoutes', Routes);

And then inject it into the config block:

app.config(['myRoutes', function(myRoutes){
    myRoutes.configureRoutes();
}]

(or something similar)

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

The Angular @Input directive may be prone to receiving inaccurate model data

I am currently working on setting up @Input for my component using a model that resembles the following: interface Car { sail?: never tires: number weight: number } interface Boat { tires?: never sail: boolean weight: number } exp ...

Using ng-pattern to validate that a text field does not conclude with a particular term

In this code snippet, I am attempting to prevent a textfield from ending with any of the specified letters in the $scope.pointPattern variable. $scope.pointPattern = /^(?!.*ess|ence|sports|riding?$)/; $scope.error = "not valid"; Upon executio ...

Is it possible to pass a Styled Components Theme as Props to a Material UI element?

After spending 9 hours scouring the internet for a solution, I am at my wit's end as nothing seems to work. Currently, I am developing a React component using TypeScript. The issue lies with a simple use of the Material UI Accordion: const Accordion ...

Upgrading to TypeScript: How to resolve issues with const declarations causing errors in JavaScript style code?

Currently, I am in the process of migrating a decently sized project from JavaScript to TypeScript. My strategy involves renaming the .js files to .ts files, starting with smaller examples before tackling the larger codebase. The existing JavaScript code i ...

"Utilize Typescript to dynamically check data types during runtime and receive alerts for any potential

INTRODUCTION I am currently working with Angular 6. In Angular, typescript is utilized to allow you to specify the data type of your function's arguments: public fun1(aaa: number) { console.log(aaa); } If I attempt to call fun1 with a parameter ...

Logging into Angular using your own Oauth2 provider

I have developed my own Oauth2 provider using Rails and now I want to integrate it with Angular. Currently, when I make a request like this: http://www.myservice.com/authenticate?callback="A PATH WHERE I WILL RECEIVE THE AUTH_TOKEN(example: localhost:888 ...

Creating dynamic templates for table rows in AngularJS directives

Is it possible to dynamically load an AngularJS Directive templateUrl while working within a table? In my scenario, I have the following HTML structure where I am repeating a tr element with a fw-rule directive: <tbody> <tr ng-repeat="rule in ...

Why does React redirect me to the main page after refreshing the page, even though the user is authenticated in a private route?

In the process of developing a private route component that restricts unauthenticated users and redirects them to the homepage, we encountered an issue upon page refresh. The problem arises when the current user variable momentarily becomes null after a ...

What is the best way to utilize derived types in TypeScript?

Given object A: interface A { boolProp: boolean, stringProp: string, numberProp: number, ...other props/methods... } Now, I need objects that contain one of the properties from A and set a default value for it, with other properties being irre ...

What is causing Angular to consistently display the first object in the array on the child view, while the child .ts file correctly prints information from a different object?

Once a card of any object is clicked, the information of that specific object will be printed to the console. However, the child view will only display the details of the first object in the array it retrieves from. All pages are included below. A visual e ...

Error with AngularJS Routing

During the development of my asp.net mvc project with angularjs routing, I encountered some routing errors when reloading pages. In my application, .when('/home', { templateUrl: '/Selection_Routing/Selection_Product/Home.html&ap ...

"Angular ng-if used for conditional rendering of opening and closing tags while keeping the inner contents untouched - possibility of

There have been occasions where I need to render a tag based on a condition while preserving the contents. This typically happens when using a directive with an optional link, where I want to display the opening and closing <a> tags regardless of t ...

Exploring an array in Angular 2 using TypeScript

Just starting out with typescript and angular2 and working through some issues. I have a form that needs to display results from an array of changing items, so I don't know the exact index of each result. Here is my scenario: In my form.html file: ...

Incorporate an HTML span element with an onclick function bound in Angular framework

Is there a way to incorporate different icons by adding a span based on a flag, with an onclick event that triggers an internal function defined in the component ts? testfunc(){ console.log("it works") } flagToIcon(flag: boolean) { switch ( ...

Is the parameter rejecting the use of orderBy for 'startTime'?

Hey there! I'm currently working on an AngularJS project in TypeScript that involves integrating Google API to fetch Google Calendar events. The syntax for making a call is specified in the documentation available at: https://developers.google.com/goo ...

Combining AngularJS with JWT and either WCF or WebAPI creates a powerful and

I am currently working on a small AngularJS application that utilizes AngularJS, TypeScript, and HTML5 for the user interface. I have successfully connected the UI to retrieve data from a Restful WCF service (written in C#). Everything is working well so f ...

Identifying Angular 2 templates post-file separation: a step-by-step guide

I am currently trying to figure out how to initiate a project in Angular 2 and have encountered an issue. Following the steps outlined in this Angular 2 guide, I was able to separate my .ts files from .js files by configuring my 'temp' directory ...

Refreshing issue: Model change in child page not updating view correctly (Ionic & Angular)

I am currently working with Ionic 3.20 and Angular 5.2.9, encountering an issue with content refreshing after a model change. Despite being new to this, I sense that I might be overlooking something fundamental. Within my view, I have the following elemen ...

Issue with TypeScript Functions and Virtual Mongoose Schema in Next.js version 13.5

I originally created a Model called user.js with the following code: import mongoose from "mongoose"; import crypto from "crypto"; const { ObjectId } = mongoose.Schema; const userSchema = new mongoose.Schema( { //Basic Data ...

Creating Angular JS directives with isolated scopes and self-contained controllers

It's been some time since I last worked with AngularJS, and back then we used it with TypeScript which was pretty easy for me to understand. Now, wanting to work with vanilla AngularJS, I find myself a bit lost. Issue: I have a directive with sever ...