DEV Community

loading...
Cover image for Setting up an Angular 12 workspace with Nx and GitHub Actions
This is Learning

Setting up an Angular 12 workspace with Nx and GitHub Actions

Lars Gyrup Brink Nielsen
Tech Writer, Tech Speaker, FOSS Maintainer, Microsoft MVP.
・1 min read

In this episode of Nx After Dark, we're creating an Nx workspace for an Angular 12 app called Energy Insights. We're also setting up a GitHub Actions workflow and connecting it to Nx Cloud.

Follow the instructions below to set up a similar workspace or browse the end result at github/LayZeeDK/energy-insights.

Prerequisites

  • Node.js 14.x
  • PNPM

Note that there's currently an issue with using Cypress with PNPM. Let me know if you figure out how to fix it. Until then, remove Cypress from the workspace or use either Yarn or NPM.

Create Nx workspace

# Install the Nx workspace generator
pnpm install --global create-nx-workspace
# Generate a blank Nx workspace
pnpm init nx-workspace my-workspace --preset=empty --pm=pnpm --npm-scope=my-workspace --nx-cloud
Enter fullscreen mode Exit fullscreen mode

Configure Nx workspace

# Install the "json" utility
npm install --global json
# Set the base branch to "main"
json -I -f nx.json -e "this.affected.defaultBase = 'main';"
Enter fullscreen mode Exit fullscreen mode

Add Angular capability

# Add Angular capability
pnpm add --save-dev @nrwl/angular
# Initialize Angular workspace
nx generate @nrwl/angular:init
Enter fullscreen mode Exit fullscreen mode

Generate Angular app project

# Generate Angular app project
nx generate app my-app
Enter fullscreen mode Exit fullscreen mode

See the video for examples of:

  • Setting up generator defaults
  • Creating a GitHub Actions CI workflow
  • Setting up GitHub workflow triggers
  • Connecting Nx Cloud for distributed computation caching
  • Remove Cypress

Discussion (9)

Collapse
solshark profile image
solshark

Hi Lars,

To solve cypress issue add following to your .npmrc

hoist-pattern[]=*rxjs*
hoist-pattern[]=*any-observable*
Enter fullscreen mode Exit fullscreen mode
Collapse
layzee profile image
Lars Gyrup Brink Nielsen Author • Edited

Thanks, I've been trying to solve it lately and figured out the readPackage hook that makes it work locally on Windows. Unfortunately, Cypress still fails on the GitHub Ubuntu runner. Not sure why. Maybe because @nrwl/cypress depends on Webpack 4, not 5.

Collapse
solshark profile image
solshark

Hmm. Adding provided two lines to .npmrc solved it for me on all 3 platforms.

Thread Thread
layzee profile image
Lars Gyrup Brink Nielsen Author
Run pnpm install
Lockfile is up-to-date, resolution step is skipped
Progress: resolved 1, reused 0, downloaded 0, added 0
Packages: +1388
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 1388, reused 0, downloaded 0, added 0
Packages are hard linked from the content-addressable store to the virtual store.
  Content-addressable store is at: /home/runner/.pnpm-store/v3
  Virtual store is at:             node_modules/.pnpm
Progress: resolved 1388, reused 0, downloaded 16, added 13
Progress: resolved 1388, reused 0, downloaded 63, added 60
Progress: resolved 1388, reused 0, downloaded 122, added 116
Progress: resolved 1388, reused 0, downloaded 203, added 195
Progress: resolved 1388, reused 0, downloaded 301, added 296
Progress: resolved 1388, reused 0, downloaded 432, added 428
Progress: resolved 1388, reused 0, downloaded 486, added 480
Progress: resolved 1388, reused 0, downloaded 552, added 549
Progress: resolved 1388, reused 0, downloaded 631, added 625
Progress: resolved 1388, reused 0, downloaded 732, added 730
Progress: resolved 1388, reused 0, downloaded 873, added 868
Progress: resolved 1388, reused 0, downloaded 955, added 950
Progress: resolved 1388, reused 0, downloaded 1041, added 1038
Progress: resolved 1388, reused 0, downloaded 1128, added 1125
Progress: resolved 1388, reused 0, downloaded 1198, added 1192
Progress: resolved 1388, reused 0, downloaded 1310, added 1304
Progress: resolved 1388, reused 0, downloaded 1382, added 1382
.../node_modules/core-js-pure postinstall$ node -e "try{require('./postinstall')}catch(e){}"
.../core-js@3.12.0/node_modules/core-js postinstall$ node -e "try{require('./postinstall')}catch(e){}"
.../node_modules/@angular/cli postinstall$ node ./bin/postinstall/script.js
.../cypress@7.4.0/node_modules/cypress postinstall$ node index.js --exec install
.../node_modules/core-js-pure postinstall: Done
.../core-js@3.12.0/node_modules/core-js postinstall: Done
Progress: resolved 1388, reused 0, downloaded 1388, added 1388, done
.../cypress@7.4.0/node_modules/cypress postinstall: /home/runner/work/temp-nx-angular-cypress-ci-test/temp-nx-angular-cypress-ci-test/node_modules/.pnpm/any-observable@0.3.0/node_modules/any-observable/register.js:29
.../cypress@7.4.0/node_modules/cypress postinstall:         throw new Error('Cannot find any-observable implementation nor' +
.../cypress@7.4.0/node_modules/cypress postinstall:         ^
.../cypress@7.4.0/node_modules/cypress postinstall: Error: Cannot find any-observable implementation nor global.Observable. You must install polyfill or call require("any-observable/register") with your preferred implementation, e.g. require("any-observable/register")('rxjs') on application load prior to any require("any-observable").
.../cypress@7.4.0/node_modules/cypress postinstall:     at loadImplementation (/home/runner/work/temp-nx-angular-cypress-ci-test/temp-nx-angular-cypress-ci-test/node_modules/.pnpm/any-observable@0.3.0/node_modules/any-observable/register.js:29:9)
.../cypress@7.4.0/node_modules/cypress postinstall:     at /home/runner/work/temp-nx-angular-cypress-ci-test/temp-nx-angular-cypress-ci-test/node_modules/.pnpm/any-observable@0.3.0/node_modules/any-observable/loader.js:30:18
.../cypress@7.4.0/node_modules/cypress postinstall:     at Object.<anonymous> (/home/runner/work/temp-nx-angular-cypress-ci-test/temp-nx-angular-cypress-ci-test/node_modules/.pnpm/any-observable@0.3.0/node_modules/any-observable/index.js:2:39)
.../cypress@7.4.0/node_modules/cypress postinstall:     at Module._compile (internal/modules/cjs/loader.js:1068:30)
.../cypress@7.4.0/node_modules/cypress postinstall:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
.../cypress@7.4.0/node_modules/cypress postinstall:     at Module.load (internal/modules/cjs/loader.js:933:32)
.../cypress@7.4.0/node_modules/cypress postinstall:     at Function.Module._load (internal/modules/cjs/loader.js:774:14)
.../cypress@7.4.0/node_modules/cypress postinstall:     at Module.require (internal/modules/cjs/loader.js:957:19)
.../cypress@7.4.0/node_modules/cypress postinstall:     at require (internal/modules/cjs/helpers.js:88:18)
.../cypress@7.4.0/node_modules/cypress postinstall:     at Object.<anonymous> (/home/runner/work/temp-nx-angular-cypress-ci-test/temp-nx-angular-cypress-ci-test/node_modules/.pnpm/@samverschueren+stream-to-observable@0.3.1_rxjs@6.6.7/node_modules/@samverschueren/stream-to-observable/index.js:2:20)
.../cypress@7.4.0/node_modules/cypress postinstall:     at Module._compile (internal/modules/cjs/loader.js:1068:30)
.../cypress@7.4.0/node_modules/cypress postinstall:     at Object.Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
.../cypress@7.4.0/node_modules/cypress postinstall:     at Module.load (internal/modules/cjs/loader.js:933:32)
.../cypress@7.4.0/node_modules/cypress postinstall:     at Function.Module._load (internal/modules/cjs/loader.js:774:14)
.../cypress@7.4.0/node_modules/cypress postinstall:     at Module.require (internal/modules/cjs/loader.js:957:19)
.../cypress@7.4.0/node_modules/cypress postinstall:     at require (internal/modules/cjs/helpers.js:88:18)
.../cypress@7.4.0/node_modules/cypress postinstall: Failed
 ERROR  Command failed with exit code 1.
Error: Process completed with exit code 1.
Enter fullscreen mode Exit fullscreen mode

From github.com/LayZeeDK/temp-nx-angula...

Thread Thread
layzee profile image
Lars Gyrup Brink Nielsen Author • Edited

Are you using Nx 12.3.5, Node.js 14.17.0, Cypress 7.4.0, and PNPM 6.x?

Thread Thread
solshark profile image
solshark

Yeah. Please try pnpm add any-observable && pnpm i

Thread Thread
layzee profile image
Lars Gyrup Brink Nielsen Author • Edited

I've tried it in 3 different repos. It doesn't work :-/

Thread Thread
solshark profile image
solshark

That’s weird. After I explicitly added any-observable it started to work for new repo.

Thread Thread
layzee profile image
Lars Gyrup Brink Nielsen Author

In a GitHub workflow? Please share a repo.