joematthews / extreme-angular Goto Github PK

I noticed that the 'bundle initial' size increased beyond 500kb after implementing this fix #26

I find it odd that updating @types/node increased the size past Angular's default limit. I'm not sure if this is a problem at all, I just find it odd.

Is 700kb a better max 'budget initial'? Or is that too low for real work in Angular?

If you have insight then please let me know.

Add a Tips & Tricks section to README.md for things that are too opinionated to include in the repository.

The following eslint errors were missed when adding additional rules:

➜  extreme-angular git:(main) npm run lint

> lint
> eslint "**/*.{js,ts,html,json,md}"


/Users/joe/Code/extreme-angular/server.ts
  38:31  error  Invalid type "string | undefined" of template literal expression  @typescript-eslint/restrict-template-expressions
  43:15  error  Prefer the safe `: unknown` for a catch callback variable         @typescript-eslint/use-unknown-in-catch-callback-variable
  57:70  error  Invalid type "string | 4000" of template literal expression       @typescript-eslint/restrict-template-expressions

/Users/joe/Code/extreme-angular/src/main.ts
  7:54  error  Prefer the safe `: unknown` for a catch callback variable  @typescript-eslint/use-unknown-in-catch-callback-variable

✖ 4 problems (4 errors, 0 warnings)

Suggested by lele3000 via this reddit post: https://www.reddit.com/r/Angular2/comments/1asff4w/comment/kqqk0yb/

I've started a PR for this request here: #2

Need help: Can more be done to enforce better messages via another git hook, perhaps in commit-msg or post-commit? Any suggestions would be much appreciated!

Adding cspell to lint-staged will help prevent spelling mistakes from being committed and pushed.

New words can be added to .cspell.json.

Work on a PR now.

Tracking npm audit message:

webpack-dev-middleware  6.0.0 - 6.1.1
Severity: high
Path traversal in webpack-dev-middleware - https://github.com/advisories/GHSA-wr3j-pwj9-hqq6
fix available via `npm audit fix --force`
Will install @angular-devkit/[email protected], which is a breaking change
node_modules/webpack-dev-middleware
  @angular-devkit/build-angular  15.1.0-next.0 - 17.3.1
  Depends on vulnerable versions of webpack-dev-middleware
  node_modules/@angular-devkit/build-angular

GHSA-wr3j-pwj9-hqq6

npm audit fix --force would downgrade @angular-devkit/build-angular to version of 15 that is not affected, which is not acceptable.

Fixes are in place and will be release soon: angular/angular-cli#27334

npm audit shows follow-redirects has a vunerability:

follow-redirects  <=1.15.5
Severity: moderate
follow-redirects' Proxy-Authorization header kept across hosts - https://github.com/advisories/GHSA-cxjh-pqwp-8mfp
fix available via `npm audit fix`
node_modules/follow-redirects

GHSA-cxjh-pqwp-8mfp

Tracking: stackblitz/webcontainer-core#1331

Currently a fresh-new Angular 17.2 project will not work with Stackblitz. Stackblitz is aware and tracking it. Click on the issue above and give it a 👍 if you need to run extreme-angular (or any Angular 17.2 project) on Stackblitz.

Soon, I hope, I will be able to add a Stackblitz link at the top of the README.md for extreme-angular. I had to remove it after updating to 17.2.

I re-read the stylelint-scss documentation where it states, "This plugin is used in the stylelint-config-standard-scss shared config. We recommend using that shared config, rather than installing this plugin directly."

stylelint-config-standard-scss is already installed and in use. I will remove the unneeded stylelint-scss package from the devDependencies.

I think inlineTemplate and inlineStyle may as default may be a bit premature. Looking back, I think I gravitated towards this preference because Angular 17's new documentation uses inline templates in the interactive examples.

Although tooling for inline templates appears to be fine, I am noticing issues getting stylelint and prettier to recognize both the array-form and string-literal form of the inline styles property for @Component.

I may revisit inline templates and styles in the future, but for now, I will keep them as separate files.

Making a PR now.

I think commitizen is great for individuals and teams that want to acquaint themselves with convention commits.

In exteme-angular you can omit the message of a commit (git commit) and commitizen will prompt with a interactive CUI guiding you thru how to create a conventional commit.

However, when committed with a well formed convention commit message, The user can use CTRL-C to skip commitizen and use the commit message (but this is communicated in the prompt at all. Also commitizen does not report the commit message after completing the prompts.

I do see value in commitizen, but should should it be disabled by default, or removed, in favor of clarity and then rely solely on commitlint to report missing convention commit message components?

First impressions are not everything, but I think they have a lasting impact.

I would very much appreciate a "designer's touch" for the app.component.html. 🙏

Maybe the new page shows off the auto-switching black theme included for Angular Material?

Ideally, the new page does not require additional dependencies 😓.

Perhaps a screenshot of the better looking app.component can be used at the top of the README.md in place of the 'hero-meme' 🤣

Fixing it may involve changing it to be something like this:

"check-spelling": "cspell \"**/*\" --exclude \"{dist,node_modules}/**\""

extreme-angular is all the best practices and configurations I have accumulated over the years into one succinct starter project. I think it fulfills that purpose.

There may be a way turn extreme-angular into an Angular Schematic which is currently out of scope of my day-to-day work so I have not needed to learn it until now.

When my workload lightens a little bit I plan to dig into schematic authoring so I can figure some of this stuff out.

Seems like @types/node should match the version in engines. Might be as simple as

npm install @types/node@20

Update to Angular 17.2

Need to add the following to .vscode/settings.json to enable searching within the ignored notes/ directory:

"search.useIgnoreFiles": true

Typically, this setting is used to ignore files from search that specified in .ignore. But since I specified !/notes within .ignore, then vscode will search within /notes even though it is ignored in .gitignore -- does your brain hurt? mine too.

I thought it would be helpful to have cspell check all files but the options are not really there to ignore specific files, like package.json, .gitignore etc etc. So the words list was filling up which just seems off for a template project...

Targeting the src/ directory only seems to be what most teams may actually want spell checking for -- even though it would be nice to spell check readme and other markdown files on pre-commit, the extension can still show errors, notot commiting src with obvious misspellings is the focus I think.

At some point I noticed the initial budget exceeded the default of 500kb. Currently, the extreme-angular starter project builds at 509.91 kB for all total assets, ~106kb when gzipped.

This at first looked very high, but after some investigation I've discovered these contribute to a significant portion:

• Animations module
• Angular Material theme (theme.scss)
• Any Material component

I think these features add a lot of power/value up front and I want to keep them in the project. Enterprise, opinionated frameworks are robust and that comes at some cost.

I do not suspect this will balloon out of control for most projects because this cost is up front, and additional components are far less significant if standalone imports are audited routinely.