This is nothing you'll care about (probably)
A ghost from 3 years past, when I was learning Angular from a standing start đ
So there I was, searching through OneNote for something or other and I came across this page from 3 years ago, when I was trying to learn Angular (a specific web technology set) for a job I probably couldnât keep even if I could get it (and wouldâve come to hate anyway). Life is too short to let my art dissipate in favor ofâŠthis đ« . The money is terrible, but the art lasts until it doesnât.
Enjoy, I guess?
Issues Iâve run into
Tuesday, May 30, 2023
7:19 PM
ASP.NET Core with Angular (Preview) seems to produce a broken build? Or broken project tree?
Canât get ASP.NET Core with Angular build-from-template to start out with SASS (SCSS) - need to retrofit. It was not (AT ALL) obvious how to do this; eventual Googlefu & Stack Overflow:
[For new projects]
ng new sassy-project --style=scss[For all (future) projects, by defaultâŠbut this didnât seem to help the dotnet template?]
For already-generated project:
ng config projects.<projectname>.schematics.@schematics/angular:component.style scss
orâŠng config schematics.@schematics/angular:component.style scss
[Lots of info on the internet pointing to this, but using âstyleExtâ or âstyleextâ instead of style, which doesnât seem to be correct.]
[Also, that *seems* to put it in the wrong place? Needs to be under the actual *project* node. In angular.json.]
On the (dotnet) angular project, converted it to SCSS, was getting a warning message during build:
1 rules skipped due to selector errors:
legend+* -> Cannot read properties of undefined (reading âtypeâ)
This seems to be some sort of negative interaction with Bootstrap? Found a fix at:
Angular 12 production build warning (MDB4 12) - Material Design for Bootstrap (mdbootstrap.com)
The fix was changing angular.json from:
âconfigurationsâ: {
âdevâ: {
âoptimizationâ: true,
âŠ
to:
âconfigurationsâ: {
âdevâ: {
âoptimizationâ: {
âscriptsâ: true,
âstylesâ: {
âminifyâ: true,
âinlineCriticalâ: false
},
âfontsâ: true
},
âŠ
Apparently the inlineCritical bit conflicts with something in Bootstrap.
Later: no, actually, this did NOT fix the build error message. WTF.
Apparently a fix is en route, whenever next release happens. Or something. <stupid>
Traced error to a specific line in bootstrap_reboot.scss -> .css. Oof. But apparently itâs down to Angular build process using parse5 instead of htmlparser2, which (parse5) does a bad job of parsing CSS. Something like thatâŠ.Also worth noting: the default template creates a project with 4 security issues, requiring an immediate ânpm audit fixâ command. [have not run it yet]
Found out defaultProject key is deprecated (generated by default in dotnet project template). [ng g component <ComponentName> Failed with error âProject âundefinedâ does not exist.â · Issue #23848 · angular/angular-cli (github.com)]
Ran across a blog that says inlining critical CSS is a security risk, a violation of Content Security Policy, and creates vulnerability to XSS. Yet Angular does this by default⊠[see Angular Security - Disable Inline Critical CSS â 0xdbe â Application Security Coach] also [inlineCritical CSS asynchronous loading method breaks with CSP · Issue #20864 · angular/angular-cli (github.com)]
But apparentlyâŠfixed in pull request, merged on March 28th. (Hah. All this web code churnâŠno wonder there are new security holes ALL. THE. TIME.)
Contrary to popular advice, you CANNOT add a âdefaultsâ section to the angular-config.json (global config file, found in %USERPROFILE% dir), or it will complain âWorkspace extension with invalid name (defaults) found.â
FUUUUUUUUUUâŠ.