0

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'.

clepere
  • 34
  • 4

1 Answers1

0

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/

Ryan McGuirk
  • 23
  • 5
  • Thanks for your response, The error is coming from SPFX not integrating correctly Angular solution. We used the Angular Elements approach but we are facing some other issues as soon as we try to add multiple components to the Angular Elements as it seems it's not designed to be used like this... – clepere May 13 '19 at 10:01
  • I have no experience with Angular Elements in particular but if you are able to tease out a solution to your problem I would be interested to hear how you figured it out. Best of luck. – Ryan McGuirk May 13 '19 at 14:08
  • I found a way to make it work using Angular Elements thanks to Andrew's article: http://www.andrewconnell.com/blog/howto-angular-elements-in-sharepoint-framework-projects-two-projects?utm_source=accom&utm_medium=blog&utm_campaign=Using%20Angular%20Elements%20in%20SharePoint%20Framework%20Projects%20Series Still facing some issues but I managed to deploy a test component from my main application into SPFX, if you are interested I am putting my WIP into a git repo. – clepere May 15 '19 at 08:10
  • I am interested. Please link it when you can. – Ryan McGuirk May 15 '19 at 12:36
  • https://github.com/clementlepere/SPFX-AngularElements I am still struggling to get some data displayed, for the moment the code is quite ugly as it is a POC The command line must be used from the cmd instead of using the npm run ones to work (I don't know why) and you have to change the encoding file in the ngElementWorld.js if you face some parsing issue while running the gulp serve command. – clepere May 15 '19 at 13:31