Angular 5 with multiple modules and Sharepoint SPFX

Question

I'm using Angular 5 to run an application inside an SPFX solution but my application does not trigger some basic angular events like onInit or even the @Input set are not working.

The only module and components that are working properly are the ones from the launching app.component and app.module. For all the other module, only the constructor is triggered but all the other Angular Lifecycle events are not fired.

Here is my 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)
      );
  }

and my 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() { }
}

I guess that the issue is related to how the application is launched from the webpart so I have tried to launch the application using the boostrapModule instead of the bootstrapModuleFactory. But I'm not even sure that this is the proper way to go to load all my modules from the app.module.

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

But when I run this, I get this Error:

Promise rejection: No NgModule metadata found for 'AppModule'. ; Zone: ; Task: Promise.then ; Value: Error: No NgModule metadata found for 'AppModule'.

Ryan McGuirk Ryan McGuirk · Accepted Answer · 2019-05-03T18:06:40

To be sure its not SharePoint's native JS interfering with your angular app run your Angular App inside a content editor. You can set the angular build to have the deploy url of the asset folder you keep the build files in. Then you point the content editor to the the index.html files location.

If the application is showing similar issues when running from within the content editor it may be best to check the polyfills present to ensure there are not messing with SharePoint native JS. I know that core-js/es6/string polyfills doesnt play nice in SharePoint.

Third recommendation is to use Content Editors over SPFx when using Angular. The SPFx framework just isnt there yet.

See SPJeffs blog post for all the nitty gritty details. https://www.spjeff.com/2017/05/31/angular-cli-todo-list-in-sharepoint-content-editor/

Angular 5 with multiple modules and Sharepoint SPFX

1 Answers