Add public.api.ts

[andrei4ik1997]

Please add public.api.ts file to the root of the library in which all functions will be exported. This is needed for the new ESBuild builder on Angular.
Builder does not accept paths with slashes(for example highcharts/highmaps)

[kirill-borisyonok]

I have the same problem
@TorsteinHonsi help us

[karolkolodziej]

Hi @andrei4ik1997!

I've created a fresh project with Angular 17 and I've followed this documentation.

I added Highcharts to my app.component.ts like:

import Highcharts from 'highcharts/es-modules/masters/highcharts.src.js';

and my angular.json looks like this:

        "build": {
          "builder": "@angular-devkit/build-angular:application",
          "options": {
            "outputPath": "dist/angular-17-issue",
            "index": "src/index.html",
            "browser": "src/main.ts",
            "polyfills": [
              "zone.js"
            ],
            "tsConfig": "tsconfig.app.json",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          ...

With this config, I'm not able to recreate it:

🎲 >ng build

Initial Chunk Files   | Names         |  Raw Size | Estimated Transfer Size
main-MWKZVL6Z.js      | main          | 429.44 kB |               130.21 kB
polyfills-RX4V3J3S.js | polyfills     |  33.01 kB |                10.68 kB
styles-5INURTSO.css   | styles        |   0 bytes |                 0 bytes

                      | Initial Total | 462.45 kB |               140.88 kB

Application bundle generation complete. [3.404 seconds]

Could you please walk me through where the issue is and how I can recreate it?

[kirill-borisyonok]

I am using native federation in my application.
https://www.npmjs.com/package/@angular-architects/native-federation

we also use polyfil es-module-shims. https://www.npmjs.com/package/es-module-shims

err SyntaxError: The requested module 'blob:http://localhost:4250/f575146f-c973-4ac0-9f2e-25f94c855e4a' does not provide an export named 'default' (at highcharts-wrapper.component.ts:19:1)

1. import {NgIf} from '@angular/common';
2. import {
3. ChangeDetectionStrategy,
4. Component,
5. DestroyRef,
6. EventEmitter,
7. Input,
8. OnChanges,
9. OnDestroy,
10. OnInit,
11. Output,
12. booleanAttribute,
13. inject,
14. } from '@angular/core';
15. import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
16. import {LoaderComponent} from '@components-estdgt/loader';
17. import {LoaderMiniComponent} from '@components-estdgt/loader-mini';
18. import Highcharts from 'highcharts';
19. import gantt from 'highcharts/es-modules/masters/modules/gantt.src';
20. import merge from 'lodash-es/merge';
21. import {fromEvent} from 'rxjs';
22. import {debounceTime, filter} from 'rxjs/operators';
23. import {getHighchartsDefaultConfig} from './entities/highchart-styles.constants';
24. import {HighchartsWrapper} from './entities/highcharts-wrapper.namespace';

[karolkolodziej]

I'm not familiar with these packages but it looks like they complain about the named export.
You can only find it in the masters/ directory.

Have you tried importing it like this:

import gantt from 'highcharts/es-modules/masters/highcharts-gantt.src.js;

With that, you don' have to import highcharts.

[kirill-borisyonok]

I tried all import options, but none of them work.
always throws an error "does not provide an export named 'default'".

[karolkolodziej]

It's strange because each one from masters/ has it- see.

@bre1470 any idea?

[kirill-borisyonok]

@andrei4ik1997 wrote a good solution.
#20616 (comment)

[karolkolodziej]

I've tested that with the new Angular builder and it works fine.
@andrei4ik1997 Could you please tell me what your setup looks like? Do you also use the native-federation?

[bre1470]

@karolkolodziej It might be a conflict with the declarations based on the JSDoc doclets. Declarations do not include the default export, because this is not part of the classic masters with global namespace.

[andrei4ik1997]

@karolkolodziej Yes, I also use native-federation and angular-highcharts(https://www.npmjs.com/package/angular-highcharts). I'll create a test application later to test this problem

[kirill-borisyonok]

https://stackblitz.com/edit/stackblitz-starters-aptkaf?file=README.md
an example of the highcharts problem is located in the projects/mfe1/src/app/app.component.ts (app.component.) folder

you can also see the project here:
https://github.com/kirill-borisyonok/highcharts-issue

@karolkolodziej check, please

[andrei4ik1997]

https://stackblitz.com/edit/stackblitz-starters-aptkaf?file=README.md an example of the highcharts problem is located in the projects/mfe1/src/app/app.component.ts (app.component.) folder

you can also see the project here: https://github.com/kirill-borisyonok/highcharts-issue

@karolkolodziej check, please

@kirill-borisyonok Thanks for reproducing the error.
@karolkolodziej @bre1470 I have a similar situation.

I also managed to find a solution from @omishyn ( https://github.com/omishyn/om-angular-highcharts/tree/main ). He copies modules to the external layer using nf-copy.js . But I think this is a dirty solution. Maybe there is a better solution?
Maybe create index.ts/public.api.ts files will solve the problem?

[bre1470]

I did some investigation into mentioned project setups, and I noticed Highcharts imports that are not quite right. As mentioned earlier in this discussion:

• The main product bundles have to be imported as namespace import * as Highcharts from...,

• While modules are imported with their default import Data from... or import { default as Data } from....

• Also only one product bundle should be imported, while the other products should be imported as modules.

The latter can be seen in the npm package angular-highcharts. Maybe try the official npm package highcharts-angular; or does the official package have to contain the requested public.api.ts to make it work?

[kirill-borisyonok]

bre1470

what do you mean by "Also only one product bundle should be imported, while the other products should be imported as modules."
Can you give an example?

[bre1470]

@kirill-borisyonok These import statements might become problematic. See this documentation example for mixing products.

[andrei4ik1997]

@bre1470 I'll try this solution and come back with feedback. Thank you very much

[andrei4ik1997]

@bre1470 @karolkolodziej Hi, after investgate and many attempts, I came to the conclusion that the Angular Esbuilder swears at import via / .
import Highcharts from 'highcharts'; It runs fine because the root folder contains a file with the same name as the library (highcharts.ts) and we don’t have to use the highcharts/highcharts import.
But as soon as I start using import Highcharts from 'highcharts/highcharts' (although this is the same as import Highcharts from 'highcharts') the builder starts not understanding this import path and throws an error
Therefore, I ask you to add the file to the root of the library public-api.ts or index.ts which exports all modules and charts from itself. So that we could use an import like import Highstock from 'highcharts;

P.s. Using the official wrapper (https://www.npmjs.com/package/highcharts-angular) doesn't solve the problem

index.ts examle
export * from './highcharts' export * from './highcharts-3d' export * from './highcharts-gantt' export * from './highcharts-more' export * from './highmaps' export * from './highstock' export * from './modules'

[bre1470]

@andrei4ik1997
Thank you for the detailed explanation.

@karolkolodziej Looks like this is something for the highcharts-angular wrapper to deal with.

[andrei4ik1997]

@karolkolodziej @bre1470 We'll be looking forward to the release )

[karolkolodziej]

@andrei4ik1997

Could you please describe it once again in the highcharts-angular repo
We can continue the discussion there.

[andrei4ik1997]

highcharts/highcharts-angular#374

[kirill-borisyonok]

@karolkolodziej maybe something has changed on this issue?