search

manfredsteyer / module-federation-with-angular-dynamic

Dynamic Module Federation with Angular
123 stars 68 forks source link

Very useful article and project! #4

Open KirillVol opened 3 years ago

KirillVol commented 3 years ago

But if you update dev dependencies to latest - you get a error in shell project:

./projects/shell/src/menu-utils.ts:1:0-73 - Error: Module not found: Error: Can't resolve '@angular-architects/module-federation'

Error linked with only one package - "@angular-devkit/build-angular" version "0.1100.0" - all fine 0.1101.2, 0.1101.3, 0.1101.4 - generate indicated error.

BR, Kirill

hennihaus commented 3 years ago

I have this error too. Here is my error, app-routing.module.ts and package.json.

Error: ./projects/shell/src/app/app-routing.module.ts:3:0-73 - Error: Module not found: Error: Can't resolve '@angular-architects/module-federation' in '/home/hennihaus/angular/module-federations/projects/shell/src/app'

package.json

{
  "name": "module-federations",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },
  "private": true,
  "resolutions": {
    "webpack": "^5.0.0"
  },
  "dependencies": {
    "@angular-architects/module-federation": "1.2.3",
    "@angular/animations": "~11.2.7",
    "@angular/common": "~11.2.7",
    "@angular/compiler": "~11.2.7",
    "@angular/core": "~11.2.7",
    "@angular/forms": "~11.2.7",
    "@angular/platform-browser": "~11.2.7",
    "@angular/platform-browser-dynamic": "~11.2.7",
    "@angular/router": "~11.2.7",
    "rxjs": "~6.6.0",
    "tslib": "^2.0.0",
    "zone.js": "~0.11.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~0.1102.8",
    "@angular/cli": "~11.2.6",
    "@angular/compiler-cli": "~11.2.7",
    "@types/jasmine": "~3.6.0",
    "@types/node": "^12.11.1",
    "codelyzer": "^6.0.0",
    "jasmine-core": "~3.6.0",
    "jasmine-spec-reporter": "~5.0.0",
    "karma": "~6.1.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.0.3",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "^1.5.0",
    "protractor": "~7.0.0",
    "ts-node": "~8.3.0",
    "tslint": "~6.1.0",
    "typescript": "~4.1.5"
  }
}

app-routing.module.ts import {NgModule} from '@angular/core'; import {RouterModule, Routes} from '@angular/router'; import {HomeComponent} from './home/home.component'; import {loadRemoteModule} from '@angular-architects/module-federation';

const routes: Routes = [ { path: '', component: HomeComponent, pathMatch: 'full' }, // { // path: 'mfe1', // loadChildren: () => import('mfe1/Module').then(m => m.CoreModule) // }, // { // path: 'mfe2', // loadChildren: () => import('mfe2/Module').then(m => m.CoreModule) // }, // { // path: 'mfe3', // loadChildren: () => import('mfe3/Module').then(m => m.CoreModule) // } { path: 'mfe1', loadChildren: () => loadRemoteModule({ remoteEntry: 'http:localhost:3001/remoteEntry.js', remoteName: 'mfe1', exposedModule: './Module' }) .then(m => m.CoreModule) }, { path: 'mfe2', loadChildren: () => loadRemoteModule({ remoteEntry: 'http:localhost:3002/remoteEntry.js', remoteName: 'mfe2', exposedModule: './Module' }) .then(m => m.CoreModule) }, { path: 'mfe3', loadChildren: () => loadRemoteModule({ remoteEntry: 'http:localhost:3003/remoteEntry.js', remoteName: 'mfe3', exposedModule: './Module' }) .then(m => m.CoreModule) } ];

@NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

If someone needs more information, just ask for it.

BR Henni

KirillVol commented 3 years ago

Pls try: @.***/build-angular": "0.1100.0"

On 11 Apr 2021, at 11:39, hennihaus @.***> wrote:

I have this issue too. Here is my error, app-routing.module.ts and package.json.

Error: ./projects/shell/src/app/app-routing.module.ts:3:0-73 - Error: Module not found: Error: Can't resolve @.***/module-federation' in '/home/hennihaus/angular/module-federations/projects/shell/src/app'

package.json

{ "name": "module-federations", "version": "0.0.0", "scripts": { "ng": "ng", "start": "ng serve", "build": "ng build", "test": "ng test", "lint": "ng lint", "e2e": "ng e2e" }, "private": true, "resolutions": { "webpack": "^5.0.0" }, "dependencies": { @./module-federation": "1.2.3", @./animations": "~11.2.7", @./common": "~11.2.7", @./compiler": "~11.2.7", @./core": "~11.2.7", @./forms": "~11.2.7", @./platform-browser": "~11.2.7", @./platform-browser-dynamic": "~11.2.7", @./router": "~11.2.7", "rxjs": "~6.6.0", "tslib": "^2.0.0", "zone.js": "~0.11.3" }, "devDependencies": { @./build-angular": "~0.1102.8", @./cli": "~11.2.6", @./compiler-cli": "~11.2.7", @./jasmine": "~3.6.0", @./node": "^12.11.1", "codelyzer": "^6.0.0", "jasmine-core": "~3.6.0", "jasmine-spec-reporter": "~5.0.0", "karma": "~6.1.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.0.3", "karma-jasmine": "~4.0.0", "karma-jasmine-html-reporter": "^1.5.0", "protractor": "~7.0.0", "ts-node": "~8.3.0", "tslint": "~6.1.0", "typescript": "~4.1.5" } } app-routing.module.ts import {NgModule} from @./core'; import {RouterModule, Routes} from @./router'; import {HomeComponent} from './home/home.component'; import {loadRemoteModule} from @.***/module-federation';

const routes: Routes = [ { path: '', component: HomeComponent, pathMatch: 'full' }, // { // path: 'mfe1', // loadChildren: () => import('mfe1/Module').then(m => m.CoreModule) // }, // { // path: 'mfe2', // loadChildren: () => import('mfe2/Module').then(m => m.CoreModule) // }, // { // path: 'mfe3', // loadChildren: () => import('mfe3/Module').then(m => m.CoreModule) // } { path: 'mfe1', loadChildren: () => loadRemoteModule({ remoteEntry: 'http:localhost:3001/remoteEntry.js', remoteName: 'mfe1', exposedModule: './Module' }) .then(m => m.CoreModule) }, { path: 'mfe2', loadChildren: () => loadRemoteModule({ remoteEntry: 'http:localhost:3002/remoteEntry.js', remoteName: 'mfe2', exposedModule: './Module' }) .then(m => m.CoreModule) }, { path: 'mfe3', loadChildren: () => loadRemoteModule({ remoteEntry: 'http:localhost:3003/remoteEntry.js', remoteName: 'mfe3', exposedModule: './Module' }) .then(m => m.CoreModule) } ];

@NgModule https://github.com/NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

If someone needs more information, just ask for it.

BR Henni

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/manfredsteyer/module-federation-with-angular-dynamic/issues/4#issuecomment-817271533, or unsubscribe https://github.com/notifications/unsubscribe-auth/AFIKDI2XIEIOM6YZDKX6HBTTIFN53ANCNFSM4XGANR5Q.