Improperly loading components? [SOLVED]

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:


<ion-navbar secondary *navbar>

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


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

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





.login {

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


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

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

How could I go about recreating this?

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">
  <meta charset="UTF-8">
  <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/" rel="stylesheet">
  <link wp-href="build/css/app.wp.css" rel="stylesheet">

  <!-- this Ionic's root component and where the app will load -->
  <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>

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

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

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.