akveo / nebular

:boom: Customizable Angular UI Library based on Eva Design System :new_moon_with_face::sparkles:Dark Mode
https://akveo.github.io/nebular
MIT License
8.06k stars 1.51k forks source link

Microfrontend problem : does not provide an export named 'icons' (at _nebular_eva_icons-13_0_0-dev.js:24:10) #3253

Open Jmadih opened 6 months ago

Jmadih commented 6 months ago

Issue type

I'm submitting a ... (check one with "x")

Issue description

Current behavior:

I've created a new Angular 17 project and followed the documentation at https://akveo.github.io/nebular/docs/guides/install-nebular#using-angular-cli. Everything works until I add the microfrontend dependency. However, my purpose is to transform my project into a microfrontend by adding the schematics for @angular-architects/native-federation as follows:

ng add @angular-architects/native-federation --project mfcontact --port 7400 --type remote

I encounter this error:

main.ts:6 SyntaxError: The requested module 'blob:http://localhost:7400/fe4fb83c-cc99-47cd-8321-e5321ba42557' does not provide an export named 'icons' (at nebular-eva-icons.mjs:5:10) Expected behavior:

Steps to reproduce:

1) Create new project: ng new mfcontact

2) Install nebular manually (Angular 17 problem)

npm install --save @nebular/theme @angular/cdk @angular/animations npm install --save eva-icons @nebular/eva-icons

And configure the module-less app for nebular injection :

const provideNebular = (): EnvironmentProviders[] => [ importProvidersFrom(NbThemeModule.forRoot({ name: 'default' })), importProvidersFrom(NbEvaIconsModule), importProvidersFrom(NbCardModule), importProvidersFrom(NbLayoutModule), importProvidersFrom(NbActionsModule), importProvidersFrom(NbMenuModule.forRoot()), ] export const appConfig: ApplicationConfig = { providers: [provideRouter(routes), provideNebular()] };

Edit the angular.json to add the css:

"styles": [ "src/styles.scss", "node_modules/@nebular/theme/styles/prebuilt/default.css" ],

Everything works fine until this step.

3) Install the schematics for native federation :

ng add @angular-architects/native-federation --project mfcontact --port 7400 --type remote

You will get my error.

Thank you for your help, i like nebular and i wish continue working on it for my MF architecture.

Related code: Here is my code:

https://github.com/Jmadih/mfcontact

Other information:

npm, node, OS, Browser

Angular CLI: 17.3.6
Node: 20.9.0
Package Manager: npm 10.1.0
OS: darwin arm64

Angular: 17.3.7
... animations, cdk, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1703.6
@angular-devkit/build-angular   17.3.6
@angular-devkit/core            17.3.6
@angular-devkit/schematics      17.3.6
@angular/cli                    17.3.6
@schematics/angular             17.3.6
rxjs                            7.8.1
typescript                      5.3.3
zone.js                         0.14.5

OS: MAC Sonoma 14.0
Browser: Chrome

Angular, Nebular Package.json

ericaugusto-git commented 1 month ago

Same problem here :(