Troubleshooting a metadata issue while pre-compiling a feature module in Angular 2

Currently, I am in the process of developing an Angular2 library using Angular2 RC6.

This particular library consists of 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 {

}

When I directly integrate this code into an existing Angular2 application, it works seamlessly...

However, my objective is to create an external npm library.

Upon moving this identical code to a separate project:

https://github.com/ClementVidal/starter.yeva

(This project is structured to function as an Angular2 library, where TypeScript compilation is utilized to enable consumption in my client application.)

An error emerges:

Unexpected value 'YevaModule' imported by the module 'AppModule'

Here is how I import my module in BOTH contexts:

@NgModule({
  imports: [BrowserModule,YevaModule],
  declarations: [AppComponent],
  providers: [
    FOUNDATION_PROVIDERS
  ],
  bootstrap: [AppComponent]
})
export class AppModule {

}

The error is coming 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 appears that my module, when imported as a precompiled module, lacks Metadata.

I have attempted to investigate this by examining the compiled code, but I have not discovered anything...

Here's a method to replicate this error:

mkdir test-metadata
cd test-metadata
git clone <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="13747a6753747a677b66713d707c">[email protected]</a>:ClementVidal/starter.yeva.git
git clone <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="eb8c829fab8c829f839e89c5888486">[email protected]</a>: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 navigate to http://localhost:8080/

Have any of you encountered a similar issue before?

Answer №1

It appears that the library author should provide metadata files for each .d.ts definition file, which are generated by the Angular AOT compiler (angular-cli).

Here are some references from the Angular documentation:

For example, here is how a library author has made changes to support the AOT compiler:

I am currently working on adding AOT compiler support to another library and will submit a PR for that.

Hope this helps!

Answer №2

Have you attempted installing the library without using the npm link? It's possible that could be causing the problem, as webpack often has difficulty with it...

Trying installing your library directly from npm might solve the issue. Perhaps consider releasing an alpha version just to test it out, as there doesn't appear to be anything wrong with your code.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Error: An issue occurred with the tasks in the Gruntfile.js file

pm WARN EPACKAGEJSON <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="74041506001a1106041b0600151834445a445a44">[email protected]</a> No description npm WARN EPACKAGEJSON <a href="/cdn-cgi/l/email-protection" ...

Determine the type of a nested class within TypeScript

Utilizing nested classes in TypeScript is achieved through the following code snippet: class Parent { private secret = 'this is secret' static Child = class { public readSecret(parent: Parent) { return parent.secret } } } ...

Errors with the email composer in Ionic 3 displaying "plugin_not_installed" issue

Currently utilizing this feature within my Ionic 3 application. The plugin has been successfully installed, and the cordova-plugin-email-composer folder is present in the plugins directory. Despite multiple attempts of uninstalling and reinstalling, an err ...

What is the best way to manage destroyed objects?

I've been working on a PIXI.js application and I'm faced with the challenge of managing resources to prevent memory leaks. To address this issue, I am utilizing the DisplayObject.destroy method. When a display object is destroyed, many of its in ...

Encountering a problem with deploying AppSync due to a serverless issue: Error message states "No valid exports main found for 'node_modules/extract-files'"

I have limited experience with npm, mostly used it for basic serverless tasks. Apologies if my question seems amateurish. Currently, I'm working on setting up a project with a basic serverless-appsync-plugin configuration. However, I keep encounterin ...

React Dependency Error

Allow me to outline my current situation: I integrated the react-native-multiple-select-list package into my react-native project by executing: 'yarn add react-native-multiple-select-list': "dependencies": { "react-native-multiple-select ...

How can we effectively transfer a value from TypeScript/Angular?

I am new to TypeScript and Angular, and I'm struggling with assigning a value to a variable within a function and then using that value outside of the function. In regular JavaScript, I would declare the variable first, define its value in the functio ...

Tips for identifying MIME type errors in an Angular 9 application and receiving alerts

While working on my Angular app, I encountered the MIME type error Failed to load module script: The server responded with a non-javascript mime type of text/html. Fortunately, I was able to resolve it. Now, I'm stuck trying to figure out how to rece ...

Issue with App.Module imports not functioning properly on Ionic pages

I am currently working on a directive that I want to implement in my pages. However, when I import something into app.module, it seems as though the pages are not considered children of app.module. On the other hand, if I directly import the directive into ...

The error message "Property 'chart' is not available in the - ChartJS - Angular 13" indicates that the specified property '

As a beginner in Angular, I am currently working on my first page using Angular and facing some challenges with implementing onClick functionality in ChartJS Bar graphs. The issue arises when attempting to access this.chart within the onClick event of Cha ...

Why am I encountering a type error in NodeJS when utilizing the ping module?

I'm currently working on creating a simple app for pinging an IP address. The HTML form I've created has one input field for the IP address, which is then sent to NodeJS for processing. I am utilizing the ping module to retrieve the results. Ever ...

Using TypeScript with Selenium

What are the benefits of utilizing Selenium with Typescript in comparison to Selenium with Java? In what ways can Selenium+Typescript automate certain types of web applications that Selenium+Java cannot, and why is this the case? ...

Using Angular to make an API call within a JavaScript function

I am facing an issue when trying to call an API in a JavaScript function as shown below. The injected services (subService) and defined variables (formData) are not recognized in the JavaScript function, resulting in an error of undefined addSub. How can I ...

Building Dynamic Properties in TypeScript

I have developed a data entry application that utilizes the DataGrid component from DevExpress (devextreme) to allow users to add and remove columns, excluding the key column. The column configuration and user data are both stored in an SQL database. Here ...

Utilizing asynchronous JavaScript imports within exported classes

Currently, I have a package with async/dynamic exports that I import in the following manner: (async function() { const libEd = await import("../../.cache/ed25519wars/index.js"); })(); I plan to re-expose certain functions from libEd within a class str ...

Issue encountered with ng-include compatibility in Angular 5

Just getting started with Angular and working on a small test project using Angular 5 and Visual Code. I'm attempting to use ng-include but the template is not displaying. src add-device add-device.component.html add-device.com ...

Struggling with setting up a search bar for infinite scrolling content

After dedicating a significant amount of time to solving the puzzle of integrating infinite scroll with a search bar in Angular, I encountered an issue. I am currently using Angular 9 and ngx-infinite-scroll for achieving infinity scrolling functionality. ...

Angular login issue: Error message - Correlation failed. Location not recognized

My application consists of two main elements: An IdentityServer4 host (Asp.NET Core 2.2 application with Asp.NET identity) running on http://localhost:5000 An Angular client app (Angular v7.2.12) operating on http://localhost:5002 The goal is to have the ...

Asynchronous NestJs HTTP service request

Is there a way to implement Async/Await on the HttpService in NestJs? The code snippet below does not seem to be functioning as expected: async create(data) { return await this.httpService.post(url, data); } ...

Access not granted while utilizing Yeoman for scaffolding an application

Having some trouble setting up a new project with Yeoman and Angular. I've tried running "yo angular" and "yo app", but keep encountering the same error message. Unfortunately, I'm not very familiar with Terminal. Error: EACCES, permission denie ...