Angular 6升级至14后编译成功但浏览器无法正常加载求助

问题现象 #

• 编译无错误，但本地服务器启动后仅显示少量div和组件，多数内容无法渲染
• 控制台输出两类错误：
  1. WebSocket连接失败：

     WebSocket connection to 'ws://lms.localhost/ng-cli-ws' failed: 
     [webpack-dev-server] Disconnected!
     [webpack-dev-server] Trying to reconnect...
     

  2. 大量来自main.js、polyfill.js的未定义属性读取错误（示例如下），因代码混淆无法直接定位具体逻辑：

     main.js:1 TypeError: Cannot read properties of undefined (reading 'show')
         at template (main.js:1:2358105)
         at Eg (main.js:1:4163057)
         at pd (main.js:1:4161822)
         at lb (main.js:1:4168843)
         at K1 (main.js:1:4162698)
         at pd (main.js:1:4162709)
         at Uu (main.js:1:4169505)
         at Q1.detectChanges (main.js:1:4172019)
         at c.tick (main.js:1:4231256)
         at c._loadComponent (main.js:1:4231564)
     

• 额外观察：部分组件构造函数已调用，但ngOnInit()生命周期方法未执行

根源定位与解决 #

问题核心是Bootstrap 4到5的破坏性变更未被正确处理。解决步骤：

• 先将Bootstrap版本回退至4
• 遵循Bootstrap官方迁移指南，分步完成从4到5的升级工作

内容的提问来源于stack exchange，提问作者Jintal Roy