vendure: Admin Ui: Angular error when compiling AdminUiPlugin

Compiling the AdminUiPlugin works with devMode since 1.0.0-beta.3 again, but now the compiled admin-ui throws an error in the Angular code when opening the admin page in browser: TypeError: e.factory is not a function

To Reproduce

Start vendure server with AdminUiPlugin.init({ ... app: compileUiExtensions({ ... }) )
Open admin page in Browser
main.ts:16 TypeError: e.factory is not a function – page doesn’t load

Empty extensions: [] or parameters, including devMode, don’t seem to make a difference.

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 15 (15 by maintainers)

Commits related to this issue

fix(ui-devkit): Fix Angular compiler compatibility issue Relates to #758. Updated and pinned all Angular dependencies to match between admin-ui & ui-devkit. — committed to vendure-ecommerce/vendure by michaelbromley 3 years ago
chore: Add automated check of Angular compiler versions Relates to #758. Prevents future updates to the Angular versions from introducing version mismatch errors — committed to vendure-ecommerce/vendure by michaelbromley 3 years ago

Most upvoted comments

OK I think I have the reason right here: https://github.com/angular/angular/issues/41193#issuecomment-797554210

Packages must be compiled and ran using the exact same version of Angular; any other combination is not supported and likely to break in subtle ways.

So the @vendure/admin-ui/.. packages have been compiled with the compiler v11.2.4, but now you are trying to use those compiled files with compiler v11.2.5.

The solution is that I need to pin the dependencies of the ui-devkit package to exact patch versions which match those used by the admin-ui package. Currently they are listed as: https://github.com/vendure-ecommerce/vendure/blob/7cc7222f8241ddc5a2401faaed269a4a6f09f564/packages/ui-devkit/package.json#L39-L41

michaelbromley on Mar 15, 2021

What’s the long term solution for this?

I’ve implemented an automated check to ensure that Angular compiler versions match between the admin-ui & ui-devkit packages. This should prevent such errors being re-introduced in future.

michaelbromley on Mar 15, 2021

Great, thanks.

Initially I could not reproduce the error. My angular deps looked like:

$ yarn list --pattern "@angular/*"
yarn list v1.19.1
├─ @angular/animations@11.2.4
├─ @angular/cdk@11.2.3
├─ @angular/cli@11.2.3
├─ @angular/common@11.2.4
├─ @angular/compiler-cli@11.2.4
├─ @angular/compiler@11.2.4
├─ @angular/core@11.2.4
├─ @angular/forms@11.2.4
├─ @angular/language-service@11.2.4
├─ @angular/platform-browser-dynamic@11.2.4
├─ @angular/platform-browser@11.2.4
└─ @angular/router@11.2.4

Then I deleted the lockfile and reinstalled, so my Angular deps were the same as your list. Now I get the error.

The specific packages changed are:

@angular/cli@11.2.3   -> 11.2.4
@angular/compiler-cli@11.2.4   -> 11.2.5
@angular/compiler@11.2.4  -> 11.2.5

So a work-around for now would be to use yarn resolutions to pin those 3 Angular packages to the previous version.

michaelbromley on Mar 15, 2021