具有多个模块和 Sharepoint SPFX 的 Angular 5

Question

我正在使用 Angular 5 在 SPFX 解决方案中运行应用程序，但我的应用程序不会触发一些基本的角度事件，例如 onInit 甚至 @Input 集都不起作用。

唯一正常工作的模块和组件是启动 app.component 和 app.module 中的模块和组件。对于所有其他模块，仅触发构造函数，但不会触发所有其他 Angular 生命周期事件。

这是我的 app.webpart.ts：

export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloAngularWebPartProps> {
  constructor() {
    super();
  }
  ngElement: HTMLElement;

  public render(): void {
    window['webPartContext'] = this.context;

    this.domElement.innerHTML = `<app-root [isOnline]='false'></app-root>`;

    platformBrowserDynamic().bootstrapModuleFactory(
      AppModuleNgFactory, { ngZone: 'noop' })
      .catch(
        err => console.log('error', err)
      );
  }

还有我的 app.module

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    CoreModule,
    TrackersModule,
    LocalStorageModule.withConfig({
      prefix: 'my-app',
      storageType: 'localStorage',
    }),
    RouterModule.forRoot(ROUTES, { useHash: true, preloadingStrategy: PreloadAllModules })
  ],
  providers: [
    BackendRequestClass,
    {
      provide: APP_INITIALIZER, useFactory: (config: BackendRequestClass) => () => config.load(),
      deps: [BackendRequestClass], multi: true
    },
  ],
  bootstrap: [AppComponent]
})
export class AppModule {
  constructor() { }
}  

我猜这个问题与如何从 webpart 启动应用程序有关，所以我尝试使用 boostrapModule 而不是 bootstrapModuleFactory 启动应用程序。但我什至不确定这是从 app.module 加载所有模块的正确方法。

platformBrowserDynamic().bootstrapModule(AppModule, {
    ngZone: 'noop'
  }).catch(err => console.log(err));

但是当我运行它时，我得到了这个错误：

承诺拒绝：找不到“AppModule”的 NgModule 元数据。 ;区域：;任务：Promise.then；值：错误：找不到“AppModule”的 NgModule 元数据。

Answer 1

为了确保它不是 SharePoint 的本机 JS 干扰您的 Angular 应用程序，请在内容编辑器中运行您的 Angular 应用程序。您可以将 Angular 构建设置为具有保存构建文件的资产文件夹的部署 URL。然后将内容编辑器指向 index.html 文件位置。

如果应用程序在从内容编辑器中运行时显示类似问题，最好检查存在的 polyfill 以确保没有与 SharePoint 原生 JS 混淆。我知道 core-js/es6/string polyfills 在 SharePoint 中表现不佳。

第三个建议是在使用 Angular 时使用内容编辑器而不是 SPFx。 SPFx 框架还没有。

请参阅 SPJeffs 博客文章了解所有细节。 https://www.spjeff.com/2017/05/31/angular-cli-todo-list-in-sharepoint-content-editor/