Angular 2のプロジェクトでionic 2のコンポーネントを使用するにはどうしたらいいですか？

Question

角度2のプロジェクトのフィーチャモジュールでイオン2を使いたいです。私は、イオンの成分やタグを私の一部の成分に使用したい。私が行っているが、私はこのエラーに EXCEPTION: Expected to not be in Angular Zone, but it is!

を得たすべてのものは、誰かがどのような角度2プロジェクトにイオン2」sのコンポーネントを使用するのではなく、新しいものを作成するために、イオン性-CLIを使用しないように教えてもらえますか？

Answer 1

まずあなたがそれも警告して動作しますが、場合になるように

npm WARN ionic-angular@2.0.0-rc.2 requires a peer of @angular/common@2.1.1 but none was installed. 
npm WARN ionic-angular@2.0.0-rc.2 requires a peer of @angular/compiler@2.1.1 but none was installed. 
... 

など、いくつかの警告を得ることができ、その後

ng new myapp --style=scss 

を使用して

cd myapp 
npm install --save ionic-angular ionicons 

を角度の2プロジェクトを作成しますあなたは、これらの警告をすべて取り除くことを好むでしょう。あなたは、peerDependenciesがionic-angular wiによって宣言されているかを調べることができます目：

npm view ionic-angular peerDependencies 

その後、イオンは、独自のナビゲーションメカニズムを提供するので、あなたはまた、角度/ルータ@削除でき応じpackage.jsonでバージョンを更新し、npm install. 。

npm uninstall --save @angular/router 

次に、あなたのプロジェクトにイオンを使用するng serve

次のステップはIonicModule代わりの角度のBrowserModuleをインポートし、IonicAppをブートストラップするのsrc /アプリ/ app.module.tsを変更することです：

import { NgModule } from '@angular/core'; 
import { IonicApp, IonicModule } from 'ionic-angular'; 

import { AppComponent } from './app.component'; 

@NgModule({ 
    imports: [ IonicModule.forRoot(AppComponent) ], 
    declarations: [ AppComponent ], 
    bootstrap: [ IonicApp ] 
}) 
export class AppModule { } 

IonicAppコンポーネントのセレクタにはion-appが含まれているため、src/index.htmlに置き換えて変更する必要があります。

Ionic CLIが生成するものと幾分類似したプロジェクト構造を維持するには、src/themeフォルダを作成し、ionic.scssとvariables.scssの2つのファイルをダウンロードして入れます。

は、最後にアプリ内のスタイルで最初variables.scssロードする角度-cli.jsonを編集することで、ビルドプロセスに含める：あなたはこの変更のために役立つNGを再起動する必要があります

"styles": [ 
    "theme/variables.scss", 
    "styles.scss" 
], 

注意を効力を発揮する。

基本的なイオニアアプリケーションを作成する最後のステップは、ページコンポーネントを作成し、それをion-navを使用してAppComponentにロードすることです。

これを行うには、src/pagesフォルダを作成します。

import { Component } from '@angular/core'; 

@Component({ 
    selector: 'page-home', 
    templateUrl: 'home.page.html' 
}) 
export class HomePage { 

    message = 'Welcome!'; 

} 

とヘッダとコンテンツを含む基本的なイオンページとhome.page.htmlで対応するテンプレート、：

<ion-header> 
    <ion-navbar> 
    <ion-title>Ionic App</ion-title> 
    </ion-navbar> 
</ion-header> 
<ion-content padding> 
    {{ message }} 
</ion-content> 

あなたはそれが助けionic2-with-angular-cli .Hopeから完全なドキュメントを取得することができます。