Lazy chargement composant 3ème partie en page chargée (ionique)

Question

L'application de travail quand je lance cordova ionique run android --device mais donne erreur lorsque je run cordova ionique android --prod --release

Je suis en train utiliser NG2-QRCode dans ma page chargée paresseux

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)

info ionique

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

packages globaux:

cordova (Cordova CLI) : 7.0.1 

paquets locaux:

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

Système:

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

Divers:

backend : pro 

item module détail

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 n'est plus maintenu et ne fonctionne pas avec le compilateur AoT de angular (qui est utilisé lorsque vous construisez votre application avec --prod). Mais il y a une baisse de remplacement qui est construite pour être utilisée dans les projets Ionic3/Angular4 + qui utilisent le compilateur AoT: angularx-qrcode. Il est basé sur la même bibliothèque et fournit la même API.

Ajouter comme suit:

npm install angularx-qrcode --save 

Et pour l'utiliser l'importer dans votre NgModule:

import { QRCodeModule } from 'angularx-qrcode'; 

Et puis l'ajouter au tableau imports:

imports: [ 
    QRCodeModule 
],