Desarrollando con angular en openbsd

2025/01/15

TL;DR: si un proyecto utiliza rollup en OpenBSD, hacer:

$ jq '. + {overrides: {"rollup": "npm:@rollup/wasm-node"}}' \
    package.json > package.tmp.json && mv package.tmp.json package.json
$ npm update

A continuación los pasos para desarrollar aplicaciones angular en OpenBSD

1. Instalar paquete de node:

$ doas pkg_add -Dsnap node

Aquí se utiliza -Dsnap porque se está en -current.

2. Configurar npm

Según el manual de npm (man npm), el directorio donde se instalan los paquetes de forma global:

global mode: npm installs packages into the install prefix at $npm_config_prefix/lib/node_modules and bins to $npm_config_prefix/bin

En OpenBSD, el valor por defecto de la configuración prefix es:

$ npm config get prefix
/usr/local

Por supuesto no es un directorio donde un usuario normal deba tener permisos de escritura, por lo cual al tratar de instalar un paquete se obtiene un error.

Por ejemplo, intentando instalar el paquete @angular se obtiene el error:

npm error code EACCES
npm error syscall mkdir
npm error path /usr/local/lib/node_modules/@angular
npm error errno -13
npm error Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/@angular'
npm error     at async mkdir (node:internal/fs/promises:857:10)
npm error     at async /usr/local/lib/node_modules/@npmcli/arborist/lib/arborist/reify.js:624:20
npm error     at async Promise.allSettled (index 0)
npm error     at async [reifyPackages] (/usr/local/lib/node_modules/@npmcli/arborist/lib/arborist/reify.js:325:11)
npm error     at async Arborist.reify (/usr/local/lib/node_modules/@npmcli/arborist/lib/arborist/reify.js:142:5)
npm error     at async Install.exec (/usr/local/lib/node_modules/npm/lib/commands/install.js:150:5)
npm error     at async Npm.exec (/usr/local/lib/node_modules/npm/lib/npm.js:207:9)
npm error     at async module.exports (/usr/local/lib/node_modules/npm/lib/cli/entry.js:74:5) {
npm error   errno: -13,
npm error   code: 'EACCES',
npm error   syscall: 'mkdir',
npm error   path: '/usr/local/lib/node_modules/@angular'
npm error }
npm error
npm error The operation was rejected by your operating system.
npm error It is likely you do not have the permissions to access this file as the current user
npm error
npm error If you believe this might be a permissions issue, please double-check the
npm error permissions of the file and its containing directories, or try running
npm error the command again as root/Administrator.

Para evitar lo anterior se configura para el usuario el valor path a ~/.npm:

$ npm config set prefix='~/.npm'

De esta forma se instalarán allí los paquetes globales.

Para tener disponibles los comandos en $npm_config_prefix/bin agregar a la variable PATH en ~/.profile:

[ -d ~/.npm/bin] && export PATH="$PATH":~/.npm/bin

3. Instalar cliente angular

Siguiendo los pasos indicados en el tutorial de instalación de angular:

$ npm install -g @angular/cli

4. Crear aplicación angular

Se utiliza el comando ng para crear una nueva aplicación angular.

Aquí hay dos opciones:

  1. Utilizar ng new e ir contestando las preguntas que van surgiendo.
  2. Interiorizarse con las opciones del comando ng new (ng new --help) y agregar los parámetros necesarios para que no se realicen preguntas.

Iremos por la opción 2.:

$ ng new --minimal --routing --skip-tests --ssr=false --style=css demo

4. Configuración de overrides

Para ejecutar el proyecto de prueba:

$ cd demo
$ npm start

pero siguiendo los pasos anteriores se tiene el error:

> demo@0.0.0 start
> ng serve

An unhandled exception occurred: Your current platform "openbsd" and architecture "x64" combination is not yet supported by the native Rollup build. Please use the WASM build "@rollup/wasm-node" instead.

The following platform-architecture combinations are supported:
android-arm
android-arm64
darwin-arm64
darwin-x64
freebsd-arm64
freebsd-x64
linux-arm
linux-arm (musl)
linux-arm64
linux-arm64 (musl)
linux-ppc64
linux-riscv64
linux-s390x
linux-x64
linux-x64 (musl)
win32-arm64
win32-ia32
win32-x64

If this is important to you, please consider supporting Rollup to make a native build for your platform and architecture available.
See "/tmp/ng-0A2IvR/angular-errors.log" for further details.

Como bien se explica en la salida anterior, no existe una versión nativa de rollup, por lo que debe utilizarse @rollup/wasm-node en su lugar.

Para ello se agrega la sección overrides en el archivo package.json para indicar que deseamos utilizar @rollup/wasm-node en lugar de rollup. Ya que no existe un comando de npm que nos permita agregarla directamente se utiliza el comando jq (el cual puede instalarse mediante doas pkg_add -Dsnap jq si aún no está en el sistema):

$ jq '. + {overrides: {"rollup": "npm:@rollup/wasm-node"}}' \
    package.json > package.tmp.json && mv package.tmp.json package.json

Paso seguido se actualizan las dependencias:

$ npm update

Para verificar que la configuracion de overrides funcionó correctamente:

$ npm ls rollup
demo@0.0.0 /home/jmpc/workspace/playground/angular/demo
└─┬ @angular-devkit/build-angular@19.0.7
  └─┬ @angular/build@19.0.7
    ├── rollup@npm:@rollup/wasm-node@4.30.1 overridden
    └─┬ vite@5.4.11
      └── rollup@npm:@rollup/wasm-node@4.30.1 deduped

o

$ jq .name node_modules/rollup/package.json
"@rollup/wasm-node"

5. Ejecutar el proyecto localmente

Ahora, si, el proyecto ya puede utilizarse mediante

$ npm start

> demo@0.0.0 start
> ng serve

Initial chunk files | Names         | Raw size
polyfills.js        | polyfills     | 90.20 kB |
main.js             | main          |  1.63 kB |
styles.css          | styles        | 95 bytes |

                    | Initial total | 91.92 kB

Application bundle generation complete. [3.448 seconds]

▲ [WARNING] Unable to initialize JavaScript cache storage. [plugin angular-compiler]

  No native build was found for platform=openbsd arch=x64 runtime=node abi=127 uv=1 libc=glibc node=22.12.0
  This will not affect the build output content but may result in slower builds.


Watch mode enabled. Watching for file changes...
NOTE: Raw file sizes do not reflect development server per-request transformations.
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help

Luego para construir la aplicación angular:

$ npm run build

> demo@0.0.0 build
> ng build

Initial chunk files   | Names         |  Raw size | Estimated transfer size
main-U73MHXF4.js      | main          | 183.32 kB |                49.68 kB
polyfills-FFHMD2TL.js | polyfills     |  34.52 kB |                11.28 kB
styles-5INURTSO.css   | styles        |   0 bytes |                 0 bytes

                      | Initial total | 217.84 kB |                60.96 kB

Application bundle generation complete. [9.440 seconds]

▲ [WARNING] Unable to initialize JavaScript cache storage. [plugin angular-compiler]

  No native build was found for platform=openbsd arch=x64 runtime=node abi=127 uv=1 libc=glibc node=22.12.0
  This will not affect the build output content but may result in slower builds.


Output location: /home/jmpc/workspace/playground/angular/demo/dist/demo

Apéndice - vue

Para desarrollar aplicaciones vue deben seguirse pasos similares, ya que se también se utiliza rollup como dependencia de vite.

Los pasos para crear una aplicación vue son los siguientes:

$ npm create vue@latest

> npx
> create-vue


Vue.js - The Progressive JavaScript Framework

✔ Project name: … demo
✔ Add TypeScript? … No / Yes  (Yes)
✔ Add JSX Support? … No / Yes  (No)
✔ Add Vue Router for Single Page Application development? … No / Yes  (Yes)
✔ Add Pinia for state management? … No / Yes  (No)
✔ Add Vitest for Unit Testing? … No / Yes  (No)
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? › Yes
✔ Add Prettier for code formatting? … No / Yes  (Yes)

Scaffolding project in /home/jmpc/workspace/playground/vue/demo...

Done. Now run:

  cd demo
  npm install
  npm run format
  npm run dev

Luego, siguiendo las indicaciones:

$ cd demo
$ npm install

y verificamos que se está utilizando rollup:

$ npm ls rollup
demo@0.0.0 /home/jmpc/workspace/playground/vue/demo
├─┬ vite-plugin-vue-devtools@7.7.0
│ └─┬ vite-plugin-inspect@0.8.9
│   └─┬ @rollup/pluginutils@5.1.4
│     └── rollup@4.30.1 deduped
└─┬ vite@6.0.7
  └── rollup@4.30.1

Por lo que al hacer

$ npm run dev

> demo@0.0.0 dev
> vite

/home/jmpc/workspace/playground/vue/demo/node_modules/rollup/dist/native.js:89
	throw new Error(
	      ^

Error: Your current platform "openbsd" and architecture "x64" combination is not yet supported by the native Rollup build. Please use the WASM build "@rollup/wasm-node" instead.

The following platform-architecture combinations are supported:
android-arm
android-arm64
darwin-arm64
darwin-x64
freebsd-arm64
freebsd-x64
linux-arm
linux-arm (musl)
linux-arm64
linux-arm64 (musl)
linux-loong64
linux-ppc64
linux-riscv64
linux-s390x
linux-x64
linux-x64 (musl)
win32-arm64
win32-ia32
win32-x64

If this is important to you, please consider supporting Rollup to make a native build for your platform and architecture available.
    at throwUnsupportedError (/home/jmpc/workspace/playground/vue/demo/node_modules/rollup/dist/native.js:89:8)
    at getPackageBase (/home/jmpc/workspace/playground/vue/demo/node_modules/rollup/dist/native.js:80:3)
    at Object.<anonymous> (/home/jmpc/workspace/playground/vue/demo/node_modules/rollup/dist/native.js:42:21)
    at Module._compile (node:internal/modules/cjs/loader:1565:14)
    at Object..js (node:internal/modules/cjs/loader:1708:10)
    at Module.load (node:internal/modules/cjs/loader:1318:32)
    at Function._load (node:internal/modules/cjs/loader:1128:12)
    at TracingChannel.traceSync (node:diagnostics_channel:322:14)
    at wrapModuleLoad (node:internal/modules/cjs/loader:219:24)
    at cjsLoader (node:internal/modules/esm/translators:263:5)

Node.js v22.12.0

obtuvimos un error similar a que cuando hicimos npm start en el proyecto angular.

La solución es similar:

$ jq '. + {overrides: {"rollup": "npm:@rollup/wasm-node"}}' \
    package.json > package.tmp.json && mv package.tmp.json package.json
$ npm update

y verificando:

$ npm ls rollup
demo@0.0.0 /home/jmpc/workspace/playground/vue/demo
├─┬ vite-plugin-vue-devtools@7.7.0
│ └─┬ vite-plugin-inspect@0.8.9
│   └─┬ @rollup/pluginutils@5.1.4
│     └── rollup@npm:@rollup/wasm-node@4.30.1 deduped
└─┬ vite@6.0.7
  └── rollup@npm:@rollup/wasm-node@4.30.1 overridden

Luego, solo queda confirmar que el proyecto se puede ejecutar sin problemas:

$ npm run dev

> demo@0.0.0 dev
> vite


  VITE v6.0.7  ready in 1229 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  Vue DevTools: Open http://localhost:5173/__devtools__/ as a separate window
  ➜  Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
  ➜  press h + enter to show help