I'm trying to learn Angular and followed the example described here. It works fine into my desktop (macOS 10.13.3 / Safari 11.0.3; Chrome 64.0).
However, when I access it through an iphone (ios 11.2.5 / Chrome 64.0) -- I started it using ng serve --host 0.0.0.0 --, the page does not render completely.
I modified the example and added two headers, as follows. As you can see into the image, BOF and EOF are rendered, but the div inside it aren't.
Searching, I found that I should enable polyfills. I followed examples from here. I also modified main.ts
and included import './polyfills.ts';
So my question is how do I configure angular to display content on both platforms (desktop/mobile)?
EDIT
Seems that the problem is related with the service that populates the cars
variable. My component looks like:
export class CarListComponent implements OnInit { cars: Array<any>; constructor(private carService: CarService) { } ngOnInit() { this.carService.getAll().subscribe(data => { this.cars = data; }); }}
If, instead calling the service, I manually populate the array, the list is properly rendered...
export const TEMP: any[] = [ { name: 'Car 1' }, { name: 'Car 2' }, { name: 'Car 3' }];
And then
ngOnInit() { this.cars = TEMP; }
The code will work on IOS Safari/Chorme. The problem is not with the service, because if I use console.log(data)
, it shows that it is filled with valid information. I think the problem is related to Observable...
<h2>BOF</h2><div *ngFor="let car of cars"> {{car.name}}</div><h2>EOF</h2>
Image may be NSFW.
Clik here to view.
Versions:
Angular CLI: 1.6.7Node: 8.9.4OS: darwin x64Angular: 5.2.4... animations, common, compiler, compiler-cli, core, forms... http, language-service, platform-browser... platform-browser-dynamic, router@angular/cdk: 5.2.1@angular/cli: 1.6.7@angular/flex-layout: 2.0.0-beta.12@angular/material: 5.2.1@angular-devkit/build-optimizer: 0.0.42@angular-devkit/core: 0.0.29@angular-devkit/schematics: 0.0.52@ngtools/json-schema: 1.1.0@ngtools/webpack: 1.9.7@schematics/angular: 0.1.17typescript: 2.5.3webpack: 3.10.0