compiling angular admin extension

[tlodge]

Hi,

I'd appreciate it if anyone could help me. I have pulled the latest version of vendure (1.7.1) and I am attempting to create and use a simple Angular admin api extension. I'm not overly familiar with Angular, but just want to get a basic example working.

I have followed the tutorial, and I have a ui-extensions directory at the same level as the packages directory:

<project root>
  docs
  e2e-common
  packages
  scripts
  ui-extensions

The ui-extensions directory has the greeter.component.ts and greeter.module.ts taken from: https://www.vendure.io/docs/plugins/extending-the-admin-ui/using-angular/

My dev-config.ts has the following entry:

AdminUiPlugin.init({
            route: 'admin',
            port: 5001,
            app: compileUiExtensions({
                outputPath: path.join(__dirname, '../admin-ui'),
                extensions: [{
                  extensionPath: path.join(__dirname, '../../ui-extensions'),
                  ngModules: [{
                    type: 'lazy',
                    route: 'greet',
                    ngModuleFileName: 'greeter.module.ts',
                    ngModuleName: 'GreeterModule',
                  }],
                }],
                devMode:true,
            })
        }),

Now when I do a

yarn start

in the dev-server directory I get the following:

...
error Command "ngcc" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[run:server] An error occurred when running ngcc. Try removing node_modules, re-installing, and then manually running "yarn ngcc" in the project root.
[run:server] info 04/09/22, 18:16 - [AdminUiPlugin] Admin UI compiling and watching for changes... 
[run:server] info 04/09/22, 18:16 - [NestApplication] Nest application successfully started 
[run:server] info 04/09/22, 18:16 - [Vendure Server] ================================================ 
[run:server] info 04/09/22, 18:16 - [Vendure Server] Vendure server (v1.7.1) now running on port 3000 
[run:server] info 04/09/22, 18:16 - [Vendure Server] ------------------------------------------------ 
[run:server] info 04/09/22, 18:16 - [Vendure Server] Shop API:     http://localhost:3000/shop-api 
[run:server] info 04/09/22, 18:16 - [Vendure Server] Admin API:    http://localhost:3000/admin-api 
[run:server] info 04/09/22, 18:16 - [Vendure Server] Asset server: http://localhost:3000/assets 
[run:server] info 04/09/22, 18:16 - [Vendure Server] Dev mailbox:  http://localhost:3000/mailbox 
[run:server] info 04/09/22, 18:16 - [Vendure Server] Admin UI:     http://localhost:3000/admin 
[run:server] info 04/09/22, 18:16 - [Vendure Server] ================================================ 
$ ng serve --port=4200 --base-href=/admin/
[run:server] /bin/sh: ng: command not found
error Command failed with exit code 127.

So then I have tried installing the Angular tooling (in the dev-sever directory):

yarn add @angular/[email protected] --dev
yarn add @angular-devkit/[email protected] --dev

And now I get:

error Command "ngcc" not found.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
[run:server] An error occurred when running ngcc. Try removing node_modules, re-installing, and then manually running "yarn ngcc" in the project root.
[run:server] info 04/09/22, 18:30 - [AdminUiPlugin] Admin UI compiling and watching for changes... 
[run:server] info 04/09/22, 18:30 - [NestApplication] Nest application successfully started 
[run:server] info 04/09/22, 18:30 - [Vendure Server] ================================================ 
[run:server] info 04/09/22, 18:30 - [Vendure Server] Vendure server (v1.7.1) now running on port 3000 
[run:server] info 04/09/22, 18:30 - [Vendure Server] ------------------------------------------------ 
[run:server] info 04/09/22, 18:30 - [Vendure Server] Shop API:     http://localhost:3000/shop-api 
[run:server] info 04/09/22, 18:30 - [Vendure Server] Admin API:    http://localhost:3000/admin-api 
[run:server] info 04/09/22, 18:30 - [Vendure Server] Asset server: http://localhost:3000/assets 
[run:server] info 04/09/22, 18:30 - [Vendure Server] Dev mailbox:  http://localhost:3000/mailbox 
[run:server] info 04/09/22, 18:30 - [Vendure Server] Admin UI:     http://localhost:3000/admin 
[run:server] info 04/09/22, 18:30 - [Vendure Server] ================================================ 
$ ng serve --port=4200 --base-href=/admin/
[run:server] An unhandled exception occurred: Cannot find module '@angular-devkit/build-angular/package.json'
[run:server] Require stack:
[run:server] - /home/tlodge/vendure/packages/dev-server/node_modules/@angular-devkit/architect/node/node-modules-architect-host.js
[run:server] - /home/tlodge/vendure/packages/dev-server/node_modules/@angular-devkit/architect/node/index.js
[run:server] -  /home/tlodge/vendure/packages/dev-server/node_modules/@angular/cli/models/architect-command.js
[run:server] -  /home/tlodge/vendure/packages/dev-server/node_modules/@angular/cli/commands/serve-impl.js
[run:server] -  /home/tlodge/vendure/packages/dev-server/node_modules/@angular-devkit/schematics/tools/export-ref.js
[run:server] -  /home/tlodge/vendure/packages/dev-server/node_modules/@angular-devkit/schematics/tools/index.js
[run:server] -  /home/tlodge/vendure/packages/dev-server/node_modules/@angular/cli/utilities/json-schema.js
[run:server] -  /home/tlodge/vendure/packages/dev-server/node_modules/@angular/cli/models/command-runner.js
[run:server] -  /home/tlodge/vendure/packages/dev-server/node_modules/@angular/cli/lib/cli/index.js
[run:server] -  /home/tlodge/vendure/packages/dev-server/node_modules/@angular/cli/lib/init.js
[run:server] -  /home/tlodge/vendure/packages/dev-server/node_modules/@angular/cli/bin/ng
See "/private/var/folders/y1/8fy42ngn1z73qz1tstby_8s80000gn/T/ng-z6e2XT/angular-errors.log" for further details.
error Command failed with exit code 127.

I have also tried installing the latest cli instead:

yarn add @angular/cli@latest --dev
yarn add @angular-devkit/build-angular --dev

but then I get:

[run:server] Node packages may not be installed. Try installing with 'yarn install'.
[run:server] Error: Could not find the '@angular-devkit/build-angular:dev-server' builder's node package.

I'm not sure what to try next and would really appreciate any help.

Many thanks.

[michaelbromley]

Hi,

Attempting to compile ui extensions in this monorepo will not work. The reason is due to the way Lerna uses symlinks for dependencies, and the ui-devkit makes certain assumptions about file paths that are not compatible with the layout of this repo.

Try creating a new project using npx @vendure/create and then follow the ui extension example in that new project.

[tlodge]

Ah. Ok that makes sense. Many thanks - I really appreciate the quick response.