Problem building poject with angular library. ng serve works fine locally Error message is Please add a @NgModule annotation

Question

I have built an npm library https://www.npmjs.com/package/cloudee. It works fine locally but when I try to build to deploy I get this error ' Unexpected value 'CloudyModule in /home/hadi/dev/rickithadi/node_modules/cloudee/cloudee.d.ts' imported by the module 'AppModule in /home/hadi/dev/rickithadi/src/app/app.module.ts'. Please add a @NgModule annotation.'

Everything works fine the only issue is when I do ng build --aot --prod to deploy. I have tried downgrading angular versions on both the library and the project I'm using it in. The library was initially built with ng7 and the project in ng5. I also read some post about angular not being able to find the correct angular version and to add a path to angular in ts.config.json which i have down. This does not work. I installed the library with npm install --save cloudee.

app.module.ts

import {CloudyModule} from 'cloudee';
     ...
imports:[...CloudyModule
...]

package.json of project

dependencies:[
 "@angular/animations": "^5.2.11",
 "@angular/cli": "~1.7.4",
 "@angular/common": "^5.2.0",
 "@angular/compiler": "^5.2.0",
 "@angular/compiler-cli": "^5.2.0",
 "@angular/core": "^5.2.0",
 "@angular/forms": "^5.2.0",
 "@angular/http": "^5.2.0",
 "@angular/platform-browser": "^5.2.0",
 "@angular/platform-browser-dynamic": "^5.2.0",
 "@angular/router": "^5.2.0",
 "cloudee":"0.05"
 ...
 ]

full list of imports in module.ts

@NgModule({
    declarations: [
    AppComponent,
    NavbarComponent,
    HomeComponent,
    FooterComponent,
    StuffComponent,
    BlogComponent,
    ContactComponent,
    FieldErrorDisplayComponent,
    SuccessComponent,
    LoginComponent,
    AdminComponent,
    LiftingComponent,
    TrackLiftComponent,
    CustomRenderComponent,
    ButtonViewComponent,
    GainzComponent,
   BlogDisplayComponent,
    SafePipe
  ],
    imports: [
    CarouselModule.forRoot(),
    TabsModule.forRoot(),
    OrderModule,
    Ng2SmartTableModule,
    NgxEditorModule,
    AngularFontAwesomeModule,
    ModalModule.forRoot(),
    HttpModule, NgPipesModule,
    ReactiveFormsModule,
    HttpClientModule,
    FormsModule,
    NgbModule.forRoot(),
    BrowserAnimationsModule,
    Ng5SliderModule,

    CloudyModule,
    BrowserModule,
    RouterModule.forRoot(appRoutes)
    ],
    entryComponents: [CustomRenderComponent, ButtonViewComponent],

    providers: [AdminServiceService, AlwaysAuthGuard,     OnlyLoggedInGuard],
bootstrap: [AppComponent]
})

the library works fine the only error is this 'Unexpected value 'CloudyModule in /home/hadi/dev/rickithadi/node_modules/cloudee/cloudee.d.ts' imported by the module 'AppModule in /home/hadi/dev/rickithadi/src/app/app.module.ts'. Please add a @NgModule annotation.' Which is not allowing me to deploy.

Anthony Massin Anthony Massin · Accepted Answer · 2019-02-07T14:59:22

use @ngModule in your app.module.ts

import { NgModule } from "@angular/core";

@NgModule({
    imports: [ CloudyModule ]
})

Problem building poject with angular library. ng serve works fine locally Error message is Please add a @NgModule annotation

1 Answers