Error: Can't resolve all parameters for XXX: (?). Angular 4.0.2

Question

我在之前的许多 SO 问题中都看到过这个错误，但是其中 none 似乎与这个案例有关，就在升级到最新版本 4.0.2 之后。它不是循环 DI，似乎与 polifills 无关。

我正在使用 SystemJS 和 jspm（不是 webpack），也许 jspm 与这个问题有关，但我不知道如何。

应用入口点是main.ts:

import 'core-js/es7/reflect';
import 'zone.js/dist/zone'; 
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule2 } from './app/app.module2';

platformBrowserDynamic().bootstrapModule(AppModule2);

我的模块 app.module2.ts 非常简单：

import { NgModule, Component } from '@angular/core';
import { HttpModule, Http } from '@angular/http';
import { BrowserModule } from '@angular/platform-browser';

@Component({
  selector: 'app-home',
  template: `<h2>Hola</h2>`    
})
export class HomeComponent {
  constructor(private http : Http) {
  }
}

@NgModule({
  imports: [
   BrowserModule, HttpModule
  ],
  declarations: [
    HomeComponent
  ],
  bootstrap: [ HomeComponent ],
  entryComponents: [  ],
  providers: [
  ]
})
export class AppModule2 { }

当我启动应用程序时（使用 Chrome 57）错误是：

Error: Can't resolve all parameters for HomeComponent: (?).
  Evaluating http://localhost:3000/src/main.ts
  Loading myapp
    at syntaxError (http://localhost:3000/jspm_packages/npm/@angular/compiler@4.0.2/bundles/compiler.umd.js:1513:34) [<root>]
    at CompileMetadataResolver._getDependenciesMetadata (http://localhost:3000/jspm_packages/npm/@angular/compiler@4.0.2/bundles/compiler.umd.js:14363:35) [<root>]
    at CompileMetadataResolver._getTypeMetadata (http://localhost:3000/jspm_packages/npm/@angular/compiler@4.0.2/bundles/compiler.umd.js:14231:26) [<root>]
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (http://localhost:3000/jspm_packages/npm/@angular/compiler@4.0.2/bundles/compiler.umd.js:13840:24) [<root>]
    at CompileMetadataResolver._getEntryComponentMetadata (http://localhost:3000/jspm_packages/npm/@angular/compiler@4.0.2/bundles/compiler.umd.js:14484:45) [<root>]
    at eval (http://localhost:3000/jspm_packages/npm/@angular/compiler@4.0.2/bundles/compiler.umd.js:14067:108) [<root>]
    at Array.map (native) [<root>]
    at CompileMetadataResolver.getNgModuleMetadata (http://localhost:3000/jspm_packages/npm/@angular/compiler@4.0.2/bundles/compiler.umd.js:14067:73) [<root>]
    at JitCompiler._loadModules (http://localhost:3000/jspm_packages/npm/@angular/compiler@4.0.2/bundles/compiler.umd.js:25144:64) [<root>]
    at JitCompiler._compileModuleAndComponents (http://localhost:3000/jspm_packages/npm/@angular/compiler@4.0.2/bundles/compiler.umd.js:25103:52) [<root>]
    at JitCompiler.compileModuleAsync (http://localhost:3000/jspm_packages/npm/@angular/compiler@4.0.2/bundles/compiler.umd.js:25065:21) [<root>]
    at PlatformRef_._bootstrapModuleWithZone (http://localhost:3000/jspm_packages/npm/@angular/core@4.0.2/bundles/core.umd.js:4793:25) [<root>]
    at PlatformRef_.bootstrapModule (http://localhost:3000/jspm_packages/npm/@angular/core@4.0.2/bundles/core.umd.js:4779:21) [<root>]
    at Object.execute (http://localhost:3000/src/main.ts!transpiled:19:65) [<root>]

如果我在 HomeComponent 中移除 Http 的注入，应用程序加载成功。

我的tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": [ "es2015", "dom" ],
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

Answer 1

经过多次测试，问题不在angular代码，而是基于systemjs的加载系统和jspm提供的加载typescript（.ts）文件和浏览器编译的默认配置动态到 js。可能是转译器的问题 plugin-typescript.

过程中有问题，不知道具体是什么，反正我们配置systemjs直接在js中加载模块就没有问题了。

我删除了模块格式中对 typescript 的所有引用，因此从原始文件中，配置：

transpiler: "plugin-typescript",
packages: {
    "main": {
      "main": "main.ts",
      "format": "esm",
      "defaultExtension": "ts",
      "meta": {
        "*.ts": {
          "loader": "plugin-typescript"
        }
      }
    }
},

变成：

transpiler: false,
packages: {
    'app': {
      defaultExtension: 'js'
    },
    'main': {
      main: 'main.js',
      defaultExtension: 'js'
    }
},
map: {
    'main': 'src',
    'app': 'src/app'
}

现在应用程序加载没有问题。

我正在使用 VS Code 编写应用程序，所以当我编辑 .ts 文件时，会自动生成 .js 和 .map 文件，转译过程是在开发时完成的，此外，使用 Chrome，我可以使用原始 .ts 文件进行调试，所以我认为我不会用这种方法丢失任何东西。

如果谁有更好的方法，请告诉我。