Angular 1.7与Bootstrap 3 Shift区块链浏览器导航渲染异常求助

架构老林

2026-11-13

项目背景

我目前正在维护ShiftNrg的一款老旧区块链浏览器，后续团队将整体迁移到全新的区块链平台，在迁移完成前需要持续支持这套从原团队继承的旧代码库。今年初我独立完成了该浏览器的部署托管工作，仅对代码做了最小程度的重构，使其能够在Docker容器中正常运行，此前服务一直稳定运行，直到上周末重新构建Docker镜像后出现异常。

问题描述

我为行情模块新增了用于更新代币价格的API调用，重新构建Docker镜像后发现导航组件不再正常渲染——我并未改动导航相关的代码，甚至将代码回退到2020年2月最后一次稳定提交的版本，导航项依然无法正常渲染。

现象对比

可正常显示导航项的测试站点地址：https://testnet.explorer.shiftnrg.io/
存在导航项缺失问题的线上生产站点地址：https://explorer.shiftnrg.io/
原正常导航效果截图地址：https://i.sstatic.net/sK9uF.png
导航项缺失的异常效果截图地址：https://i.sstatic.net/5xSxk.png

导航组件代码

<div class="navbar navbar-default navbar-fixed-top" role='navigation'>
    <nav class="main-header">
        <div class="container fadein">
            <div id="header" role="navigation" class="navbar navbar-default">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-ng-click="$root.isCollapsed = !$root.isCollapsed">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <a class="navbar-brand" href="/">
                        <div class="logo" title="Shift"></div>
                    </a>
                    <span class="nethash text-center" ng-if="showNethash(blockStatus.nethash | nethash)">{{blockStatus.nethash | nethash}}</span>
                </div>
                <div class="navbar-collapse" data-ng-class="{collapse: $root.isCollapsed}">
                    <search class="navbar-form navbar-left hidden-xs"/>
                    <ul class="nav navbar-nav navbar-right">
                        <currency-selector/>
                        <li class="dropdown" data-uib-dropdown>
                            <a href id="main-menu-dropdown" class="dropdown-toggle tools-menu" data-uib-dropdown-toggle
                               data-aria-haspopup="true" role="button" data-aria-expanded="false">Tools <span
                                    class="caret"></span></a>
                            <ul class="dropdown-menu" role="menu" data-aria-labelledby="main-menu-dropdown">
                                <li>
                                    <a href="/topAccounts" class="top-accounts">Top Accounts</a>
                                </li>
                                <li>
                                    <a href="/activityGraph" class="activity-graph">Activity Graph</a>
                                </li>
                                <li>
                                    <a href="/delegateMonitor" class="delegate-monitor">Delegate Monitor</a>
                                </li>
                                <li data-ng-if="$root.marketWatcher">
                                    <a href="/marketWatcher" class="market-watcher">Market Watcher</a>
                                </li>
                                <li>
                                    <a href="/networkMonitor" class="network-monitor">Network Monitor</a>
                                </li>
                                <li>
                                    <a href="https://wallet.shiftnrg.org/" target="_blank">Wallet Login</a>
                                </li>
                            </ul>
                        </li>

                    </ul>
                </div>

            </div>
        </div>
    </nav>
    <nav class="network-status hidden-xs">
        <div class="container fadein" data-ng-show="blockStatus">
            <div class="row text-left">
                <span class="height col-md-3 col-sm-6">Height: {{blockStatus.height | number:0}}</span>
                <span class="supply col-md-3 col-sm-6">Supply: {{blockStatus.supply | shift | number:0}}</span>
                <span class="shift-btc col-md-3 col-sm-6">SHIFT/BTC: {{currency.tickers.SHIFT.BTC || 'N/A'}}</span>
                <span class="shift-usd col-md-3 col-sm-6">SHIFT/{{currency.tickers.SHIFT[currency.symbol] && currency.symbol !== 'BTC' ? currency.symbol : 'USD'}}: {{currency.tickers.SHIFT[currency.symbol] && currency.symbol !== 'BTC' ? (currency.tickers.SHIFT[currency.symbol] | number:4) : (currency.tickers.SHIFT.USD | number:4) || 'N/A'}}</span>
            </div>
        </div>
    </nav>
</div>

初步排查进展

经过试错验证，我发现ul.nav.navbar-nav.navbar-right容器下仅第一个子组件可以正常渲染，其余组件均无显示。最困扰的是我并未修改package.json文件，也没有改动这些组件的渲染逻辑代码，回退到2020年可正常运行的历史代码也无法解决问题。
我初步怀疑是npm install/yarn执行依赖安装时自动升级了依赖版本导致的异常，但尚未确认；如果确实是依赖自动升级导致的问题，是我没有合理使用package-lock.json文件做版本锁定的疏漏。我并非Angular或Bootstrap的技术专家，希望能够获得可行的修复建议，优先采用补丁式修复方案，避免对整套系统进行大版本重写——毕竟这套浏览器仅需再支撑约12个月就会正式下线退役。

项目package.json配置

{
  "name": "shift-explorer-prototype",
  "version": "1.5.0",
  "description": "prototyped versioni of the Shift Explorer",
  "main": "index.js",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "scripts": {
    "watch": "webpack --watch",
    "start": "webpack --watch & webpack-dev-server --open-page 'webpack-dev-server'",
    "build:dev": "webpack --env=dev --progress --color",
    "build:prd": "webpack --env=prd --progress --color",
    "eslint": "eslint ./benchmarks ./utils ./lib ./api ./src ./test ./features ./tasks ./*.js ./*.json"
  },
  "dependencies": {
    "amstock3": "^3.21.15",
    "angular": "^1.7.9",
    "angular-advanced-searchbox": "^3.0.1",
    "angular-animate": "^1.7.9",
    "angular-gettext": "^2.4.1",
    "angular-naturalsort": "git+https://github.com/isabello/angular-naturalsort.git",
    "angular-qrcode": "^7.2.0",
    "angular-resource": "^1.7.9",
    "angular-ui-bootstrap": "^2.5.6",
    "angular-ui-router": "^1.0.25",
    "async": "^2.6.0",
    "babel-plugin-syntax-dynamic-import": "^6.18.0",
    "benchmark": "^2.1.4",
    "bootstrap": "^3.3.7",
    "bufferutil": "^4.0.1",
    "clipboard": "^2.0.4",
    "ejs": "^3.0.1",
    "express": "^4.17.1",
    "fast-safe-stringify": "^2.0.7",
    "flatstr": "^1.0.12",
    "font-awesome": "^4.7.0",
    "hiredis": "^0.5.0",
    "imports-loader": "^0.8.0",
    "jquery": "^3.5.1",
    "leaflet": "^1.3.1",
    "leaflet.markercluster": "^1.4.1",
    "method-override": "^3.0.0",
    "moment": "^2.24.0",
    "morgan": "^1.9.1",
    "ngprogress": "^1.1.3",
    "popper.js": "^1.16.1",
    "qrcode-generator": "^1.4.4",
    "redis": "^3.0.2",
    "request": "^2.88.2",
    "sigma": "1.2.1",
    "socket.io": "^2.3.0",
    "socket.io-client": "^2.3.0",
    "split": "^1.0.1",
    "underscore": "^1.9.2",
    "utf-8-validate": "^5.0.2"
  },
  "devDependencies": {
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-angularjs-annotate": "^0.10.0",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "babel-preset-env": "^1.7.0",
    "chai": "^4.2.0",
    "chai-as-promised": "^7.1.1",
    "clean-webpack-plugin": "^3.0.0",
    "copy-webpack-plugin": "^5.1.1",
    "css-loader": "^3.4.2",
    "cucumber": "^6.0.5",
    "eslint": "^6.8.0",
    "eslint-config-airbnb-base": "^14.0.0",
    "eslint-loader": "^3.0.3",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-json": "^2.1.0",
    "file-loader": "^5.1.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "image-webpack-loader": "^6.0.0",
    "mocha": "^7.1.0",
    "popsicle": "^12.0.5",
    "style-loader": "^1.1.3",
    "supertest": "^4.0.2",
    "svg-inline-loader": "^0.8.2",
    "terser-webpack-plugin": "^2.3.5",
    "webpack": "^4.41.6",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  },
  "resolutions": {
    "braces": "^2.3.1"
  }

内容的提问来源于stack exchange，提问作者Matt Swezey