Node Version Compatibility

[HuwSy]

General Information

• [ ] Usage
• [ ] Development
• [x] Documentation
• [ ] Feature Request

Specific generator

• [x] Angular 12.2.9

What Version you are running?

• NodeJS: 14.15.5
• NPM: 6.14.11
• @pnp/spfx: 1.16.1
• @angular/cli: 12.2.9

Describe your problem

Trying to create an Angular Elements SPFx web part. No specific customization, just the base sample created by the generator with the ! added after description in the Angular component as per pull 307 and maximumError increased in the angular.json. Once created and the 2 minor issues resolved above, it can be served under Angular but not under SPFx workbench.

Using NodeJS 10.x doesnt seem to be supported by Angular CLI as it needs 12.14.x or 14.15.x so refuses to run.

Using NodeJS 12.14.x doesnt seem to run correctly within the @microsoft/generator-spfx as its using 1.11.0 internally and gives errors creating.

Using NodeJS 14.15.x seems to run more completely than the others attempted. But even then, npm run bundle within Angular appears to build correctly but running gulp serve or any releases in the SPFx side gives the following

ReferenceError: primordials is not defined at fs.js:45:5 at req_ (/home/./SP/Angular/Angular-spfx/node_modules/natives/index.js:143:24) at Object.req [as require] (/home/./SP/Angular/Angular-spfx/node_modules/natives/index.js:55:10) at Object. (/home/./SP/Angular/Angular-spfx/node_modules/gulp/node_modules/graceful-fs/fs.js:1:37) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19) at require (internal/modules/cjs/helpers.js:88:18) at Object. (/home/./SP/Angular/Angular-spfx/node_modules/gulp/node_modules/graceful-fs/graceful-fs.js:3:27) at Module._compile (internal/modules/cjs/loader.js:1063:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10) at Module.load (internal/modules/cjs/loader.js:928:32) at Function.Module._load (internal/modules/cjs/loader.js:769:14) at Module.require (internal/modules/cjs/loader.js:952:19)

Best reference i can find for version compatibilities are https://docs.microsoft.com/en-us/sharepoint/dev/spfx/compatibility and https://gist.github.com/LayZeeDK/c822cc812f75bb07b7c55d07ba2719b3 but we should have some reference in this project to what versions of NodeJS and NPM are required to run the tool with Angular as there doesn't seem to be an obvious cross over of versions and I haven't found a working combination.

[HuwSy]

For reference this is the generated code with the 2 minor fixes.

Angular.zip

[damsleth]

gulp 3.9.1 (devDependency) does not support node > 10, hence the primordials-error (more here).
Your best bet is probably to run node 10, downgrade @angular/cli to 11.2 and test if you can gulp serve it

[chandaniprajapati]

Hi @HuwSy, Thanks for reporting an issue. Currently, we are working on the latest version integration.

[HuwSy]

Hi. Node 10 with angular 11 works as suggested. Then upgrading node to 12 and angular to 12 is hit and miss. I think just having it documented explicitly to start on node 10 angular 11 and have the correct versions in the package would help others. Thanks