Angular 14中如何从lib导入standalone组件？

第三方库提供的standalone组件使用方法 #

standalone组件的核心特性就是自带全部依赖元数据，不需要依附NgModule，不管组件是本地开发的还是第三方库提供的，使用逻辑一致：

• 首先按照普通TS导入的方式，直接从对应npm包的导出入口引入目标组件类即可，不需要额外导入任何关联NgModule，示例导入语句：import { LibSearchBarComponent } from 'third-party-ui-lib';
• 如果你的业务组件本身也是standalone类型，直接把引入的第三方组件类，写到当前业务组件@Component装饰器的imports数组里，就能直接在模板中使用，参考代码：

import { Component } from '@angular/core';
import { LibSearchBarComponent } from 'third-party-ui-lib';

@Component({
  selector: 'app-home',
  standalone: true,
  imports: [LibSearchBarComponent], // 直接放入导入的第三方standalone组件
  template: `
    <h1>首页</h1>
    <lib-search-bar></lib-search-bar>
  `
})
export class HomeComponent {}

• 如果你的项目还是传统NgModule架构，没有全面切换standalone写法，同样直接把引入的第三方standalone组件类，加到对应业务NgModule的imports数组中即可，不需要其他特殊配置，和以前导入第三方NgModule的使用体验一致。
• 如果第三方库同时提供了standalone版本的路由守卫、服务provider工具函数，直接在路由配置、bootstrapApplication启动逻辑中调用即可，不需要经过NgModule中转。

Angular对导入组件的来源识别逻辑 #

很多人会误以为Angular有专门识别npm包的逻辑，实际上完全不是：

• 依赖路径的解析是TypeScript和前端构建工具（Webpack、Vite、esbuild等）完成的，和Angular框架本身没有关系。你写的import xxx from '包名'语句，会由工具链解析到node_modules下对应包的入口文件，拿到导出的类引用。
• Angular编译器在编译阶段，只会读取你在装饰器（@NgModule、@Component等）里显式传入的类上挂载的元数据，根本不会校验这个类来自哪个npm包、哪个本地文件：
  • 对于传统非standalone组件，Angular会从你导入的NgModule的exports、declarations配置项里，查找当前模板允许使用的组件、指令、管道，这也是为什么以前用第三方非standalone组件必须先导入对应模块的原因
  • 对于standalone组件，组件类本身就挂载了完整的元数据（自身依赖、模板、样式等），不需要NgModule做中转，Angular拿到类引用就能直接解析使用。

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