Question

我想在angular 2项目的功能模块中使用离子2。我想在我的某些组件中使用离子的组件或标签。我做过的每一件事，但我都遇到了这个错误 EXCEPTION: Expected to not be in Angular Zone, but it is!

有人可以告诉我如何在角度2项目中使用离子2的组件但不使用ionic-cli来创建一个新组件？

Answer 1

首先使用

创建一个角度2项目

ng new myapp --style=scss

然后

cd myapp
npm install --save ionic-angular ionicons

您可能会收到一些警告，例如

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.
...

它甚至可以用于警告，但是如果您想要删除所有这些警告，您可以通过ionic-angular检查哪些peerDependencies：

npm view ionic-angular peerDependencies

然后相应地更新package.json中的版本并npm install. 你也可以删除@ angular / router，因为Ionic提供了自己的导航机制。

npm uninstall --save @angular/router

然后ng serve

在项目中使用Ionic的下一步是更改src / app / app.module.ts以导入IonicModule而不是Angular的BrowserModule，并引导IonicApp：

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。

最后通过编辑angular-cli.json将它们包含在构建过程中，以便首先在app中的样式中加载variables.scss：

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

请注意，您必须重新启动服务才能使此更改生效。

拥有基本Ionic应用程序的最后一步是创建一个页面组件，并使用ion-nav将其加载到AppComponent中。

为此，使用包含例如

的home.page.ts文件创建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获取完整的文档。希望它有所帮助。

如何在角度2项目中使用离子2的组件？

1 个答案: