ng-packagr: [Angular 5] `ng build --prod` gives error […] add a @NgModule annotation

Type of Issue

[x] Bug Report
[ ] Feature Request

Description

I want to use 3 level scope in my project like @once/ui/datepicker or @once/ui/dropdown. So I started using ng-packagr; which is working fine for me. I am able to use 3-level scope in my project.

I am using @once/ui shared library in a project. The command ng serve works fine for me and everything works as expected.

Unfortunately, in the project using @once/ui components, ng build -prod doesn’t work anymore. I’ve also tried adding the --preserve-symlinks argument. but no luck!

How To Reproduce

Install @once/ui/datepicker in your project and run ng build --prod, now the error is reproduced. Also adding small code snippet here:

import { DatepickerModule } from '@once/ui/datepicker';
@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    DatepickerModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

Now run:

ng build --prod

You will get:-

ERROR in : Unexpected value 'DatepickerModule in /install-pack/node_modules/@once/ui/datepicker/src/datepicker.module.d.ts' imported by the module 'AppModule in /install-pack/src/app/app.module.ts'. Please add a @NgModule annotation.

However, if I set --aot to false using:-

ng build --prod --aot false

Everything works and the build is successfull!

Expected Behaviour

ng build -prod should produce compiled minified distribution files like it did with Angular 4.

Version Information

$ node_modules/.bin/ng-packagr --version
ng-packagr: 2.4.5
@angular/*: 5.2.10
typescript: 2.5.3
node: 9.10.1
npm: 6.0.0```

About this issue

Original URL
State: closed
Created 6 years ago
Reactions: 6
Comments: 17 (3 by maintainers)

Most upvoted comments

May I ask is there any update here? We also encountered this issue in Angular7.

+12

frankyaorenjie on Jun 4, 2019

I just tried to create a new library with angular 8.2 and when I import it into my blank project’s module via the dist folder or the src folder, and build my project with --aot, I get the same type of error. I create a separate workspace for the library than my project, but was careful to match typescript and angular/angular cli versions. Does this mean angular libraries are broken out of the box?

ERROR in : Unexpected value 'UoaControlsModule in C:/Repos/uoa-common/projects/uoa-controls/src/lib/uoa-controls.module.ts' imported by the module 'AppModule in C:/Repos/one-page-app/src/app/app.module.ts'. Please add a @NgModule annotation.

The error must be wrong, because I definitely have the default @NgModule annotation which is exporting the default component (there are no index files). If I build without --aot then it works.

rocifier on Feb 4, 2020

I’ve seen this error multiple times and in my case it always comes down to using barrel files. So I’d look in your code and see if you have any barrel imports and change it to import from index explicitly

// bad
import { foo } from './baz';

// good
import { foo } from './baz/index';

I wish there was better support for barrels because our project is huge and it took a while to change all the imports. Although changing them back when barrels are better supported is an easier search-and-replace.

elclanrs on May 26, 2018

I get this error in an Angular 9.1.12 project that is importing a library also built with Angular 9.1.12. Weirdly it only occurs when I disable Ivy.

diminutivesloop on Oct 5, 2020