Error importing .mjs in Angular (Typescript)

[pherrmann]

Hi Ceci!

I was looking at what it would take to migrate from 2.x to 3.0. In a simple Angular 9 app, I'm getting compile errors trying to import these new modules. I don't think Typescript likes these .mjs files. I can get past the errors by directly importing the .js file in the package dist directory.

ps - Did you remove the generated api docs? Links here go to broken pages. https://salte-auth.github.io/

Description

In a simple Angular 9 app, import { Redirect } from '@salte-auth/redirect'; yields the following error

ERROR in ./node_modules/@salte-auth/redirect/dist/redirect.mjs 40:19-24
Can't import the named export 'Utils' from non EcmaScript module (only default export is available)

No compile errors with an import like this:
import { Redirect } from '@salte-auth/redirect/dist/redirect.js';

Expected outcome

No compile errors starting angular app

Actual outcome

[cecilia-sanare]

Hey Phil!

First off, thanks for taking the time to try it out!

Angular 2+

I'll try to look into the Angular 9 issue tonight.
I'm guessing you're using angular-cli for your compilation process?

Documentation

Regarding the documentation, I don't seem to be having issues accessing it via that URL. 🤔
I don't imagine this is the issue, but did you try accessing it off VPN?

[pherrmann]

Based on my initial review, I think the removal of queryParams will require me to create a custom provider to pass a custom query param to my wso2 provider. The migration guide could potentially be enhanced by highlighting what public methods and properties were removed from SalteAuth and the config options. There you could note what the migration path is for those specific items.

Angular

Yes, you should be able to recreate by using the angular cli to create their initial "hello world" app ng new my-app. In the generated AppComponent, import the Salte-Auth packages, initialize SalteAuth with a provider, handler like the migration guide. Doesn't seem to matter whether you do that in the Component's constructor or in a random const outside the class.

Documentation

Regarding the docs, I do get to the main page above. I'm referring to the links down the right of the page. Those go to a "file not found" page. Previously, you could browse the api docs to see what was publicly available on SalteAuth, the config options, etc.

[cecilia-sanare]

So I looked into this a little bit and it looks like nested imports aren't resolving the way I'd expect.

e.g.

When you import @salte-auth/salte-auth it resolves to module.

salte-auth/package.json

Line 5 in a8caf5b

"module": "dist/salte-auth.min.mjs",

However, when you import @salte-auth/redirect and it imports @salte-auth/salte-auth for some reason webpack resolves to main.

salte-auth/package.json

Line 4 in a8caf5b

"main": "dist/salte-auth.min.js",

Still looking to see if there's anything I can add to the package.json or in the angular.json file to hint at webpack regarding how it should be resolving this.

[cecilia-sanare]

queryParams

Instead of creating a custom provider, you can also use the Generic Providers and use @salte-auth/wso2 as an example.

I'll also look into readding the ability to provide extra parameters to any of the providers. (#411)

salte-auth/demo/index.ts

Lines 10 to 26 in a8caf5b

	new Generic.OpenID({
	login(): string {
	return 'https://salte-os.auth0.com/authorize';
	},
	logout(): string {
	return this.url('https://salte-os.auth0.com/v2/logout', {
	client_id: this.config.clientID,
	returnTo: this.config.redirectUrl,
	});
	},
	clientID: '9JTBXBREtckkFHTxTNBceewrnn7NeDd0',
	responseType: 'id_token',
	routes: true,
	}),

Documentation (#412)

Good catch, didn't even notice that!

Not sure why considering the files exist within the repository.

https://github.com/salte-auth/salte-auth.github.io/blob/master/modules/_base_core_events_.html

[cecilia-sanare]

I think I've found a solution that will work without you making any changes to your configuration.

Basically, if I add a browser property in the package.json file then angular-cli will resolve the compiled file via that property instead of using module or `main.

This means that it will resolve the .js file instead of the .mjs file.

I'll have to update every package, unfortunately, I'll let you know when I'm done!

[cecilia-sanare]

@pherrmann Sorry it took so long, had a couple of issues I needed to resolve with the automated release process.

Can you try it out now with the latest versions of @salte-auth/salte-auth, @salte-auth/wso2, and @salte-auth/redirect?

[pherrmann]

@cecilia-sanare yes, the latest update is importing the *.min.js now and I'm no longer getting those import errors.