Проблема с рендерингом приложений Angular 4 в Mobile Firefox

Итак, я наткнулся на эту «маленькую» проблему :)

У меня есть приложение, написанное на Angular 4. И Chrome, и Firefox отлично работают на рабочем столе. Chrome отлично работает и на мобильных устройствах. Мобильный Firefox, кажется, проблема.

Он загружает новые страницы вверху другой страницы (как показано на изображении ниже):

введите здесь описание изображения

Я тоже не могу найти решение для этого в Интернете. Я единственный, у кого есть эта проблема? И что может быть причиной этого?

Я предполагаю, что это как-то связано с Angular Router?

Это пакеты, которые я использую:

{
  "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": {}
}

Конфигурация машинописного текста (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/**"
  ]
}

person TSlegaitis    schedule 07.09.2017    source источник


Ответы (1)


для меня эта проблема появляется только тогда, когда я хочу получить доступ к странице, на которой есть некоторые ошибки, например:

ERROR TypeError: Cannot read property 'length' of undefined

Проверьте свою консоль на наличие ошибок, надеюсь, это поможет!

person Liviu Doloscan    schedule 08.09.2017