CODEWITHSUNDEEP
angularwebpack
Nuno Pinto
Nuno Pinto

Reputation: 15

Multiple Anonymous Defines when importing module into systemjs.config.js

I am trying to import keycloak-js into systemjs.config.js in order to use the module in a word add-in by means of a wrapper (keycloak-angular) and i am getting this error.

error importing app: Error: (SystemJS) Multiple anonymous defines in module https://localhost:3000/node_modules/keycloak-js/dist/keycloak.js

These are the imports in systemjs.config.js

  'keycloak-js': 'npm:keycloak-js/dist/keycloak.js',
  'keycloak-angular': 'npm:keycloak-angular/esm2015/',
  'keycloak-angular/public_api': 'npm:keycloak-angular/esm2015/public_api.js'

and i also have keycloak-angular defined in 'packages' like so:

'keycloak-angular': { defaultExtension: 'js', main: 'keycloak-angular.js' }

I am initializing the service in app.module.ts like this:

providers: [
      KeycloakService,
      CommunicationService,
      SettingsStorageService,
      {
         provide: APP_INITIALIZER,
         useFactory: Initializer,
         multi: true,
         deps: [KeycloakService]
      }
 ]

I am pretty new to webpack and systemjs.config, so i don't really know what i'm dealing with here. I have searched quite a lot for solutions and the ones i found really didn't do much for the keycloak-js import problem.

Upvotes: 0

Views: 255

Answers (1)

Nuno Pinto
Nuno Pinto

Reputation: 15

Apparently, the import of keycloak-angular was incorrect and found this the hard way, by wasting over 60 hours on this.

'keycloak-angular': 'npm:keycloak-angular/bundles/keycloak-angular.umd.js'

This is how you should (apparently) import it and from there the errors are gone.

Upvotes: 0

Related Questions