ng build --prod 时使用 ngx-hm-carousel 模块时出错

Question

我正在尝试这个例子 https://github.com/ZouYouShun/ngx-hm-carousel。它工作正常但是当我运行这个命令时：

ng build --prod

我收到这个错误：

错误：

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.

你知道少了什么吗？

使用：
Angular命令行界面：6.0.8
节点：8.11.2
OS: win32 x64

这是我的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 { }

Answer 1

在Angular中我们有2个编译模型

JIT - Just-in-Time Compilation : JIT编译顾名思义，在浏览器中Just-in-Time编译应用程序在运行时.
AoT - 提前编译： AoT 编译在构建时编译应用程序。

默认情况下，通过开发构建，即 ng serve，我们得到 JIT 编译。这就是它的工作原理。应用程序代码连同 angular 编译器由浏览器下载。在运行时，当向应用程序发出请求时，浏览器中的 JIT 编译器会在执行之前编译应用程序代码。

使用生产构建，即 ng build --prod 我们获得 AoT 编译，angular 应用程序已预编译。所以这意味着浏览器加载可执行代码，以便它可以立即呈现应用程序，而无需先等待编译应用程序。
Basic overview of Just In Time (JIT) Vs Ahead Of Time (AOT) Compilation in Angular Applications

很遗憾，您使用的库不支持AOT编译

一种解决方法是调整您的 angular.json 文件集 "aot": false 和 "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
            }

并执行ng build --prod
如果你不想修改你的angular.json，你可以选择

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

或者您可以修改 package.json

中的构建脚本

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

并执行npm run build

Answer 2

我是这个包的作者。此问题已在 ngx-hm-carousel@1.2.1 中修复。在 https://alanzouhome.firebaseapp.com/package/NgxHmCarousel.

查看更多详细信息

ng build --prod 时使用 ngx-hm-carousel 模块时出错

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

angular-cli

angular

angular6