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方式的组件注册，但您必须使用bundle helper函数从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]);

检查参考here

如何声明ng-metadata模块的依赖关系？

2 个答案: