Angular 应用 bootstrapModule 映射的 app Component 的初始化逻辑

简介: Angular 应用 bootstrapModule 映射的 app Component 的初始化逻辑

main.js 里指定的 AppModule 作为 bootstrap module:


image.png


该 module 包含的 bootstrap Component 为 AppComponent:


image.pngimage.png


如果遇到 SAP Spartacus 白屏问题,首先检查这个 Component 的几个 hook 是否正常工作:

image.pngimage.png


记住这些关键点,以后好调试:

image.png


可以看到,在 OnInit 执行内部,app-root 下面的 cx-storefront 就已经能看到了。


image.png


而在我的白屏 case 里,只能看到:

image.png

在 bootstrap 方法第一行设置断点:


image.png

此时 app-root 节点下面的子节点尚未生成。设置一个断点:


image.png

最后发现,是 componentFactory.create 方法里,触发的 dom 节点的生成以及视图的绘制工作:

image.png

相关文章
|
9天前
|
Java Android开发
Rockchip系列之CAN APP测试应用实现(4)
Rockchip系列之CAN APP测试应用实现(4)
19 1
|
5天前
|
搜索推荐 前端开发 JavaScript
【专栏】从网页到应用:简易教程教你如何在线生成 App
【4月更文挑战第27天】本文介绍了将网页转换为移动应用的在线生成App过程,包括原理(封装网页内容,添加移动特性)、优势(便捷高效,节省成本,快速上线)以及具体步骤(选择工具,准备内容,配置选项,生成测试,发布推广)。同时,注意版权、兼容性和用户体验问题。通过案例分析和实践经验分享,帮助读者深入了解如何通过在线工具实现App梦想,强调了网页优化、用户界面设计和个性化定制的重要性。
|
5天前
|
开发框架 前端开发 Android开发
专刊:从网页到应用:探索在线生成 App 的技术方法
【4月更文挑战第27天】在数字化时代,移动App变得不可或缺,而在线生成App的技术正逐渐兴起,为开发者提供快捷创建移动应用的途径。本文探讨了网页到App的转变过程,介绍了WebView嵌入、混合式开发框架和云端打包技术等方法,以及在线生成App的步骤、优势和挑战。虽然存在性能和功能限制,但随着技术进步,未来在线生成App将有更多可能性,为移动应用开发带来便利。
|
1天前
|
缓存 移动开发 前端开发
【专栏:HTML与CSS前端技术趋势篇】HTML与CSS在PWA(Progressive Web Apps)中的应用
【4月更文挑战第30天】PWA(Progressive Web Apps)结合现代Web技术,提供接近原生应用的体验。HTML在PWA中构建页面结构和内容,响应式设计、语义化标签、Manifest文件和离线页面的创建都离不开HTML。CSS则用于定制主题样式、实现动画效果、响应式布局和管理字体图标。两者协同工作,保证PWA在不同设备和网络环境下的快速、可靠和一致性体验。随着前端技术进步,HTML与CSS在PWA中的应用将更广泛。
|
2天前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript在Angular开发中的应用
【4月更文挑战第30天】本文探讨了TypeScript在Angular开发中的应用。Angular与TypeScript的结合利用了静态类型检查和ECMAScript特性,简化了大型Web应用的开发。文章涵盖组件、数据绑定、依赖注入、服务、守卫和路由以及模块化等方面,展示了如何在Angular中有效使用TypeScript。此外,还提到了TypeScript的高级应用,如泛型、高级类型和装饰器。掌握这些知识将有助于提升Angular应用的可维护性和可扩展性。
|
2天前
|
前端开发 Android开发 开发者
【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
【4月更文挑战第30天】本文探讨了使用Flutter开发混合应用的方法。混合应用结合Web技术和原生容器,提供快速开发和低成本维护。Flutter,一款现代前端框架,以其插件系统和高性能渲染引擎支持混合应用开发。通过创建Flutter项目、添加平台代码、使用WebView、处理平台间通信以及发布应用,开发者可构建跨平台混合应用。虽然混合应用有性能和用户体验的局限,但Flutter的跨平台兼容性和丰富的插件生态降低了开发成本。开发者应根据项目需求权衡选择。
【Flutter前端技术开发专栏】Flutter中的混合应用(Hybrid Apps)开发
|
15天前
tauri-app生成应用的图标
tauri-app生成应用的图标
8 0
|
Android开发 API 移动开发
uni-app自定义返回逻辑教程
自 HBuilderX v1.1.0 起,uni-app 的页面新增 onBackPress(event) 生命周期函数。 onBackPress(event) 返回 event ={form: backbutton | navigateBack} 说明 当用户进行以下操作时,会触发该函数: A...
7582 0
|
24天前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
2月前
|
API 数据安全/隐私保护 iOS开发
利用uni-app 开发的iOS app 发布到App Store全流程
利用uni-app 开发的iOS app 发布到App Store全流程
95 3

热门文章

最新文章