Home > Software engineering >  Angular polyfill.ts file help. Where does the polyfill code go? and what is required to handle it?
Angular polyfill.ts file help. Where does the polyfill code go? and what is required to handle it?

Time:12-01

So I have an angular project that is erroring out and in need of some 'polyfilling' as it were. Since Angular does not allow editing of the webpack.config.js file without exporting it I figured the expected intent would be for the developer to edit the polyfill.ts file. Now the polyfill.ts in the src folder does recognize the keyword 'resolve' as it is imported from dns in this manner:

import {resolve} from 'dns';

Which is typical for Angular. But the error message from Angular suggests that this imported resolve should have method .fallback of which it does not.

Here is an image of the code for polyfill.ts: enter image description here

Here is a snippet of the Angular error previously mentioned: enter image description here

Does anyone know where Angular is expecting this code to be placed? Does the polyfill.ts file serve some other purpose other than what I am assuming of it in this post? Is more robust code required to actually handle the polyfill? I am assuming it would all go here otherwise why have the file right in the src folder named polyfill where the whole project can see it? Apologies should this question seem too broad, any and all criticism / advice is appreciated as I am bumbling in the dark.

Below is the full error generated by Angular:

 $ ng serve
    Your global Angular CLI version (13.0.1) is greater than your local version (12.2.13). The local Angular CLI version is used.
    
    To disable this warning use "ng config -g cli.warnings.versionMismatch false".
    - Generating browser application bundles (phase: setup)...
    √ Browser application bundle generation complete.
    
    Initial Chunk Files   | Names         |      Size
    vendor.js             | vendor        |   6.48 MB
    polyfills.js          | polyfills     | 510.73 kB
    styles.css, styles.js | styles        | 383.69 kB
    main.js               | main          |  81.66 kB
    runtime.js            | runtime       |   6.69 kB
    
    | Initial Total |   7.44 MB
    
    Build at: 2021-11-26T16:15:03.838Z - Hash: b77d276f8b953e0e2990 - Time: 10837ms
    
    ./node_modules/sequelize/lib/dialects/abstract/connection-manager.js:82:15-63 - Warning: Critical dependency: the request of a dependency is an expression
    
    ./node_modules/sequelize/lib/dialects/abstract/connection-manager.js:89:13-32 - Warning: Critical dependency: the request of a dependency is an expression
    
    
    
    ./node_modules/sequelize/lib/dialects/mssql/query-generator.js:8:20-49 - Error: Module not found: Error: Can't resolve 'crypto' in 'C:\again\software-engineering-team-project-fourtothefloor\node_modules\sequelize\lib\dialects\mssql'
    
    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.
    
    If you want to include a polyfill, you need to:
            - add a fallback 'resolve.fallback: { "crypto": require.resolve("crypto-browserify") }'
            - install 'crypto-browserify'
    If you don't want to include a polyfill, you can use an empty module like this:
            resolve.fallback: { "crypto": false }
    
    ./node_modules/sequelize/lib/dialects/postgres/hstore.js:3:15-35 - Error: Module not found: Error: Can't resolve 'pg-hstore' in 'C:\again\software-engineering-team-project-fourtothefloor\node_modules\sequelize\lib\dialects\postgres'
    
    ./node_modules/sequelize/lib/dialects/sqlite/connection-manager.js:5:11-24 - Error: Module not found: Error: Can't resolve 'fs' in 'C:\again\software-engineering-team-project-fourtothefloor\node_modules\sequelize\lib\dialects\sqlite'
    
    ./node_modules/sequelize/lib/model.js:5:15-32 - Error: Module not found: Error: Can't resolve 'assert' in 'C:\again\software-engineering-team-project-fourtothefloor\node_modules\sequelize\lib'
    
    BREAKING CHANGE: webpack < 5 used to include polyfills for node.js core modules by default.
    This is no longer the case. Verify if you need this module and configure a polyfill for it.
    
    If you want to include a polyfill, you need to:
            - add a fallback 'resolve.fallback: { "assert": require.resolve("assert/") }'
            - install 'assert'
    If you don't want to include a polyfill, you can use an empty module like this:
            resolve.fallback: { "assert": false }
    
    
    
    ** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **
    
    
    × Failed to compile.

CodePudding user response:

Consort this post:

webpack 5 angular polyfill for node.js crypto-js

for this error no polyfill was needed. Just editing of the angular.json and tsconfig.json files.

The non-polyfilling errors spring up from not having a canonical server/client setting.

  • Related