离子信息 离子性:
ionic (Ionic CLI) : 4.2.1 (/usr/local/lib/node_modules/ionic)
Ionic Framework : @ionic/angular 4.0.0-beta.12
@angular-devkit/build-angular : 0.7.5
@angular-devkit/schematics : 0.7.5
@angular/cli : 6.2.4
@ionic/angular-toolkit : 1.0.0
科尔多瓦:
cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
Cordova Platforms : android 7.1.1, browser 5.0.4
Cordova Plugins : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.2.0, (and 4 other plugins)
系统:
Android SDK Tools : 26.1.1 (/Users/we/Library//Android/sdk)
NodeJS : v8.11.4 (/usr/local/bin/node)
npm : 6.4.1
OS : macOS High Sierra
Xcode : Xcode 8.0 Build version 8A218a
我使用以下命令创建了一个新项目:
ionic start sandbox2 sidemenu --type=angular
然后我尝试使用以下命令将其部署到android设备:
ionic cordova emulate android --target="nexus"
目标是具有Android 7(API 24)的仿真器 我没有更改任何代码,但唯一看到的是白屏。
控制台输出:
The key "viewport-fit" is not recognized and ignored.
vendor.js:34241Angular is running in the development mode. Call enableProdMode() to enable the production mode.
vendor.js:32793ERROR Error: Uncaught (in promise): TypeError: Object.values is not a function(…)defaultErrorLogger @ vendor.js:32793
vendor.js:32793ERROR Error: Uncaught (in promise): TypeError: containerEl.commit is not a function(…)defaultErrorLogger @ vendor.js:32793
vendor.js:64239Ionic Native: deviceready event fired after 995 ms
由于屏幕为白色,我希望DOM显示一个空的应用程序根标签,但我发现了这一点:
<body>
<app-root ng-version="6.1.9">
<ion-app>
<ion-split-pane>
<ion-menu>
<ion-header>
<ion-toolbar>
<ion-title>Menu</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<ion-list>
<!--bindings={
"ng-reflect-ng-for-of": "[object Object],[object Object"
}-->
<ion-menu-toggle auto-hide="false">
<ion-item tabindex="0" ng-reflect-router-direction="root" ng-reflect-router-link="/home">
<ion-icon slot="start" ng-reflect-name="home"></ion-icon>
<ion-label> Home </ion-label>
</ion-item>
</ion-menu-toggle>
<ion-menu-toggle auto-hide="false">
<ion-item tabindex="0" ng-reflect-router-direction="root" ng-reflect-router-link="/list">
<ion-icon slot="start" ng-reflect-name="list"></ion-icon>
<ion-label> List </ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet main="">
<app-home _nghost-c0="" class="ion-page ion-page-invisible">
<ion-header _ngcontent-c0="">
<ion-toolbar _ngcontent-c0="">
<ion-buttons _ngcontent-c0="" slot="start">
<ion-menu-button _ngcontent-c0=""></ion-menu-button>
</ion-buttons>
<ion-title _ngcontent-c0=""> Home </ion-title>
</ion-toolbar>
</ion-header>
<ion-content _ngcontent-c0="" padding=""> The world is your oyster.
<p _ngcontent-c0="">If you get lost, the <a _ngcontent-c0="" href="https://ionicframework.com/docs" rel="noopener" target="_blank">docs</a> will be your guide.</p>
</ion-content>
</app-home>
</ion-router-outlet>
</ion-split-pane>
</ion-app>
</app-root>
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
我不知道为什么缺少样式以显示我添加到该项目的sidemenu模板。
当我尝试将项目部署到浏览器时,它运行良好。我为此使用了此命令:
ionic cordova run browser
我已经尝试将<base href="/" />
更改为<base href="." />
,但没有成功。
我要做的第二件事是像这样删除主页上不可见的离子页面样式:
export class HomePage implements OnInit {
constructor(
private renderer: Renderer2,
private el: ElementRef
) {
}
ngOnInit() {
this.renderer.removeClass(this.el.nativeElement, 'ion-page-invisible');
}
}
我在我的android设备上检查了一下,样式已删除。...但我仍然看不到任何东西。
更新
我现在已经在Android和IOS模拟器上对其进行了测试,但是没有工作,但是后来我尝试了物理设备并使它工作,这是API级别的问题。
工作: API 26 Oreo(Android 8.0)->物理设备运行后在模拟器中对其进行了尝试 Mac nativ 浏览器
不起作用: Android API 25及以下 具有IOS 10的iPhone模拟器->无法正常工作
由于其他错误而无法正常工作: 由于“ PANIC:'x86'CPU缺少仿真器引擎程序”,Android API超过26。