Cant build extension

👨‍💻 Development Help
1

I have cloned default ext and then updated all the naming to the new modules.

But when I try and build it I get the error shown below and I cant see in the terminal any other errors. I cant build the defaultExt but my own wont.

yarn run build-dev:extension contactsExt

Error: node_modules/apollo-angular/query-ref.d.ts:21:58 - error TS2314: Generic type ‘UpdateQueryOptions’ requires 2 type argument(s).

21 updateQuery(mapFn: (previousQueryResult: T, options: UpdateQueryOptions) => T): void;

The issue only starts when I add the code

// console.log(“sidebar widget register”);
// sidebarWidgetRegistry.register(
// “default”,
// “create-contact-note-container”,
// CreateContactNoteComponent
// );
// console.log(“loaded”);

This register component is the issue but its what is shown in the docs

2

I think the cause is hte maybe the imports? I see in teh docs I should be able import directly from core but my IDE says thats the correct path. With 8.8 what is the correct path for importing the sidebar registry.

3

I see in the root tsconfig that core is defined but my extension cant access it
Its looking for the dist folder but I dont have one. what step did I miss?

4

This may help on adding a simple sidebar widget.

5

I cant even build core so I think thats the first issue. Out of the box install cant build with no changes.

6

Please check this. I think there different approaches depending upon the version.
This is for 8.8. Can you please let here know the version you are trying to build.

7

I cante even get het first step to run

ng g app --projectRoot=extensions//app --routing=false --style=scss

I just get Error: Unknown argument: projectRoot

is there even a step before this?

8
9

I think it is --project-root , not --projectRoot. Can you please try this

ng g app myExt --project-root=extensions/my-ext/app --routing=false --style=scss

10

Ah ok go that to run. I just want to confirm do you create an exstension for each module you want to extend/overide?

so does accounts get one and contacts get one. Or do I put them all in one exstension?

11

We can put all our extension work in an extension folder. There is no rule that each module should have a separate extension folder. This is like having a logical grouping of work that you want to build and deploy. If we want to stop or remove we can just delete the package folder of the extension work.

12

I have followed every step of that article you pasted.

  1. There is no common project so what is it trying to build?
  2. When I try build core I keep getting the error
    yarn run build-dev:core
    Building Angular Package

Building entry point ‘core’

:heavy_multiplication_x: Compiling with Angular sources in Ivy full compilation mode.
node_modules/apollo-angular/query-ref.d.ts:21:58 - error TS2314: Generic type ‘UpdateQueryOptions’ requires 2 type argument(s).

21 updateQuery(mapFn: (previousQueryResult: T, options: UpdateQueryOptions) => T): void;

13

The above example works with 8.7.
Is your version 8.8? I will try with 8.8 and share the steps. Thanks

14

so I had to add “skipLibCheck”: true to the ts config to get the core to build on 8.8 this is a step in teh right direction so I can now access the dist/core

15

@rossrawlins Awesome. We would like you to report your steps/solution here. It will help others on the future.

16

Its not the end of the build/start problem there now seems to be a build issue with the shell.

ModuleFederationPlugin - TypeError: The ‘compilation’ argument must be an instance of Compilation

I used angular alot and I have never gotten soo many issues. Is there something I am missing on this step?

17

Make sure it’s compatible with your Webpack version.

npm list webpack

1 Like
18

webpack@5.94.0

are you saying I need to use that file on git hub?

19

I tried that config you linked and its hte same issue persisting.

20

FINALLY got it to work

yarn add @angular-architects/module-federation@19.0.3 webpack@5.95.0

thank you guys

1 Like