question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Please add a @NgModule annotation in AOT Compilation

See original GitHub issue

Type of Issue

[x] Bug Report
[ ] Feature Request

Description

After compiling the package and runing ng serve --aot , I get this error

ERROR in Error: Unexpected value 'NgProgressModule in .........../ngx-progressbar/node_modules/@ngx-progressbar/core/src/ng-progress.module.d.ts' imported by the module 'AppModule in .............../ngx-progressbar/src/app/app.module.ts'. Please add a @NgModule annotation.

How To Reproduce

The module looks like this

import { NgModule, ModuleWithProviders } from '@angular/core';
import { CommonModule } from '@angular/common';
import { NgProgressBarComponent } from './components/ng-progress-bar/ng-progress-bar.component';
import { NgProgressComponent } from './components/ng-progress/ng-progress.component';
import { NgProgress } from './services/ng-progress.service';

@NgModule({
  declarations: [
    NgProgressComponent,
    NgProgressBarComponent
  ],
  exports: [
    NgProgressComponent
  ],
  imports: [
    CommonModule
  ],
  providers: [
    NgProgress
  ]
})
export class NgProgressModule {
}

Expected Behaviour

Should work as it does in ng serve

Version Information

ng-packagr: v2.0.0-rc.4
node: v8.4.0
@angular: v5.0.0
rxjs: 5.5.x
zone.js: 0.8.14

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:33
  • Comments:20 (4 by maintainers)

github_iconTop GitHub Comments

96reactions
JoeQueRcommented, Dec 20, 2017

Don’t know if it helps, but i had the same issue :

Turns out, my generated metadata [library].metadata.json was empty (no modules definitions, exported components was missing, etc…) wich work fines without aot activated… 😦

Does your metadatas contains data to your NgProgressModule ?

My ng-package.json was refering to public_api.ts, which was exporting “barrel” files (index.ts) wich themself was referencing other barrel files. But rather than exporting with the full path to barrel files index.ts, i was exporting the directory :

old public_api.ts : export * from "/my-app/directory"

new public_api.ts : export * from "/my-app/directory/index"

It’s really important to specify explicitly the barrel file, in order to have metadata set correctly. One way to correct it is to simply remove the barrels files and export everithing in public_api.ts

After that, i had problems with cyclic depedencies and barel files… But that’s an another story.

Hope it help !

10reactions
SaturnTeamcommented, May 4, 2018

You should add this to FAQ. It takes a month to find this solution

Read more comments on GitHub >

github_iconTop Results From Across the Web

"Please add a @NgModule annotation" error... on something ...
I can avoid this issue entirely by turning off AOT compilation. I'm using Angular 11. In code that had been working before Angular...
Read more >
Angular Error on build: 'Please add a @NgModule annotation'
Hi,. I'm using Angular 6 with the latest SpreadJS demo. When trying to build to production, I get the following error:
Read more >
Angular Modules and NgModule - Complete Guide
the @NgModule annotation is what actually defines the module; we can list the components, directives, and pipes that are part of the module ......
Read more >
Angular Noob here - what does "Please add a @NgModule ...
Just a quick note: always check for dependencies when upgrading. In my experience, the error you got means, you haven't added a component...
Read more >
NgModule FAQ - Angular
Add declarable classes —components, directives, and pipes— to a declarations list. Declare these classes in exactly one module of the application.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found