Improperly loading components? [SOLVED]

Ionic Framework ionic-v3
1

I’m using ionic 2 on windows 10 and for a reason I can’t figure out exactly, it seems like the ionic components aren’t working properly - they don’t have the correct look and while I can check the generated console code to be correct, the actual look of the components is incorrect - buttons are incorrect, stacked label inputs don’t have stacking, text inputs don’t work full width, the list goes on.

Attached is an image example of the following code:

login.html:

<ion-navbar secondary *navbar>

<ion-content>
	<ion-list>
		<ion-list-header>
			Login
		</ion-list-header>
		<ion-item>
			<ion-label stacked>Username</ion-label>
			<ion-input type="text"></ion-input>
		</ion-item>
		<ion-item>
			<ion-label stacked>Password</ion-label>
			<ion-input type="password"></ion-input>
		</ion-item>
	</ion-list>
	<button primary full (click)="signUp()">
		Sign Up
	</button>
	<button secondary full (click)="signIn()">
		Sign In
	</button>
</ion-content>

login.js:

import {Page, NavController} from 'ionic-angular';
import {SigninPage} from '../signin/signin';
import {SignupPage} from '../signup/signup';

@Page({
	templateUrl: 'app/login/login.html'
})
export class LoginPage {
	static get parameters(){
		return [[NavController]];
	}
	constructor(nav){
		this.nav = nav;
		this.data = null;
	}

	signUp(){
		this.nav.push(SignupPage);
	}

	signIn(){
		this.nav.push(SigninPage);
	}

}

login.scss:

.login {
  
}

And now, what it looks like when I use ionic serve.

Image

What did I do wrong or what’s wrong with my installation?

2

It looks like a css problem. Did you modify the css links in the index.html?

How could I go about recreating this?

3

app.js and app.html are the default stuff for a basic app, with the only difference being the line with “this.root” now being “this.root=LoginPage” instead of whatever is the usual.

this is what my index.html looks like:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>myApp</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="format-detection" content="telephone=no">
  <meta name="msapplication-tap-highlight" content="no">
  <!--
  Looking for a style sheet?
  Webpack loads styles as dependencies in your javascript
  See www/app/app.js as an example
  -->
  <link ios-href="build/css/app.ios.css" rel="stylesheet">
  <link md-href="build/css/app.md.css" rel="stylesheet">
  <link wp-href="build/css/app.wp.css" rel="stylesheet">
</head>
<body>

  <!-- this Ionic's root component and where the app will load -->
  <ion-app></ion-app>
  <script src="build/js/es6-shim.min.js"></script>
  <script src="build/js/Reflect.js"></script>
  <script src="build/js/app.bundle.js"></script>
  <script src="cordova.js"></script>
</body>
</html>
4

Hmm, do you have any sass out put from the build process?
Again, how could I go about trying to recreate this?
Walk me through the process

5

I literally just got the tabs example and made the changes you see here.

6

I have solved the issue. I’m not sure exactly what happened, but I ended up redoing most of it from the template and it worked.