javascript - Mobile Firefox 上的 Angular 4 应用程序呈现问题

Question

所以我遇到了这个“小”问题:)

我有一个用 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": {}
}

typescript 配置(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/**"
  ]
}

Answer 1

对我来说，只有当我想访问一个有错误的页面时才会出现这个问题，如下所示:

ERROR TypeError: Cannot read property 'length' of undefined

检查您的控制台是否有错误，希望这对您有所帮助!