Question

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

ng build --prod

我收到此错误：

错误：

意外的值＆＃39; NgxHmCarouselModule in d：/angular-apps/CarouselApp/node_modules/ngx-hm-carousel/lib/ngx-hm-carousel.module.d.ts' 由模块＆＃39; AppModule导入 d：/angular-apps/CarouselApp/src/app/app.module.ts' ;.请添加一个 @NgModule注释。

你知道缺少什么吗？

使用：
Angular CLI：6.0.8
节点：8.11.2
操作系统：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 - 即时编译：顾名思义，JIT编译，在浏览器中编译应用程序即时编辑运行时。
AoT - 提前编译： AoT编译在构建时编译应用程序。

默认情况下，使用开发构建即ng serve，我们可以获得JIT编译。这是它的工作原理。浏览器下载应用程序代码和角度编译器。在运行时，当向应用程序发出请求时，浏览器中的JIT编译器会在应用程序代码执行之前编译它。

使用生成构建即ng build --prod我们得到AoT编译，角度应用程序是预编译的。这意味着浏览器加载可执行代码，以便它可以立即呈现应用程序，而无需先等待编译应用程序 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模块时出错

2 个答案: