angular-oauth2-oidc library can't load jsrsasign module

Question

I'm trying to upgrade a dependency in Angular for a project forked from : https://github.com/mgechev/angular-seed

The dependency is: https://github.com/manfredsteyer/angular-oauth2-oidc however I'm not quite sure how my System.JS files needs to look to properly load the jsrsasign dependency that oauth2-oidc relies on. At the moment, I have a project.config.ts that looks like:

   // Add packages
    let additionalPackages: ExtendPackages[] = [
      {
       name: 'angular-oauth2-oidc',
       // Path to the package's bundle
       path: 'node_modules/angular-oauth2-oidc/angular-oauth2-oidc.umd.js'
      },
      {
       name: 'jsrsasign',
       // Path to the package's bundle
       path: 'node_modules/jsrsasign/lib/jsrsasign.js'
      }
     ];

Loading my project results in an error like this:

    (SystemJS) Module not already loaded loading "jsrsasign" as http://localhost:5555/node_modules/jsrsasign/lib/jsrsasign.
        Error: Module not already loaded loading "jsrsasign" as http://localhost:5555/node_modules/jsrsasign/lib/jsrsasign.
  at Object.eval (http://localhost:5555/node_modules/angular-oauth2-oidc/angular-oauth2-oidc.umd.js:1862:10)

I've hunted the web high and low and can't seem to get my head around how to force this to load.

This documentation here: https://manfredsteyer.github.io/angular-oauth2-oidc/angular-oauth2-oidc/docs/additional-documentation/using-systemjs.html

Seems to suggest the answer, but I've tried adding this already to seed.config.ts without any joy.

Following taken directly from my seed.config.ts file:

Can anyone can explain how to properly configure this library specifically for System.JS / angular seed?

Answer 1

this appears to get better results (under packages).

   'angular-oauth2-oidc': {
        main: 'angular-oauth2-oidc.umd.js',
        format: 'cjs',
        defaultExtension: 'js',
        map: {
          'jsrsasign': '/node_modules/jsrsasign/lib/jsrsasign',
        },
        meta: {
            'angular-oauth2-oidc': {
                deps: ['require','jsrsasign']
            },
        }
  }

Answer 2

this is working for me in my project.config.ts file

    const additionalPackages: ExtendPackages[] = [
  {
    name: 'jsrsasign',
    path: 'node_modules/jsrsasign',
    packageMeta: {
      main: 'lib/jsrsasign.js',
      export: "jsrsasign"
    }
  },
  {
    name: 'angular-oauth2-oidc',
    path: 'node_modules/angular-oauth2-oidc',
    packageMeta: {
      main: 'angular-oauth2-oidc.umd.js',
      format: 'cjs',
      defaultExtension: 'js',
      meta: {
        'angular-oauth2-oidc': {
          deps: ['require', 'jsrsasign']
        },
      }
    }
  }
];

this.addPackagesBundles(additionalPackages);