Question

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

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

这是我的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应用程序。您可以将角度构建设置为保留构建文件所在资产文件夹的部署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/

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

1 个答案: