CODEWITHSUNDEEP
javascriptangularfirefoxangular2-routingangular-router
TSlegaitis
TSlegaitis

Reputation: 1310

Angular 4 application rendering issue on Mobile Firefox

So I came accross this 'little' issue :)

I've an application written in Angular 4. Both Chrome and Firefox works perfectly on desktop. Chrome works fine on mobile too. Mobile firefox seems to be the problem.

It loads new pages at the top of another page (as seen in image below):

enter image description here

I can't seem to find a solution for this online too. Am I the only one that has this issue? And what could be causing this?

I assume this would have something to do with Angular Router perhaps?

These are the packages I'm using:

{
  "name": "stiqqs",
  "version": "1.0.0",
  "description": "",
  "license": "",
  "dependencies": {
    "@angular/animations": "^4.3.6",
    "@angular/common": "^4.1.0",
    "@angular/compiler": "^4.1.0",
    "@angular/core": "^4.1.0",
    "@angular/forms": "^4.1.0",
    "@angular/http": "^4.1.0",
    "@angular/platform-browser": "^4.1.0",
    "@angular/platform-browser-dynamic": "^4.1.0",
    "@angular/router": "^4.1.0",
    "@types/node": "^7.0.16",
    "angular2-notifications": "^0.7.3",
    "core-js": "*",
    "gulp": "github:gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
    "gulp-hub": "github:frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
    "hammerjs": "^2.0.8",
    "jasmine": "^2.6.0",
    "ng2-completer": "^1.4.0",
    "ng2-metadata": "^1.4.2-final",
    "ngx-modal": "0.0.29",
    "ngx-pagination": "^3.0.0",
    "rxjs": "^5.3.1",
    "time-ago-pipe": "^1.2.1",
    "tslint-loader": "^3.5.3",
    "typescript": "^2.3.2",
    "webpack": "^2.5.0",
    "zone.js": "^0.8.10"
  },
  "devDependencies": {
    "@types/es6-shim": "^0.31.32",
    "@types/jasmine": "^2.5.43",
    "@types/node": "^7.0.5",
    "autoprefixer": "^6.7.3",
    "babel-eslint": "^7.1.1",
    "babel-loader": "^6.3.2",
    "browser-sync": "^2.18.8",
    "browser-sync-spa": "^1.0.3",
    "compression-webpack-plugin": "^0.4.0",
    "css-loader": "^0.26.1",
    "del": "^2.2.2",
    "es6-shim": "^0.35.3",
    "eslint": "^3.15.0",
    "eslint-config-xo-space": "^0.15.0",
    "eslint-loader": "^1.6.1",
    "eslint-plugin-babel": "^4.0.1",
    "extract-text-webpack-plugin": "^2.0.0-rc.3",
    "gulp": "gulpjs/gulp#4ed9a4a3275559c73a396eff7e1fde3824951ebb",
    "gulp-filter": "^5.0.0",
    "gulp-hub": "frankwallis/gulp-hub#d461b9c700df9010d0a8694e4af1fb96d9f38bf4",
    "gulp-sass": "^3.1.0",
    "gulp-util": "^3.0.8",
    "html-loader": "^0.4.4",
    "html-webpack-plugin": "^2.28.0",
    "jasmine": "^2.5.3",
    "json-loader": "^0.5.4",
    "karma": "^1.7.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-coverage": "^1.1.1",
    "karma-jasmine": "^1.1.0",
    "karma-junit-reporter": "^1.2.0",
    "karma-webpack": "^2.0.2",
    "node-sass": "^4.5.0",
    "postcss-loader": "^1.3.1",
    "rimraf": "^2.5.1",
    "sass-loader": "^6.0.1",
    "style-loader": "^0.13.1",
    "ts-loader": "^2.0.0",
    "tslint": "^4.4.2",
    "tslint-loader": "^3.4.2",
    "typescript": "^2.1.0",
    "webpack": "^2.5.0",
    "webpack-deploy": "github:productboard/webpack-deploy",
    "webpack-fail-plugin": "^1.0.5"
  },
  "scripts": {
    "build": "rimraf dist && webpack --progress --profile --bail --config ./conf/webpack-dist.conf.js && cp -r ./src/css ./dist && cp -r ./src/img ./dist && mkdir -p ./dist/app/views && cp -r ./src/app/views/* ./dist/app/views/",
    "serve": "gulp serve watch",
    "serve:dist": "gulp serve:dist",
    "test": "gulp test",
    "test:auto": "gulp test:auto",
    "deploy": "webpack -p --config ./conf/webpack-dist.conf.js"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "browser": true,
      "jasmine": true
    },
    "parser": "babel-eslint",
    "extends": [
      "xo-space/esnext"
    ]
  },
  "repository": {}
}

Typescript config (tsconfig.json)

{
  "compilerOptions": {
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false,
    "typeRoots": ["node_modules/@types/"],
    "types": [
      "node",
      "jasmine",
      "es6-shim"
    ],
    "target": "es5"
  },
  "compileOnSave": false,
  "filesGlob": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "!node_modules/**"
  ]
}

Upvotes: 1

Views: 468

Answers (1)

Liviu Doloscan
Liviu Doloscan

Reputation: 66

for me this issue appear only when i want to access a page that have some errors in it, like this: 

ERROR TypeError: Cannot read property 'length' of undefined

Check your console for the errors, hope this will help!

Upvotes: 1

Related Questions