I run ng new AngularStarter
I swap to the newly created AngularStarter directory
I run ng serve
It builds and then ends with:
*chunk {main} main.js, main.js.map (main) 60.8 kB [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 141 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.15 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 9.71 kB [initial] [rendered]
chunk {vendor} vendor.js, vendor.js.map (vendor) 3.06 MB [initial] [rendered]
Date: 2023-09-18T09:54:43.369Z - Hash: 9da10b3c17cc9b21159c - Time: 6065ms
ERROR in (webpack)-dev-server/client/utils/createSocketUrl.js
Module not found: Error: Can't resolve 'querystring' in 'C:\Source Code\Angulars\AngularStarter\node_modules\webpack-dev-server\client\utils'
** Angular Live Development Server is listening on localhost:4044, open your browser on http://localhost:4044/ **
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\DumpStack.log.tmp'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\hiberfil.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\pagefile.sys'
Error from chokidar (C:\): Error: EBUSY: resource busy or locked, lstat 'C:\swapfile.sys'*
I guess the issue is:
*ERROR in (webpack)-dev-server/client/utils/createSocketUrl.js
Module not found: Error: Can't resolve 'querystring' in 'C:\Source Code\Angulars\AngularStarter\node_modules\webpack-dev-server\client\utils'*
I can get around this by adding:
*"browser": {
"querystring": false
}*
to my package.json file, but then when I browse to http://localhost:4044 host I see an empty html page, no default angular app.
How can I correct this?
>Solution :
To resolve these issues, you can follow these steps:
- Fix ‘querystring’ Module Issue:
In your project’s package.json file, you mentioned that you added "browser": { "querystring": false }. While this may resolve the ‘querystring’ module issue, it’s a workaround and not the best approach.
To properly resolve the ‘querystring’ issue, you should ensure that your project’s dependencies are up to date. Run the following commands in your project directory:
npm install webpack-dev-server@latest --save-dev
npm install querystring@latest --save
These commands will update your webpack-dev-server and querystring dependencies to the latest versions, which should resolve the issue without needing to disable ‘querystring’ explicitly.
- Verify Angular App Configuration:
After fixing the ‘querystring’ issue, you should ensure that your Angular application is correctly configured and has not encountered any errors.
Check the console in your browser’s developer tools for any errors. This might provide more specific information about what’s going wrong with your Angular application.
Ensure that your Angular project is set up correctly by verifying that the main application component (usually app.component.ts) is properly defined and that it includes a template.
Verify your project’s routing configuration, especially if you have defined routes in your Angular application. Incorrect routing configurations can lead to empty pages.
Check the angular.json file for any misconfigurations related to your project’s build and assets.
- Serve the Application:
After addressing the ‘querystring’ issue and ensuring that your Angular application is correctly configured, you can serve your application again using the following command:
ng serve
Wait for the development server to start, and then access http://localhost:4200 (the default port for Angular development) in your browser. If you see your Angular app running as expected, you should no longer encounter an empty page.
By following these steps, you can resolve the ‘querystring’ module issue and ensure that your Angular application is correctly configured and running. If you encounter any specific errors or issues during this process, be sure to check the console for error messages, as they can provide valuable information for debugging.