I'm writing an Angular2 library using Angular2 RC6.
This library contain a single module:
import { Component, OnInit, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
@Component({
selector: 'yeva',
template: '<div></div>'
})
export class YevaComponent {
constructor() { }
}
@NgModule({
imports: [CommonModule],
declarations: [YevaComponent],
providers: [],
exports: [YevaComponent]
})
export class YevaModule {
}
If I copy paste this code in a TypeScript file in an existing Angular2 application, and try to use this module directly, it works perfectly...
But my goal here, is to build an external npm library.
If I move this exact same code in a stand-alone project:
https://github.com/ClementVidal/starter.yeva
(This project is configured to be used as an Angular2 library, where it gets compiled using TypeScript in order to be consumed by my client application.)
I get the following error:
Unexpected value 'YevaModule' imported by the module 'AppModule'
Here is how I import my module in BOTH cases:
@NgModule({
imports: [BrowserModule,YevaModule],
declarations: [AppComponent],
providers: [
FOUNDATION_PROVIDERS
],
bootstrap: [AppComponent]
})
export class AppModule {
}
This error come from the Angular compiler:
var importedMeta = _this.getNgModuleMetadata(importedModuleType, false);
if (importedMeta === null) {
throw new Error("Unexpected " + _this._getTypeDescriptor(importedType) + " '" + stringify(importedType) + "' imported by the module '" + stringify(moduleType) + "'");
}
It seems that my module, when imported as a precompiled module does not contain any Metadata.
I've tried to figure this out by looking at the compiled code, but I did not find anything...
Here is how to reproduce this error:
mkdir test-metadata
cd test-metadata
git clone [email protected]:ClementVidal/starter.yeva.git
git clone [email protected]:ClementVidal/starter.themba.git
cd starter.yeva
npm install
sudo npm link
cd ../starter.themba
git checkout module-metadata
sudo npm link __TITLE__
npm install
npm run server
Then browse to http://localhost:8080/
Does any of you already experiment this type of issue?
It seems like one or more metadata files should be provided by library author, one for each .d.ts
definition file. Metadata files are produced by Angular AOT compiler (angular-cli).
Here are references to that, straight from angular:
Here's an example of a library author applying changes in order to support AOT compiler:
I'm as well in the process of adding support to another library and submit that as a PR
HTH
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With