Error using ngx-hm-carousel module when ng build --prod

Question

I am trying this example https://github.com/ZouYouShun/ngx-hm-carousel. It is working fine but when I run this command:

ng build --prod

I am getting this error:

ERROR in :

Unexpected value 'NgxHmCarouselModule in D:/angular-apps/CarouselApp/node_modules/ngx-hm-carousel/lib/ngx-hm-carousel.module.d.ts' imported by the module 'AppModule in D:/angular-apps/CarouselApp/src/app/app.module.ts'. Please add a @NgModule annotation.

Do u know what is missing?

Using:
Angular CLI: 6.0.8
Node: 8.11.2
OS: win32 x64

This is my app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { NgxHmCarouselModule } from 'ngx-hm-carousel';

import { AppComponent } from './app.component';

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

Vikas Vikas · Accepted Answer · 2018-06-15T17:22:03

In Angular we have 2 models of compilation

JIT - Just-in-Time Compilation : JIT compilation as the name implies, compiles the application Just-in-Time in the browser at runtime.
AoT - Ahead-of-Time Compilation : AoT compilation compiles the application at build time.

By default, with the development build i.e ng serve we get JIT compilation. This is how it works. The application code along with the angular compiler is downloaded by the browser. At runtime, when a request is issued to the application, the JIT-compiler in the browser compiles the application code before it is executed.

with the production build i.e ng build --prod we get AoT compilation the angular application is pre-compiled. So this means the browser loads executable code so it can render the application immediately, without waiting to compile the application first.
Basic overview of Just In Time (JIT) Vs Ahead Of Time (AOT) Compilation in Angular Applications

Unfortunately, The library you are using does not support AOT compilation

One workaround is to Tweak your angular.json file set "aot": false and "buildOptimizer": false

"configurations": {
            "production": {
              "fileReplacements": [
                {
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                }
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": false,<-----here
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": false<----here
            }

and Execute ng build --prod
if you don't want to modify your angular.json you can go for

 ng build --prod --aot=false --build-optimizer=false

or you can modify the build script in your package.json

"scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build --prod --aot=false --build-optimizer=false",

and execute npm run build

Error using ngx-hm-carousel module when ng build --prod

2 Answers