The NgModule recognition system does not detect my library module

My AccordionModule within my Angular 2 library initially encountered a problem of not being recognized as an NgModule during the first compilation by angular-cli. However, it automatically reloaded after the error and was then successfully compiled with the module being recognized.

  Time: 7903ms
    chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial] [rendered]
    chunk    {1} main.bundle.js, main.bundle.js.map (main) 11.4 kB {3} [initial] [rendered]
    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial] [rendered]
    chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.6 MB [initial] [rendered]
    chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry] [rendered]

    ERROR in AccordionModule is not an NgModule
    webpack: Failed to compile.
    webpack: Compiling...
    Hash: 422f957171e71c80b1cf                                                         
    Time: 1999ms
    chunk    {0} polyfills.bundle.js, polyfills.bundle.js.map (polyfills) 158 kB {4} [initial]
    chunk    {1} main.bundle.js, main.bundle.js.map (main) 11.4 kB {3} [initial]
    chunk    {2} styles.bundle.js, styles.bundle.js.map (styles) 9.77 kB {4} [initial]
    chunk    {3} vendor.bundle.js, vendor.bundle.js.map (vendor) 2.6 MB [initial]
    chunk    {4} inline.bundle.js, inline.bundle.js.map (inline) 0 bytes [entry]
    webpack: Compiled successfully.

I attempted upgrading typescript to versions 2.0.10 and 2.0.3, but unfortunately, that did not resolve the issue.

Here are my dependencies:

 "peerDependencies": {
        "@angular/common": "^2.4.0",
        "@angular/compiler": "^2.4.0",
        "@angular/core": "^2.4.0",
        __"dom":__ 
        "@angular/platform-browser": "^2.4.0",
        "core-js": "2.4.1",
        "typescript": "2.0.10",
        "zone.js": "^0.7.6"
    },
    "devDependencies": {
        "@angular/compiler-cli": "^2.4.0",
        "@angular/platform-server": "^2.4.0",
        "@types/jasmine": "2.5.38",
        "@types/node": "6.0.60",
        "rimraf": "^2.5.4"
    }

And here is my tsconfig file:

{
    "compilerOptions": {
        "baseUrl": "",
        "target": "es5",
        "module": "es2015",
        "moduleResolution": "node",
        "declaration": true,
        "noImplicitAny": false,
        "strictNullChecks": true,
        "sourceMap": false,
        "emitDecoratorMetadata": true,
        "experimentalDecorators": true,
        "outDir": "./dist",
        "rootDir": "./src",
        "skipLibCheck": true,
        "stripInternal": true,
        "typeRoots": ["./node_modules/@types"],
        "types": [
            "node"
        ],
        "lib": [
            "dom",
            "es2015"
        ],
        "paths": {
            "@angular/core": ["node_modules/@angular/core"]
        }
    },
    "compileOnSave": false,
    "buildOnSave": false,
    "exclude": [
        "node_modules",
        "dist",
        "tests",
        "**/*.ngfactory.ts",
        "**/*.shim.ts"
    ],
    "angularCompilerOptions": {
        "genDir": "dist",
        "entryModule": "src/lib/module#AccordionModule",
        "skipTemplateCodegen": true,
        "strictMetadataEmit": true
    }
}

Answer №1

To AOT compile your package, use the ngc compiler instead of tsc and point it to the same tsconfig file.

npm install @angular/compiler-cli @angular/platform-server --save
node_modules/.bin/ngc -p tsconfig-aot.json

//For Windows users, use double quotes around the ngc command:
"node_modules/.bin/ngc" -p tsconfig.json

For more information, you can refer to this article https://angular.io/docs/ts/latest/cookbook/aot-compiler.html#!#compile

The ngc compiler will generate additional metadata that Angular will utilize to recognize your module.

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

How can I specify the type of an object in Typescript to mirror a class's properties as a list?

This demonstration is kept simplistic and straightforward, yet the ultimate objective is far more intricate. It is crucial to grasp the method behind achieving this. Let's assume there exists a class class Foo { bar: string; baz: number; bob: a ...

I am having issues with the Okta Angular sign-in widget as it is not redirecting

Recently, I integrated the Okta angular sign-in widget into my project, but I encountered an issue. In my application, I have multiple modules including an authentication module that manages sign-in, sign-out, and sign-up functionalities. The route I ult ...

Is it possible to dynamically change an ngModel value directly from the component?

I'm currently immersed in an Angular project and my initial file setup was like this: dog.ts: export interface Dog { name: string; age: number; breed: string; } dog.component.ts: import { Dog } from '../dog'; @Component({ //setup ...

Angular Bootstrap Datepicker provides us with a date object, but I need it in the Date format

My desired date format is "Wed Aug 07 2019 16:42:07 GMT+0530 (India Standard Time)", but instead I am receiving { year: 1789, month: 7, day: 14 } from ngbDatepicker. Any assistance on resolving this issue would be greatly appreciated. ...

How can I implement a scroll bar in Angular?

I am facing an issue with my dialog box where the expansion panel on the left side of the column is causing Item 3 to go missing or appear underneath the left column when I expand the last header. I am looking for a solution to add a scroll bar so that it ...

Using RxJs in Angular, you can invoke an observable from within an error callback

I have a scenario where two observable calls are dependent on each other. Everything works fine, but when an error occurs in the response, I need to trigger another observable to rollback the transaction. Below is my code: return this.myService.createOrde ...

Removing curly braces and double quotes from an array object can be achieved by iterating through each element

Within this particular project, I have utilized Angular 8 and TypeScript. In the implementation, there exists an array that showcases emails either through user input or via CSV upload. Once the user inputs several emails, a button is available to send in ...

What type is the appropriate choice for this handler?

I´m struggling to select the right type for this particular function. It serves as an async handler for express js in a project that utilizes typescript and eslint for linting with specific rules. export function asyncHandler( handler: any ): (req: Requ ...

Using an Object as a Key in Maps in Typescript

I had the intention of creating a Map object in Typescript where an object serves as the key and a number is the value. I attempted to define the map object in the following manner: myMap: Map<MyObj,number>; myObj: MyObj; However, when I tried to a ...

retrieving information and parsing from an API using Ionic and Angular version 4

How can I extract data from the "data" field in my API using a function? getMenu() { return this.http.get('http://site.dev/api/menu/7'); } { "id": 26, "name": "Default", "title": "default", "pageelements": [ { "id": 15, ...

Angular2 fills up the table with data for a particular row

I have a specific requirement where I need to display only some columns of a table within a div. When I click on 'See' for a particular row, I want to reveal the remaining columns of that table (currently it reveals all rows by default). https:/ ...

The sequence of activities within the Primeng Multiselect component

Lately, I've encountered an issue while using the multiselect component from the primeng library in Angular. Everything was going smoothly until I noticed a strange problem with the order of events. Here is an example that showcases the issue: https:/ ...

The datatype 'string' cannot be assigned to the datatype '(token: string) => void'

Within my Angular2 application, I have a class that includes several properties which will be assigned values within components. @Injectable() export class Globals { private token: string; private authorization: string; private roleUser: boole ...

How to send form group in Angular when the enter key is pressed

When I press the submit button on a form, it sends a request to the database to filter data in a grid. However, I also want the form to submit when the enter key is pressed. HTML <form [formGroup]="bmForm" (keyup.enter)="onSearchClic ...

Quicker component refreshing in the Angular framework

Two Angular components were created, one for adding a new post and another for displaying all posts. Clicking the create post button redirects to the PostList component, which shows all posts. To automatically load the new post without manual refreshing, w ...

Numerous modules accessible via Angular-cli

I'm currently working on an application using the angular-cli interface. However, I have realized that there are no commands available such as: ng generate module featureModule As a result, I am forced to create modules manually. Can someone advise ...

How to reset an Angular 7 reactive form to its initial values instead of clearing them completely

Is there a way to restore a reactive form group back to its original values without completely clearing it using .reset()? In this StackBlitz example, the default selected value is Parent. If a user changes it to "sister" and wants to revert the form to i ...

"Encountered an ENOENT error message following the deployment

I'm really hoping for some insight into the current situation. Deploying an Angular 7 / .Net Core 2 application to Azure is giving me trouble. I am utilizing the publish profile provided by Azure in Visual Studio. Everything runs smoothly when testi ...

Angularjs 2 Error: Unable to access the 'infos' property of an undefined object using the Http Client

I've been working on an AngularJS app for about a week now, developing a backoffice application for my service. My main challenge lies in using data retrieved from a remote server. I have 4 HTTP GET requests in my app - 2 of them fetching lists of us ...

Issue with VueJS 2 and TypeScript: computed value unable to recognize property specified in data object

When creating the following component: <template lang="html"> <div> <p>{{ bar }}</p> </div> </template> <script lang="ts"> import Vue from 'vue'; export const FooBar = Vue.ex ...