Ionic 4 buttons not rendering in browser or Ionic DevApp


#1

Hi
am creating an Ionic 4 app but the buttons are not rendering. The app is a sidemenu and the button markup I use is:

 <button ion-button >Login</button>

I have cut the code down to keep it simple but all I get is the text within a light grey background.
Have created a blank test project

ionic start Test4 blank ---type=angular

with the above button and get the same result
Ran ionic info:

Ionic:

ionic (Ionic CLI) : 4.2.1
Ionic Framework : @ionic/angular 4.0.0-beta.13
@angular-devkit/build-angular : 0.8.6
@angular-devkit/schematics : 0.8.6
@angular/cli : 6.2.6
@ionic/angular-toolkit : 1.0.0

System:

NodeJS : v8.12.0
npm : 6.3.0
OS : Windows 10

package versions in Package.json of the test app"
“dependencies”: {
@angular/common”: “~6.1.1”,
@angular/core”: “~6.1.1”,
@angular/forms”: “~6.1.1”,
@angular/http”: “~6.1.1”,
@angular/platform-browser”: “~6.1.1”,
@angular/platform-browser-dynamic”: “~6.1.1”,
@angular/router”: “~6.1.1”,
@ionic-native/core”: “5.0.0-beta.21”,
@ionic-native/splash-screen”: “5.0.0-beta.21”,
@ionic-native/status-bar”: “5.0.0-beta.21”,
@ionic/angular”: “4.0.0-beta.13”,
“core-js”: “^2.5.3”,
“rxjs”: “6.2.2”,
“zone.js”: “^0.8.26”
},
“devDependencies”: {
@angular-devkit/architect”: “~0.8.5”,
@angular-devkit/build-angular”: “~0.8.5”,
@angular-devkit/core”: “~0.8.5”,
@angular-devkit/schematics”: “~0.8.5”,
@angular/cli”: “~6.2.5”,
@angular/compiler”: “~6.1.1”,
@angular/compiler-cli”: “~6.1.1”,
@angular/language-service”: “~6.1.1”,
@ionic/angular-toolkit”: “^1.0.0”,
@types/jasmine”: “~2.8.6”,
@types/jasminewd2”: “~2.0.3”,
@types/node”: “~10.12.0”,
“codelyzer”: “~4.5.0”,
“jasmine-core”: “~2.99.1”,
“jasmine-spec-reporter”: “~4.2.1”,
“karma”: “~3.0.0”,
“karma-chrome-launcher”: “~2.2.0”,
“karma-coverage-istanbul-reporter”: “~2.0.0”,
“karma-jasmine”: “~1.1.1”,
“karma-jasmine-html-reporter”: “^0.2.2”,
“protractor”: “~5.4.0”,
“ts-node”: “~7.0.0”,
“tslint”: “~5.11.0”,
“typescript”: “~2.9.2”
},

any help greatly appreciated…these are stock standard buttons. Have run them in Chrome browser and DevApp with same result…no rendering ??


#2

The button syntax in Ionic 4 is:

<ion-button>My Button</ion-button>

Check out this document: https://github.com/ionic-team/ionic/blob/master/angular/BREAKING.md


#3

Yep, that worked…I’ll have to be careful of the changes…the floating label got me initially until I realised I had to set the property

position="floating"

otherwise the label don’t float !!!
Thanks for the advice & link