懒在加载页面加载第三方组件（离子）

的应用程序工作当我运行离子科尔多瓦运行Android的--device但给人错误，当我尝试离子科尔多瓦运行的Android --prod --release懒在加载页面加载第三方组件（离子）

我想使用NG2-QR码到我的懒加载页面

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 {}

来源

2017-10-08 lijnam

ng2-qrcode不再维护，并且不支持角度AoT编译器（当您使用--prod构建应用程序时使用）。但是，在使用AoT编译器的Ionic3/Angular4 +项目中使用的替代品有所下降：angularx-qrcode。它基于相同的库并提供相同的API。

如下添加：

npm install angularx-qrcode --save

，并使用它导入它在你的NgModule：

import { QRCodeModule } from 'angularx-qrcode';

然后将其添加到imports阵列：

imports: [ 
    QRCodeModule 
],

来源

2017-10-08 18:50:23 David

良好的信息+1。一个问题：这是不是意味着我们不能使用任何不使用Angular 4或更高版本开发的Angular组件？换句话说，我们不能在'AOT'中使用最新的'Ionic 3'的'Angular 2'组件吗？ – Sampath

谢谢山姆！组件本身没有问题，如果你将它粘贴到自己的项目中，它应该可以正常工作。问题在于图书馆是如何发布的，为了让你的Angular2库和ngc（角度编译器，它在prod模式下提前运行）一起工作，必须进行一些修改（例如，除了* .d.ts文件之外，需要* .metadata.json文件）。你可以阅读更多关于它[这里]（https://medium.com/@isaacplmann/getting-your-angular-2-library-ready-for-aot-90d1347bcad）。所以大多数组件应该与Angular4/Ionic3一起工作，但不是这个，因为它没有维护。 – David

懒在加载页面加载第三方组件（离子）

回答

相关问题