存在声明定义时未加载 Angular 2 导入答案

【问题标题】：Angular 2 import not being loaded when declarations definition present存在声明定义时未加载 Angular 2 导入
【发布时间】：2016-10-06 20:54:23
【问题描述】：

我正在尝试使用升级适配器在我的 angular 1 应用程序中开始使用 angular 2 组件。我已按照此处的说明进行操作：https://angular.io/docs/ts/latest/guide/upgrade.html，但是当我将组件添加到 AppModule 中的声明时，它给了我这个错误：

(index):47 Error: (SystemJS) Cannot read property 'downgradeNg2Component' of undefined(…)
(anonymous function) @ (index):47ZoneDelegate.invoke @ zone.js:203
Zone.run @ zone.js:96(anonymous function) @ zone.js:462
ZoneDelegate.invokeTask @ zone.js:236Zone.runTask @ zone.js:136
drainMicroTaskQueue @ zone.js:368ZoneTask.invoke @ zone.js:308
nrWrapper @ (index):37

在我将组件添加到 AppModule 装饰器中的声明之前，我找不到任何遇到类似问题的人。

这是我的 app.component.ts 文件：

import { Location } from '@angular/common';
import { adapter } from '../adapter';

console.log('COMPONENT');
@Component({
  selector: 'hello',
  template: `
    <h1>Hello World</h1>
  `
})
export class HelloComponent {
}

angular.module('nova.directives', [])
  .directive('hello', [adapter.downgradeNg2Component(HelloComponent)])

这是 main.ts 文件：

import { AppModule } from './ng2app.module';
import { adapter } from './adapter';
console.log('MAIN');

adapter.bootstrap(document.querySelector('html'), ['nova']);

适配器.ts：

import { AppModule } from './ng2app.module';

console.log('ADAPTER');
export const adapter = new UpgradeAdapter(AppModule);

ng2app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { HelloComponent } from './ng2Components/app.component';

console.log('MODULE');

@NgModule({
  imports: [ BrowserModule ],
  declarations: [ HelloComponent ]
})
export class AppModule {}

由于某种原因，app.component.ts 似乎比其他所有内容都先加载。

这是我的 systemjs.config 文件（来自快速入门）：

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
  System.config({
    baseUrl: 'app',
    paths: {
      // paths serve as alias
      'npm:': 'node_modules/'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'app',
      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',
      // other libraries
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.js',
        defaultExtension: 'js'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

应用程序使用 gulp 转换打字稿文件。

任何帮助追踪正在发生的事情都会很棒！

【问题讨论】：

标签： angular typescript gulp

【解决方案1】：

我仍然不完全确定为什么之前导入会中断，但我能够通过将对 downgradeNg2Component 的调用移动到 ng2app.module.ts 文件中并从那里导出适配器来使其正常工作。我只需在该文件中添加我的所有指令声明即可将它们绑定到 angular 1 应用程序。

【讨论】：