1

When I run my app in mi device android, is not working appear blank page, but if I run in a browser is working.

This is my package.json:

   {
      "name": "entradas-app",
      "version": "0.0.0",
      "scripts": {
        "ng": "ng",
        "start": "ng serve",
        "build": "ng build",
        "test": "ng test",
        "lint": "ng lint",
        "e2e": "ng e2e",
        "cordova": "ng build --base-href . --output-path cordova/www",
        "cordova-run": "npm run cordova && cd cordova && cordova run android"
      },
      "private": true,
      "dependencies": {
        "@angular/animations": "13.1.0",
        "@angular/cdk": "github:angular/cdk-builds",
        "@angular/common": "~13.1.0",
        "@angular/compiler": "~13.1.0",
        "@angular/core": "~13.1.0",
        "@angular/flex-layout": "^13.0.0-beta.36",
        "@angular/forms": "~13.1.0",
        "@angular/material": "^11.2.13",
        "@angular/platform-browser": "~13.1.0",
        "@angular/platform-browser-dynamic": "~13.1.0",
        "@angular/router": "~13.1.0",
        "bootstrap": "^5.1.3",
        "cordova": "^10.0.0",
        "hammerjs": "^2.0.8",
        "jquery": "^3.6.0",
        "popper.js": "^1.16.1",
        "rxjs": "~7.4.0",
        "tslib": "^1.10.0",
        "zone.js": "~0.11.4"
      },
      "devDependencies": {
        "@angular-devkit/build-angular": "~13.1.0",
        "@angular/cli": "~13.1.0",
        "@angular/compiler-cli": "~13.1.0",
        "@angular/language-service": "~13.1.0",
        "@types/node": "~8.9.4",
        "@types/jasmine": "~3.3.8",
        "@types/jasminewd2": "~2.0.3",
        "codelyzer": "^5.0.0",
        "jasmine-core": "~3.4.0",
        "jasmine-spec-reporter": "~4.2.1",
        "karma": "~6.3.9",
        "karma-chrome-launcher": "~2.2.0",
        "karma-coverage-istanbul-reporter": "~2.0.1",
        "karma-jasmine": "~2.0.1",
        "karma-jasmine-html-reporter": "^1.4.0",
        "protractor": "~7.0.0",
        "ts-node": "~7.0.0",
        "tslint": "~5.15.0",
        "typescript": "~4.5.3"
      }
    }

I am only using app.component.html with this:

<mat-toolbar color="primary">
  <span>TicketPro</span>
</mat-toolbar>
<div class="main-div">
<mat-card class="example-card">
  <mat-card-header>
    <div mat-card-avatar class="example-header-image"></div>
    <mat-card-title>Back&Stage</mat-card-title>
    <mat-card-subtitle>Fiesta facultad de medicina</mat-card-subtitle>
  </mat-card-header>
  <img mat-card-image src="https://material.angular.io/assets/img/examples/shiba2.jpg" alt="Photo of a Shiba Inu">
  <mat-card-content>
    <p>
      The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.
      A small, agile dog that copes very well with mountainous terrain, the Shiba Inu was originally
      bred for hunting.
    </p>
  </mat-card-content>
  <mat-card-actions>
    <button mat-button>LIKE</button>
    <button mat-button>SHARE</button>
  </mat-card-actions>
</mat-card>

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

And app.module.ts with this:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {MatToolbarModule} from '@angular/material/toolbar';
import {MatIconModule} from '@angular/material/icon';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {FormsModule, ReactiveFormsModule} from '@angular/forms';
import {MatNativeDateModule} from '@angular/material/core';
import {HttpClientModule} from '@angular/common/http';
import {MatSlideToggleModule} from '@angular/material/slide-toggle';
import {MatCardModule} from '@angular/material/card';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    MatToolbarModule,
    MatIconModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MatNativeDateModule,
    HttpClientModule,
    MatSlideToggleModule,
    MatCardModule
    
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Why when I run with "cordova-run": "npm run cordova && cd cordova && cordova run browser" it works but if I use "cordova-run": "npm run cordova && cd cordova && cordova run android" in real device is not working is showing blank page.

if I put the console

Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "". Strict MIME type checking is enforced for module scripts per HTML spec. runtime.js:1

polyfills.js:1

main.js:1 

I tried to put the target to "target": "es5", and "target": "es2015", and not work.

Mahdi Zarei
  • 5,644
  • 7
  • 24
  • 54

0 Answers0