Angular多入口自定义库组件样式未生效及模块懒加载疑问

一、为什么custom-b组件样式仅在使用<custom-b>标签时生效 #

Angular组件样式的加载逻辑和组件实例化强绑定：

1. 组件样式封装机制：Angular默认启用ViewEncapsulation.Emulated（组件级样式封装），组件的SCSS样式会被处理成带唯一属性选择器的规则，只有当组件被实例化（即模板中出现<custom-b>标签）时，这些样式才会被注入到页面的全局样式表中。
2. 自定义库打包逻辑：用Angular CLI构建的自定义库，组件样式默认与组件代码绑定，不会提前打包为全局样式。只有当组件被应用实际使用（实例化）时，对应的样式才会被加载并生效。

如果需要让样式在未使用组件时也生效，可参考以下方案（需权衡副作用）：

• 将组件样式迁移至应用的全局样式文件（如styles.scss）
• 在custom-b.component.ts中设置encapsulation: ViewEncapsulation.None，取消组件样式封装（会导致样式全局生效，易引发样式冲突）
• 修改库的构建配置，将组件样式提取为独立的全局样式包（需调整angular.json中的styles配置项）

二、未使用路由时，Angular模块是否默认开启懒加载？ #

不会。Angular模块默认采用立即加载（Eager Loading）：

• 只要你在AppModule或其他被立即加载的模块中导入了某个模块，该模块的代码会被打包进主应用bundle，在应用启动时就会被加载和初始化。
• 懒加载（Lazy Loading）仅能通过路由配置中的loadChildren语法触发，与是否使用路由本身无关——即便配置了路由，不使用loadChildren的模块依然会被立即加载。

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