如何声明对 ng 元数据模块的依赖关系?

Question

我有一个项目正在使用ng-metadata(https://github.com/ngParty/ng-metadata(来构建一些Angular 1.5模块。我有一个测试模块/组件，如下所示：

import { NgModule, Component, Inject, Input, Output, EventEmitter } from 'ng-metadata/core'
import { platformBrowserDynamic } from 'ng-metadata/platform-browser-dynamic'
@Component({
selector: 'test',
template: require('./test.template.html')
})
class TestComponent {
@Input() type: string;
constructor() {
console.log(`test: ${this.type}`)
}
}
@NgModule({
declarations: [TestComponent]
})
class HeroModule {}
platformBrowserDynamic().bootstrapModule(HeroModule)

编译时一切似乎都很高兴，我现在正在尝试在另一个项目中使用该模块(不使用ng-metadata但具有兼容版本的 Angular(。

我只是按照ng-metadata文档和包含上述模块(由 webpack 构建(的 JavaScript 文件的指示包含垫片。我在这个项目中有一个新模块，它想将HeroModule列为依赖项。我尝试了几件事：

// attempt 1:
angular.module('my-consuming-module', ['ui.router', 'hero'])
// attempt 2:
angular.module('my-consuming-module', ['ui.router', 'heroModule'])
// attempt 3:
angular.module('my-consuming-module', ['ui.router', 'hero-module'])

所有这些都总是以来自 Angular 的相同Error: $injector:nomod Module Unavailable错误结束。

如果我使用ng-metadata来构建模块，我使用什么名称将它们列为另一个项目中的依赖项？

Answer 1

终于想通了！当您仔细阅读文档时会发生什么真是太神奇了......

在ng-metadata文档的Manual Angular 1 Bootstrap部分找到：

您仍然可以在没有 ng-metadata 引导的情况下利用 ng2 的组件注册方式，但您必须使用捆绑包帮助程序函数从 ng-metadata @NgModule手动创建 Angular 1 模块。

我最终能够做到以下几点：

// REMOVED platformBrowserDynamic().bootstrapModule(HeroModule)  
const Ng1AdminModule = bundle(HeroModule).name;
export const AppModule = angular.module('hero', [Ng1AdminModule]);

然后，我的hero模块可以像我预期的那样被my-consuming-module访问。捆绑帮助程序功能是解决这个问题的关键。

Answer 2

您需要从它们各自的位置导入这些模块并将其注入到角度模块中

//ensure `angular`, `angular-ui-router` should be there in `map` of systemjs.config.js
import * as angular from 'angular';
import * as uiRouter from 'angular-ui-router';
import { heroModule} from './hero.module';
angular.module('app',[ uiRouter, heroModule]);

在此处查看参考资料