Question

我遇到了一个非常严重的问题。我试图在我的Angular 1应用程序中对ES6导入和TypeScript采取措施。但是通过角度注射，许多ES6进口都没有使用。这是一个例子：

服务 -

export class MyService {
 public doStuff() {}
}

控制器 -

import {MyService} from './service';

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

请注意，使用as重命名导入无关紧要。

这里的问题是编译器并不认为正在使用MyService导入！因此，生成的编译systemjs代码不包含它 -

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

为了解决这个问题，我可以将MyService上的方法设为静态，而不是使用angular注入它。例如：

import {MyService} from './service';

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

但我们没有时间这样做。我们试图逐步完成这个重构，虽然这是最终目标，但我们目前还没有时间。

如何强制systemjs加入这些内容？

Answer 1

来自TypeScript Handbook

仅为副作用导入模块

虽然不推荐练习，但有些模块设置了一些可供其他模块使用的全局状态。这些模块可能没有任何出口，或者消费者对其任何出口都不感兴趣。要导入这些模块，请使用：

import "./my-module.js";

Answer 2

处理此问题的正确方法是在应用程序启动之前使用angular.service注册服务。 TypeScript正在删除导入，因为它仅用于类型位置，而不是值位置。这不是"module": "system"特有的，但适用于所有外部模块目标。

以下是我在多个制作应用中成功使用的内容

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

为了解释，服务本身需要使用角度模块进行注册才能首先注入，因此，自注册代码以来，省略的导入是一个非问题，如 my-app.ts所示，在将MyService作为参数传递给angular.service时，在值位置使用static $inject = ['MyService'];。

一个好的模式是在一个地方注册包含某组功能的所有服务。执行此操作的逻辑位置在包含将保存服务的角度模块的文件中。

另请注意function mouseleave(d) { d3.select("#trail") .style("visibility", "hidden"); d3.selectAll("path").on("mouseover", null); d3.selectAll("path") .transition() .duration(1000) .style("opacity", 1) .each("end", function() { d3.select(this).on("mouseover", mouseover); }); d3.select("#explanation") .style("visibility", "hidden"); }这可确保您的控制器代码安全，同时允许您将DI注释与需要它的构造函数共同定位。

我发现这种模式非常好。

SystemJs和ES6导入角度服务

2 个答案: