Angular 2 импорт не загружается при наличии определения объявлений

Я пытаюсь начать использовать angular 2 компоненты в моем приложении angular 1 с помощью адаптера обновления. Я следовал инструкциям здесь: 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 decorator.

Вот мое приложение.деталь.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)])

Вот главная.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.модуль.ts:

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

console.log('MODULE');

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

Это похоже на приложение.деталь.ts загружается раньше всего по какой-то причине.

Вот мой systemjs.конфигурационный файл (из быстрого запуска):

/**
 * 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 для транспонирования файлов typescript.

Любая помощь в отслеживании того, что происходит было бы здорово!

1 ответ

  1. Я все еще не совсем уверен, почему импорт был сломан ранее, но я смог заставить его работать, переместив вызов downgradeNg2Component в ng2app.модуль.ts файл и просто экспортировать адаптер оттуда, а также. Мне просто нужно добавить все мои директивные объявления в этот файл, чтобы привязать их к angular 1 app.