Ion-Menu isn't displayed

Java_Programming · July 31, 2017, 9:05am

Hi, I started programming with ionic and I want to create a page with a sidemenu. I have the following code:

import { Component, ViewChild } from '@angular/core';
import { NavController } from 'ionic-angular';
import { Nav, Platform } from 'ionic-angular';
import { Uebungen } from '../Uebungen/Uebungen';

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

export class HomePage {
  @ViewChild(Nav) nav: Nav;

  rootpage: any = Uebungen;
  pages:any[] = [{title:"Uebungen",controller:Uebungen}];

  constructor(public navCtrl: NavController) {

  }

}

<ion-side-menu [content]="content">
    <ion-header>
        <ion-navbar>
            <ion-title>
                Ionic Blank
            </ion-title>
        </ion-navbar>
    </ion-header>

    <ion-content padding>
        <ion-list>
            <button menueClose>TEST</button>
        </ion-list>
    </ion-content>
</ion-side-menu>

<ion-nav #content [root]="rootpage"></ion-nav>

If I run this, I only get a black view. No content on it.
If I look what is written in the console I see:


polyfills.js:3 Error: Uncaught (in promise): Error: Template parse errors:
Can't bind to 'content' since it isn't a known property of 'ion-side-menu'.
1. If 'ion-side-menu' is an Angular component and it has 'content' input, then verify that it is part of this module.
2. If 'ion-side-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<ion-side-menu [ERROR ->][content]="content">
    <ion-header>
        <ion-navbar>
"): ng:///AppModule/HomePage.html@0:15
'ion-side-menu' is not a known element:
1. If 'ion-side-menu' is an Angular component, then verify that it is part of this module.
2. If 'ion-side-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ion-side-menu [content]="content">
    <ion-header>
        <ion-navbar>
"): ng:///AppModule/HomePage.html@0:0
Error: Template parse errors:
Can't bind to 'content' since it isn't a known property of 'ion-side-menu'.
1. If 'ion-side-menu' is an Angular component and it has 'content' input, then verify that it is part of this module.
2. If 'ion-side-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message.
3. To allow any property add 'NO_ERRORS_SCHEMA' to the '@NgModule.schemas' of this component. ("<ion-side-menu [ERROR ->][content]="content">
    <ion-header>
        <ion-navbar>
"): ng:///AppModule/HomePage.html@0:15
'ion-side-menu' is not a known element:
1. If 'ion-side-menu' is an Angular component, then verify that it is part of this module.
2. If 'ion-side-menu' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("[ERROR ->]<ion-side-menu [content]="content">
    <ion-header>
        <ion-navbar>
"): ng:///AppModule/HomePage.html@0:0
    at syntaxError (http://localhost:8100/build/vendor.js:76739:34)
    at TemplateParser.parse (http://localhost:8100/build/vendor.js:87230:19)
    at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:100981:39)
    at http://localhost:8100/build/vendor.js:100905:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:100905:19)
    at createResult (http://localhost:8100/build/vendor.js:100790:19)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
    at r.run (http://localhost:8100/build/polyfills.js:3:4452)
    at http://localhost:8100/build/polyfills.js:3:14076
    at syntaxError (http://localhost:8100/build/vendor.js:76739:34)
    at TemplateParser.parse (http://localhost:8100/build/vendor.js:87230:19)
    at JitCompiler._compileTemplate (http://localhost:8100/build/vendor.js:100981:39)
    at http://localhost:8100/build/vendor.js:100905:62
    at Set.forEach (native)
    at JitCompiler._compileComponents (http://localhost:8100/build/vendor.js:100905:19)
    at createResult (http://localhost:8100/build/vendor.js:100790:19)
    at t.invoke (http://localhost:8100/build/polyfills.js:3:9283)
    at r.run (http://localhost:8100/build/polyfills.js:3:4452)
    at http://localhost:8100/build/polyfills.js:3:14076
    at c (http://localhost:8100/build/polyfills.js:3:13535)
    at c (http://localhost:8100/build/polyfills.js:3:13221)
    at http://localhost:8100/build/polyfills.js:3:14067
    at t.invokeTask (http://localhost:8100/build/polyfills.js:3:9967)
    at r.runTask (http://localhost:8100/build/polyfills.js:3:5143)
    at o (http://localhost:8100/build/polyfills.js:3:2203)
    at <anonymous>

I would appreciate any kind of help!

vipin-developer · October 4, 2018, 8:27am

I’m Also Facing the same issue

dyestrad · October 7, 2018, 1:50pm

This is happening to me as well, Im using ionic-v4 though… does it have anything to do with using angular in my app? I am quite new with ionic
The estrangest thing is that I went through the ionic tutorial and used this code for the menu and it works perfectly:

app.html
<ion-menu [content]=“content”>

<ion-header>

<ion-toolbar>

<ion-title>País</ion-title>

</ion-toolbar>

</ion-header>

<ion-content>

<ion-list>

<ion-thumbnail item-start>

</ion-thumbnail>

</button>

</ion-list>

</ion-content>

</ion-menu>

<ion-nav [root]=“rootPage” #content swipeBackEnabled=“false”></ion-nav>

but it does not work when I use a pretty similar code in another app (ionic start mymenuapp sidemenu --type=angular), this is the app.component.html:

<ion-app>
<ion-menu [content]=“content”>