App from Socially tutorial with angular2 stuck in loading page on Android

help
1

I’m following the tutorial from meteor and angular 2 and when I reach the step 11 Running your app on Android or iOS with PhoneGap I can’t make it work on my android device.

This is the output I get from the console.

Error: Uncaught (in promise): Error: Error in ./AppComponent class AppComponent_Host - inline template:0:0 caused by: The selector "app" did not match any elements

This is what I have so far in my app.component.ts file:

import { Component } from '@angular/core';

import template from './app.component.html';

@Component({
  selector: 'app',
  template
})
export class AppComponent {}

The app works perfectly on the web browser. I think that can be a problem with the router, but I’m not quite sure.

This is the code from the app.routes.ts

import { Route } from '@angular/router';
import { Meteor } from 'meteor/meteor';

import { PartiesListComponent } from '../parties/parties-list.component';
import { PartyDetailsComponent } from '../parties/party-details.component';

export const routes: Route[] = [
  { path: '', component: PartiesListComponent },
  { path: 'party/:partyId', component: PartyDetailsComponent}
];

This is the index.html:

<head>
    <base href="/" />
</head>
<body>
    <app>Loading...</app>
</body>

And this is the app.component.html

    <div>
        <router-outlet></router-outlet>
    </div>

It is supossed to redirect to the PartiesListComponent but just throw that error and stucks on loading. Thank you.

2

SOLVED

This is the original code in the main.ts (Extracted from the website of the tutorial)

import 'angular2-meteor-polyfills';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './imports/app/app.module';

const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule);

I’ve just find that this tutorial is obsolete (again) and there’s a new way to bootstrap applications.

With the next code the app works fine on android.

import 'angular2-meteor-polyfills';

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { Meteor } from "meteor/meteor";
import { AppModule } from './imports/app/app.module';

enableProdMode();

Meteor.startup(() => {
   platformBrowserDynamic().bootstrapModule(AppModule);
});

I hope this help someone.

1 Like
3

Thank you Sergio! I was stuck on this some time. Got it working with your suggestion. :slight_smile:

Here are couple of Cordova errors I received in case others run into this issue too:

Error: The selector “app” did not match any elements
Error: No base href set. Please provide a value for the APP_BASE_HREF token or add a base element to the document.