Sergio Vilchis Sergio Vilchis - 1 month ago 10
Android Question

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

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.

Answer

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.

Comments