仅包含sidemenu模板的项目上的Ionic White屏幕

时间:2018-10-12 09:04:29

标签: android angular cordova ionic-framework

离子信息 离子性:

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。

0 个答案:

没有答案