Using SystemJs along with ES6 imports to optimize Angular service performance

Question

Using SystemJs along with ES6 imports to optimize Angular service performance

I am facing a major issue while transitioning to ES6 imports and TypeScript in my Angular 1 application. The problem arises with angular injection causing many ES6 imports to be unused. Let me illustrate this with an example:

Service-

export class MyService {
 public doStuff() {}
}

Controller-

import {MyService} from './service';

export class MyController {
  public constructor(private MyService: MyService) {MyService.doStuff();} 
}

Even if I try renaming the import using as, the issue persists.

The crux of the problem is that the compiler does not detect the usage of the MyService import! Hence, the compiled systemjs code omits it-

System.register('myController', [], function() { ... });

To work around this, I could refactor the methods on MyService to be static and avoid injecting it through angular. For instance:

import {MyService} from './service';

export class MyController {
  public constructor() {MyService.doStuff();} 
}

However, we are constrained by time and cannot pursue this approach right now. Our goal is to gradually refactor towards it, but currently, time is of the essence.

How can I compel systemjs to include these imports?

angularjs typescript ecmascript-6 systemjs

Answer 1

Answer №1

From the TypeScript Handbook

Importing a Module for Side Effects Only

While not commonly recommended, there are some modules that set up global states which can be accessed by other modules. These modules may not have any exports, or the consumer may not need their exports. To import these modules, use:
import "./my-module.js";

Answer 2

From the TypeScript Handbook

Importing a Module for Side Effects Only

While not commonly recommended, there are some modules that set up global states which can be accessed by other modules. These modules may not have any exports, or the consumer may not need their exports. To import these modules, use:
import "./my-module.js";

Answer 3

Answer №2

In order to properly handle this situation, it is crucial to register the service using angular.service before the application begins. TypeScript is excluding the import because it's only utilized for typing purposes and not as a value. This isn't limited to "module": "system", but pertains to all external module targets.

Below is the successful approach I've implemented in various production applications:

my-service.ts

export class MyService {
  doStuff() {}
}

my-controller.ts

import {MyService} from './service';

export class MyController {

  static $inject = ['MyService'];

  constructor(private myService: MyService) {
    myService.doStuff();
  } 
}

my-app.ts

import angular from 'angular';

import {MyController} from './my-controller';
import {MyService} from './my-service';

const app = angular.module('app', []);

app.controller({ MyController });
app.service({ MyService });

export function bootstrap(target: Document | Element) {
  angular.bootstrap(target, ['app'], { ngStrictDi: true });
}

To elaborate, the service itself must be registered with an angular module to enable injection, thus the omitted import poses no issue since the registration code in my-app.ts utilizes MyService as a value when passing it to angular.service.

An effective practice is to centralize the registration of services responsible for specific functionalities within one location, typically in the file containing the angular module housing these services.

Additionally, note the static $inject = ['MyService']; line ensures your controller code remains minification-safe while allowing you to conveniently place the DI annotation alongside the constructor that necessitates it.

I have discovered that this approach scales quite well.

Answer 4

In order to properly handle this situation, it is crucial to register the service using angular.service before the application begins. TypeScript is excluding the import because it's only utilized for typing purposes and not as a value. This isn't limited to "module": "system", but pertains to all external module targets.

Below is the successful approach I've implemented in various production applications:

my-service.ts

export class MyService {
  doStuff() {}
}

my-controller.ts

import {MyService} from './service';

export class MyController {

  static $inject = ['MyService'];

  constructor(private myService: MyService) {
    myService.doStuff();
  } 
}

my-app.ts

import angular from 'angular';

import {MyController} from './my-controller';
import {MyService} from './my-service';

const app = angular.module('app', []);

app.controller({ MyController });
app.service({ MyService });

export function bootstrap(target: Document | Element) {
  angular.bootstrap(target, ['app'], { ngStrictDi: true });
}

To elaborate, the service itself must be registered with an angular module to enable injection, thus the omitted import poses no issue since the registration code in my-app.ts utilizes MyService as a value when passing it to angular.service.

An effective practice is to centralize the registration of services responsible for specific functionalities within one location, typically in the file containing the angular module housing these services.

Additionally, note the static $inject = ['MyService']; line ensures your controller code remains minification-safe while allowing you to conveniently place the DI annotation alongside the constructor that necessitates it.

I have discovered that this approach scales quite well.

Using SystemJs along with ES6 imports to optimize Angular service performance

Answer №1

Answer №2

Similar questions

Utilizing AngularJS for creating an online marketplace similar to eBay

How can you utilize createRef in React Native when working with TypeScript?

Implement type declarations for a React JS form validation schema

Make sure the task is completed before proceeding any further

Angular- Product Details

Understanding the appropriate syntax to use with AngularJS is imperative

Struggling to populate a nested array in a dropdown using AngularJS

I am looking to personalize a Material UI button within a class component using TypeScript in Material UI v4. Can you provide guidance on how to achieve this customization?

MUI Gradient Tracked Button

Guide to managing items in a list using Ionic

The imported variables are of a union type

Defining ReactNode as a prop in a TypeScript React component: A comprehensive guide

Production is experiencing a hiccup, however, the site is still up and running. There seems to be

Only perform SetTimeout or $timeout on select actions

Can the sequence of file executions be stored in a node/express application?

Leveraging an array of Elasticsearch documents using AngularJS

Ways to display the modal once the user initiates the action

Utilizing TypeScript and Express.js, modify the `Response` type in the `res.json()`

Executing the outer function from within the inner function of a different outer function

The module 'DynamicTestModule' experienced an import of an unexpected value under the name 'SohoComponentsModule'