DeprecationWarning while start ng serve

[adnanebrahimi]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

Show warning message by executing: ng serve

ng s -o
- Generating browser application bundles (phase: building)...(node:7748) [DEP0148] DeprecationWarning: Use of deprecated folder mapping "./" in the "exports" field module resolution of the package at {Angular Project Path}\node_modules\postcss\package.json.
Update this package.json to use a subpath pattern like "./*".
(Use `node --trace-deprecation ...` to show where the warning was created)
| Generating browser application bundles (phase: sealing)...(node:7748) [DEP_WEBPACK_COMPILATION_ASSETS] DeprecationWarning: Compilation.assets will be frozen in future, all modifications are deprecated.
BREAKING CHANGE: No more changes should happen to Compilation.assets after sealing the Compilation.
        Do changes to assets earlier, e. g. in Compilation.hooks.processAssets.
        Make sure to select an appropriate stage from Compilation.PROCESS_ASSETS_STAGE_*.
/ Generating browser application bundles (phase: emitting)...
Initial Chunk Files | Names         |      Size
styles.css          | styles        |   4.44 MB
vendor.js           | vendor        |   1.69 MB
polyfills.js        | polyfills     | 140.96 kB
main.js             | main          |  22.70 kB
runtime.js          | runtime       |   6.80 kB

                    | Initial Total |   6.29 MB

Build at: 2021-01-11T15:33:24.215Z - Hash: 4ecfb8233b8b31b3da06 - Time: 20813ms


** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **

Expected behavior

Serve application without warning

Minimal reproduction of the problem with instructions

For bug reports please provide the STEPS TO REPRODUCE and if possible a MINIMAL DEMO of the problem

• execute yarn create nx-workpace
• remove package-lock.json
• execute yarn to add yarn.lock
• add "resolution": {"webpack": "^5.12.3"} in package.json
• execute ng add ngneat/tailwind
• execute ng serve

What is the motivation / use case for changing the behavior?

Environment

Angular version: 11.0.0


Angular CLI: 11.0.6
Node: 15.5.1
OS: win32 x64

Angular: 11.0.7
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router
Ivy Workspace: 

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1100.6
@angular-devkit/build-angular   0.1100.6
@angular-devkit/core            11.0.6
@angular-devkit/schematics      11.0.6
@angular/cli                    11.0.6
@schematics/angular             11.0.6
@schematics/update              0.1100.6
rxjs                            6.5.5
typescript                      4.0.5

Browser:
- [x] Chrome (desktop) version  87.0.4280.88 (Official Build) (64-bit)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 15.5.1  
- Platform: Windows 10 Pro 64bit 

Others:

[nartc]

Since this is webpack 5 related, I'm going to keep the issue open and will wait until AngularCLI officially supports Webpack5 before diving into this.