Easy quick start with existing web page?


#1

I followed the docs to get a working demo app (blank) and now I want to replace the page content with an existing web page I’ve already built.

So I found src/app/app.component.ts, which looks like this:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } from '@ionic-native/status-bar';
import { SplashScreen } from '@ionic-native/splash-screen';

import { HomePage } from '../pages/home/home';
@Component({
  templateUrl: 'sk8border/index.html'
})
export class MyApp {
  rootPage:any = HomePage;

  constructor(platform: Platform, statusBar: StatusBar, splashScreen: SplashScreen) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      statusBar.styleDefault();
      splashScreen.hide();
    });
  }
}

I naively tried replacing:

templateUrl: 'app.html'

with:

templateUrl: 'mypage/index.html'

and of course this didn’t work and I got a page of error messages telling me I need to do some ionic-angular specific stuff in that web page.

Is there any relatively simple way to just use my web page content here? I’m looking for the quickest, easiest solution, not necessarily the “best” solution. I realize most of this angular boilerplate probably isn’t needed but I’m fine with whatever as long as my app works! :slight_smile:


#2

So you don’t want to use any Ionic directives? How will you handle navigation, etc.?

Why use Ionic? Do you want to build a Hybrid Mobile App? Or a PWA?


#3

I just want to embed a web game so it can be placed on app stores etc. At the moment, there’s no navigation to speak of (everything happens inside the game), although I guess I could add some at some navigation at some point in the future. I’m using Ionic because it was easy for me to build a Cordova app with it! :slight_smile:


#4

Ok, so maybe have a look at the Ionic Conference App: https://github.com/ionic-team/ionic-conference-app

It uses the InAppBrowser: https://github.com/ionic-team/ionic-conference-app/blob/master/src/pages/speaker-list/speaker-list.ts


#5

Hmm… ok to clarify, I want to pack the web files into the binary, not navigate to a remote URL. Does the in app browser work for local files as well?

Also thanks! :slight_smile:


#6

Yes -> use the InAppBrowser: https://github.com/ionic-team/ionic-conference-app/blob/master/src/pages/speaker-list/speaker-list.ts

to access your ‘web page content’ (hosted externally), for example: https://firebase.google.com/docs/hosting/

npm run build --prod
firebase deploy