使用Angular CLI Elements构建SPFX Web Part遇加载器错误求指导

一、初始化SPFx项目 #

• 确认Node.js版本为16.x LTS（SPFx v1.16官方要求版本）
• 执行初始化命令：

  yo @microsoft/sharepoint
  

  选择Web Part类型，框架选No JavaScript framework（后续手动集成Angular）

二、安装匹配版本依赖 #

在项目根目录执行以下命令，确保依赖版本完全匹配：

# 核心Angular包
npm install @angular/core@15 @angular/common@15 @angular/compiler@15 @angular/platform-browser@15 @angular/platform-browser-dynamic@15 @angular/elements@15 --save
# 开发工具包
npm install @angular/cli@15 @angular/compiler-cli@15 typescript@4.9 ts-loader@9.5 raw-loader css-loader style-loader --save-dev

三、配置Webpack加载器（解决loader缺失报错） #

SPFx v1.16基于Webpack 5，需手动添加Angular文件的加载规则：

1. 项目根目录创建webpack.extend.js文件：

   module.exports = {
     module: {
       rules: [
         {
           test: /\.ts$/,
           use: [
             {
               loader: 'ts-loader',
               options: {
                 configFile: 'tsconfig.angular.json'
               }
             }
           ],
           exclude: /node_modules/
         },
         {
           test: /\.html$/,
           use: 'raw-loader'
         },
         {
           test: /\.css$/,
           use: ['style-loader', 'css-loader']
         }
       ]
     },
     resolve: {
       extensions: ['.ts', '.js']
     }
   };
   

2. 修改gulpfile.js，合并自定义Webpack配置：
   在文件顶部引入配置：

   const webpackExtend = require('./webpack.extend.js');
   

   找到build.configureWebpack区块，替换为：

   build.configureWebpack.mergeConfig({
     additionalConfiguration: (generatedConfig) => {
       // 合并loader规则和解析配置
       generatedConfig.module.rules.push(...webpackExtend.module.rules);
       Object.assign(generatedConfig.resolve, webpackExtend.resolve);
       return generatedConfig;
     }
   });
   

四、配置TypeScript环境 #

1. 创建tsconfig.angular.json文件，专门给Angular编译用：

   {
     "compilerOptions": {
       "target": "ES2020",
       "module": "ESNext",
       "moduleResolution": "node",
       "lib": ["ES2020", "DOM"],
       "strict": true,
       "skipLibCheck": true,
       "esModuleInterop": true,
       "allowSyntheticDefaultImports": true,
       "experimentalDecorators": true,
       "emitDecoratorMetadata": true,
       "resolveJsonModule": true,
       "baseUrl": "./",
       "paths": {
         "@angular/*": ["node_modules/@angular/*"]
       }
     },
     "include": ["src/**/*.ts"],
     "exclude": ["node_modules"]
   }
   

2. 修改项目根目录tsconfig.json，确保开启装饰器支持：
   在compilerOptions中添加：

   "experimentalDecorators": true,
   "emitDecoratorMetadata": true
   

五、创建Angular组件并集成到SPFx #

1. 在WebPart目录（如src/webparts/myAngularWebPart）创建核心文件：
   • app.component.ts：

     import { Component } from '@angular/core';
     
     @Component({
       selector: 'angular-spfx-root',
       template: `<h2>Angular 15 集成 SPFx v1.16 成功</h2>`
     })
     export class AppComponent {}
     

   • app.module.ts：

     import { NgModule } from '@angular/core';
     import { BrowserModule } from '@angular/platform-browser';
     import { AppComponent } from './app.component';
     import { createCustomElement } from '@angular/elements';
     import { Injector } from '@angular/core';
     
     @NgModule({
       imports: [BrowserModule],
       declarations: [AppComponent],
       entryComponents: [AppComponent]
     })
     export class AppModule {
       constructor(private injector: Injector) {}
       ngDoBootstrap() {
         // 将Angular组件转为自定义元素
         const customEl = createCustomElement(AppComponent, { injector: this.injector });
         customElements.define('angular-spfx-root', customEl);
       }
     }
     

2. 修改WebPart主文件（如myAngularWebPart.ts）：

   import { AppModule } from './app.module';
   import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
   
   export default class MyAngularWebPart extends BaseClientSideWebPart<IMyAngularWebPartProps> {
     public render(): void {
       this.domElement.innerHTML = `<angular-spfx-root></angular-spfx-root>`;
       // 启动Angular模块
       platformBrowserDynamic().bootstrapModule(AppModule);
     }
   
     // 保留原有属性配置、描述等代码
   }
   

六、解决样式冲突问题 #

在WebPart的样式文件（如myAngularWebPart.module.scss）中添加隔离规则：

:host {
  display: block;
  all: initial;
  contain: content;
}

七、测试与排错 #

执行gulp serve启动项目，若仍报错，优先检查：

• 所有依赖版本是否严格匹配（Angular15必须对应TypeScript4.9、ts-loader9.5）
• Webpack配置是否正确合并到SPFx的默认配置中
• TypeScript的装饰器选项是否已开启

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