Erstellen Sie zunächst einen Winkel 2 Projekt mit
ng new myapp --style=scss
dann
cd myapp
npm install --save ionic-angular ionicons
Sie können ein paar Warnungen wie
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
npm WARN [email protected] requires a peer of @angular/[email protected] but none was installed.
...
Es wird noch arbeitet auch mit den Warnungen, aber wenn Sie bevorzugen, all diese Warnungen loszuwerden, die Sie überprüfen können, welche peerDependencies von ionic-eckigen wi erklärt werden th:
npm view ionic-angular peerDependencies
dann die verschiedenen Versionen in package.json entsprechend aktualisieren und npm install. könnten Sie auch @ Winkel/Router entfernen, da Ionic seinen eigenen Navigationsmechanismus bietet.
npm uninstall --save @angular/router
Dann ng serve
Der nächste Schritt Ionic in Ihrem Projekt zu verwenden ist src/app/app.module.ts zu ändern, um das IonicModule statt Angular des BrowserModule zu importieren, und Bootstrap 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 { }
Die IonicApp-Komponente hat ion-app als Selektor, daher müssen Sie auch src/index.html ersetzen durch ändern.
Um die Projektstruktur in etwa so zu halten, wie die Ionic CLI generiert, erstellen Sie einen Ordner "src/theme", laden Sie diese beiden Dateien herunter und legen Sie sie in diesen Ordner: ionic.scss und variables.scss.
sind sie schließlich in Build-Prozess und bearbeite Winkel cli.json erste innen App in den Styles zu laden variables.scss:
"styles": [
"theme/variables.scss",
"styles.scss"
],
Beachten Sie, dass Sie neu starten müssen, werden ng für diese Änderung dazu dienen, wirksam werden.
Der letzte Schritt für eine grundlegende Ionic App besteht darin, eine Seitenkomponente zu erstellen und sie in AppComponent mit Ion-Nav zu laden.
Erstellen Sie dazu einen Ordner src/pages mit einer Datei home.page.ts, die z.
import { Component } from '@angular/core';
@Component({
selector: 'page-home',
templateUrl: 'home.page.html'
})
export class HomePage {
message = 'Welcome!';
}
und die entsprechende Vorlage in home.page.html mit einer basischen ionischen Seite, einschließlich Header und Inhalt:
<ion-header>
<ion-navbar>
<ion-title>Ionic App</ion-title>
</ion-navbar>
</ion-header>
<ion-content padding>
{{ message }}
</ion-content>
Sie können die vollständige Dokumentation von ionic2-with-angular-cli bekommen .Hope es hilft.