懶在加載頁面加載第三方組件（離子）

的應用程序工作當我運行離子科爾多瓦運行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

懶在加載頁面加載第三方組件（離子）

回答

相關問題