Question

我正在尝试使用升级适配器在angular 1 app中开始使用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']);

adapter.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来转换打字稿文件。

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

Answer 1

我仍然不完全确定为什么导入先前破坏了，但我能够通过将调用downgradeNg2Component移动到ng2app.module.ts文件并从那里导出适配器来使其工作。我将只需要在该文件中添加所有指令声明，将它们绑定到angular 1 app。

声明定义出现时未加载Angular 2导入

1 个答案: