SystemJs und ES6 Importe für Angular Services

Question

Ich habe ein ziemlich ernstes Problem. Ich versuche Schritte in Richtung ES6-Importe und TypeScript in meiner Angular 1-Anwendung zu machen. Aber mit eckiger Injektion gehen viele ES6-Importe ungenutzt weiter. Hier ein Beispiel:

Service-

export class MyService { 
public doStuff() {} 
} 

Controller-

import {MyService} from './service'; 

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

Hinweis es spielt keine Rolle, ob ich den Import mit as umbenennen.

Das Problem hier ist, dass der Compiler nicht denkt, dass der MyService Import verwendet wird! So die kompilierte resultierende systemjs Code nicht enthalten it-

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

Um dies zu umgehen ich die Methoden auf MyService statisch machen könnte und es nie Winkel mit injizieren. Ex:

import {MyService} from './service'; 

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

Aber wir haben nicht die Zeit, das zu tun. Wir versuchen, diesen Refactor schrittweise zu erstellen, und obwohl das das ultimative Ziel ist, haben wir dafür momentan keine Zeit.

Wie erzwinge ich systemjs, um diese einzuschließen?

Answer 1

Vom TypeScript Handbook

Import eines Moduls für Nebenwirkungen nur

Obwohl nicht die Praxis empfohlen, einige Module einig globalen Zustand einrichten, die von anderen Modulen verwendet werden kann. Diese Module dürfen keine Exporte haben, oder der Verbraucher ist an keinem seiner Exporte interessiert. Um diese Module zu importieren, verwenden:

import "./my-module.js";

Answer 2

Der richtige Weg, dies zu handhaben ist, den Dienst mit den angular.service vor Start der Anwendung zu registrieren. TypeScript beendet den Import, da er nur in der Typposition und nicht in der Wertposition verwendet wird. Dies ist nicht spezifisch für "module": "system", sondern gilt für alle externen Modulziele.

Hier ist, was ich erfolgreich in einer Reihe von Produktions Apps

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(); 
    } 
} 

verwendet haben meine 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 }); 
} 

Um zu erklären, der Dienst selbst muss mit einem Winkelmodul, um in erster Linie zu injizierenden registriert werden, so ist der elided Import kein Thema, da der Registrierungscode, in gezeigt meinem -app.ts, verwendet MyService in Wertposition, wenn es als Argument an angular.service übergeben wird.

Ein schönes Muster besteht darin, alle Dienste, die einen bestimmten Satz von Funktionen enthalten, an einem einzigen Ort zu registrieren. Der logische Ort, um dies zu tun, ist in der Datei, die das Winkelmodul enthält, das die Dienste enthält.

Beachten Sie auch die static $inject = ['MyService']; Dies stellt sicher, dass Ihr Controller-Code minification sicher ist, während Sie die DI-Annotation gemeinsam mit dem Konstruktor, der es benötigt, finden.

Ich habe dieses Muster sehr gut skaliert.