Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular2, metadata error when pre-compiling feature module

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?

like image 787
Clement Avatar asked Oct 30 '22 20:10

Clement


1 Answers

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:

  • #11262, a comment
  • #11262, another comment

Here's an example of a library author applying changes in order to support AOT compiler:

  • feature(build): Added @angular/compiler-cli support

I'm as well in the process of adding support to another library and submit that as a PR

HTH

like image 184
superjos Avatar answered Nov 15 '22 05:11

superjos