在加载页面中延迟加载第 3 方组件（Ionic）

Question

应用程序在我运行 ionic cordova 运行 android 设备时工作，但在我尝试 ionic cordova 运行 android 时出现错误 --产品--发布

我正在尝试在延迟加载的页面中使用 ng2-qrcode

Error: Unexpected value 'QRCodeComponent in D:/qrstore/node_modules/ng2-qrcode/dist/ng2-qrcode.d.ts' declared by the module 'ItemDetailPageModule in D:/qrstore/src/pages/item-detail/item-detail.module.ts'. Please add a @Pipe/@Directive/@Component annotation. at Error (native) at syntaxError (D:\qrstore\node_modules\@angular\compiler\bundles\compiler.umd.js:1729:34) at D:\qrstore\node_modules\@angular\compiler\bundles\compiler.umd.js:15625:40 at Array.forEach (native) at CompileMetadataResolver.getNgModuleMetadata (D:\qrstore\node_modules\@angular\compiler\bundles\compiler.umd.js:15607:54) at addNgModule (D:\qrstore\node_modules\@angular\compiler\bundles\compiler.umd.js:24403:58) at D:\qrstore\node_modules\@angular\compiler\bundles\compiler.umd.js:24414:14 at Array.forEach (native) at _createNgModules (D:\qrstore\node_modules\@angular\compiler\bundles\compiler.umd.js:24413:26) at analyzeNgModules (D:\qrstore\node_modules\@angular\compiler\bundles\compiler.umd.js:24288:14)

离子信息

@ionic/cli-utils  : 1.12.0
ionic (Ionic CLI) : 3.12.0

全局包：

cordova (Cordova CLI) : 7.0.1

本地包：

@ionic/app-scripts : 3.0.0
Cordova Platforms  : android 6.2.3
Ionic Framework    : ionic-angular 3.7.1

系统：

Android SDK Tools : 25.2.3
Node              : v6.9.4
npm               : 3.10.8
OS                : Windows 10

杂项：

backend : pro

物品详情模块

import { NgModule } from '@angular/core';
import { IonicPageModule } from 'ionic-angular';
import { ItemDetailPage } from './item-detail';
import { HttpModule, Http } from '@angular/http';

//native
import { File } from '@ionic-native/file';
import { FilePath } from '@ionic-native/file-path';
import { SQLite } from '@ionic-native/sqlite';

//providers
import { ItemsProvider, LabelsProvider, SQLiteDatabaseProvider } from '../../providers/providers';

//components
import { ItemCreatePage } from '../item-create/item-create';
import { QRCodeComponent } from 'ng2-qrcode'

//directive
import { AbsoluteDragDirective } from '../../directives/absolute-drag/absolute-drag';

@NgModule({
  declarations: [
    ItemDetailPage,
    QRCodeComponent,
    AbsoluteDragDirective
  ],
  imports: [
    IonicPageModule.forChild(ItemDetailPage),
    HttpModule
  ],
  exports: [
    ItemDetailPage
  ],
  entryComponents: []
  ,
  providers:[
    ItemsProvider,
    SQLite,
    SQLiteDatabaseProvider,
     File,
    FilePath
  ]
})
export class ItemDetailPageModule {}

Answer 1

ng2-qrcode 不再维护，并且不能与 angular 的 AoT 编译器一起使用（在使用 --prod 构建应用程序时使用）。但是在 Ionic3/Angular4+ 使用 AoT 编译器的项目中使用的替代品有所减少：angularx-qrcode。它基于相同的库并提供相同的 API.

添加如下：

npm install angularx-qrcode --save

要使用它，请将其导入您的 NgModule:

import { QRCodeModule } from 'angularx-qrcode';

然后添加到imports数组中：

imports: [
  QRCodeModule
],

Answer 2

我是上述 angularx-qrcode 的作者。

对于那些来到这里并使用 angularx-qrcode-package 的人，我为 angular5/6 准备了一个可用的 angular-app 以便更容易开始：

https://github.com/Cordobo/angularx-qrcode-sample-app

master-branch: 最新 angular, 在发布时 angular6 angular5分支：你猜对了，是angular5

HTH

在加载页面中延迟加载第 3 方组件（Ionic）

Lazy loading 3rd party component in loaded page (Ionic)

lazy-loading

ionic-framework

ionic3