Ionic v4 layout documentation is not updated

[anidotnet]

URL
https://ionicframework.com/docs/layout/structure

What is missing or inaccurate about the content on this page?

The usage code for layout structures are not updated and it is creating problem while learning the framework. Would highly appreciate it if it is updated appropriately.

[brandyscarney]

Thanks for the issue! Which part is not updated?

[anidotnet]

I have only seen 2, after that I stopped reading as I suspect the document is not updated. The 2 places I found are as follows:

1. https://ionicframework.com/docs/layout/structure#tabs-layout

<ion-tab tab="home">
  <h1>Home Content</h1>
</ion-tab>
<ion-tab tab="settings">
  <h1>Settings Content</h1>
</ion-tab>

ion-tab is not supported in v4.

2. https://ionicframework.com/docs/layout/structure#menu-layout

<ion-page class="ion-page" main>
  <ion-header>
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-menu-toggle>
          <ion-button>
            <ion-icon slot="icon-only" name="menu"></ion-icon>
          </ion-button>
        </ion-menu-toggle>
      </ion-buttons>
      <ion-title>Header</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content padding>
    <h1>Main Content</h1>
    <p>Click the icon in the top left to toggle the menu.</p>
  </ion-content>
</ion-page>

ion-page is not supported in v4 it seems.

[brandyscarney]

Thanks for the quick reply! The examples are written in vanilla JavaScript and it looks accurate for the tabs example: https://codepen.io/brandyscarney/pen/aMMrPK

You're right that ion-page does not exist anymore, however it should still work with that markup since the ion-page class is there: https://codepen.io/brandyscarney/pen/GeeaLR

Are you looking for this documentation for a specific framework? If so, could you please let me know which one? 🙂

[anidotnet]

I was looking to create a mobile application using angular 7 and ionic 4. When I used these markup in my ionic + angular project, the page is not getting rendered in the browser.

In developer console I am seeing below error message:

ERROR Error: Uncaught (in promise): Error: Template parse errors:
'ion-tab' is not a known element:
1. If 'ion-tab' is an Angular component, then verify that it is part of this module.
2. If 'ion-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

    <ion-tabs>
        [ERROR ->]<ion-tab tab="home">
            <h1>Home Content</h1>
        </ion-tab>
"): ng:///ListPageModule/ListPage.html@75:8
'ion-tab' is not a known element:
1. If 'ion-tab' is an Angular component, then verify that it is part of this module.
2. If 'ion-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
            <h1>Home Content</h1>
        </ion-tab>
        [ERROR ->]<ion-tab tab="settings">
            <h1>Settings Content</h1>
        </ion-tab>
"): ng:///ListPageModule/ListPage.html@78:8
Error: Template parse errors:
'ion-tab' is not a known element:
1. If 'ion-tab' is an Angular component, then verify that it is part of this module.
2. If 'ion-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("

    <ion-tabs>
        [ERROR ->]<ion-tab tab="home">
            <h1>Home Content</h1>
        </ion-tab>
"): ng:///ListPageModule/ListPage.html@75:8
'ion-tab' is not a known element:
1. If 'ion-tab' is an Angular component, then verify that it is part of this module.
2. If 'ion-tab' is a Web Component then add 'CUSTOM_ELEMENTS_SCHEMA' to the '@NgModule.schemas' of this component to suppress this message. ("
            <h1>Home Content</h1>
        </ion-tab>
        [ERROR ->]<ion-tab tab="settings">
            <h1>Settings Content</h1>
        </ion-tab>
"): ng:///ListPageModule/ListPage.html@78:8
    at syntaxError (compiler.js:2430)
    at TemplateParser.push../node_modules/@angular/compiler/fesm5/compiler.js.TemplateParser.parse (compiler.js:20605)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._parseTemplate (compiler.js:26171)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileTemplate (compiler.js:26158)
    at compiler.js:26101
    at Set.forEach (<anonymous>)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileComponents (compiler.js:26101)
    at compiler.js:26011
    at Object.then (compiler.js:2421)
    at JitCompiler.push../node_modules/@angular/compiler/fesm5/compiler.js.JitCompiler._compileModuleAndComponents (compiler.js:26010)
    at resolvePromise (zone.js:831)
    at resolvePromise (zone.js:788)
    at zone.js:892
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:423)
    at Object.onInvokeTask (core.js:17289)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:422)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:195)
    at drainMicroTaskQueue (zone.js:601)

Am I missing something?

[brandyscarney]

You're correct that it won't work in Angular. The example is in vanilla JavaScript meaning no framework. 🙂

I agree that our guide documentation needs to be updated for consistency and making it better known which framework you are viewing, we have some places in the guide where the code examples are written in Angular and others in vanilla JavaScript. You may want to look at our navigation documentation for Angular: https://ionicframework.com/docs/navigation/angular

We have some usage examples in the API documentation where you can toggle between the frameworks:
https://ionicframework.com/docs/api/tabs#usage
https://ionicframework.com/docs/api/menu#usage
https://ionicframework.com/docs/api/split-pane#usage

I've mentioned updating the guide to the team though, so we'll keep it in mind! Thanks!