typebytes / angular-checklist Goto Github PK
View Code? Open in Web Editor NEW🔥 Curated list of common mistakes made when developing Angular applications
Home Page: https://angular-checklist.dev
License: MIT License
🔥 Curated list of common mistakes made when developing Angular applications
Home Page: https://angular-checklist.dev
License: MIT License
As the new control flow syntax requires track
for @for
, it won't be required as part of the checklist once the new control flow is stable.
add Eslint item
➜ ng update --all
Your global Angular CLI version (8.0.0) is greater than your local
version (7.3.8). The local Angular CLI version is used.
To disable this warning use "ng config -g cli.warnings.versionMismatch false".
Package "angular-checklist" has an incompatible peer dependency to "@angular/common" (requires "^4.0.0" (extended), would install "8.0.0").
Package "angular-checklist" has an incompatible peer dependency to "@angular/core" (requires "^4.0.0" (extended), would install "8.0.0").
Package "angular-checklist" has an incompatible peer dependency to "rxjs" (requires "^5.1.0", would install "6.5.2").
Package "angular-checklist" has an incompatible peer dependency to "zone.js" (requires "^0.8.4", would install "0.9.1").
Incompatible peer dependencies found. See above.
Consider the following components structure:
@Component({
selector: 'child',
template: 'child'
})
export class Child {
@Input() textProp: string;
@Input() propForCheck: string;
}
@Component({
selector: 'my-app',
template: `
<child textProp="someText" [propForCheck]="'checkMe'"></child>
`
})
export class AppComponent {}
I distinguish two implementations for such cases:
ViewEngine (Angular 4-7...)
This renderer will generate ngfactory that will looks like:
function View_AppComponent_0(_l) {
return jit_viewDef_1(0, [(_l()(),
jit_elementDef_2(0, 0, null, null, 1, 'child', [['textProp', 'someText']], null, null, null, jit_View_Child_0_3, jit__object_Object__4)), jit_directiveDef_5(1, 49152, null, 0, jit_Child_6, [], {
textProp: [0, 'textProp'],
propForCheck: [1, 'propForCheck']
}, null)], function(_ck, _v) {
var currVal_0 = 'someText';
var currVal_1 = 'checkMe';
_ck(_v, 1, 0, currVal_0, currVal_1);
}, null);
}
where updateDirectives part is:
function(_ck, _v) {
var currVal_0 = 'someText';
var currVal_1 = 'checkMe';
_ck(_v, 1, 0, currVal_0, currVal_1);
},
As we can see above Angular will still check our static text property regardless we didn't use property binding explicity.
So we can conclude that ViewEngine still treats "static attribute binding" as property binding that needs to be checked.
In addition, if we take a look at elements panel:
<child textprop="someText" ng-reflect-text-prop="someText"
ng-reflect-prop-for-check="checkMe">child</child>
we can also notice textprop
attribute.
In summary, I would say that using textProp="someText"
instead of [textProp]="'someText"
will not give us better performance since it's treated the same as property binding and also blows our html by adding attribute on element through.
Ivy(incoming new renderer)
In Ivy we will have ngDefinition
with compiled template like:
var _c0 = ['textProp', 'someText', 1, 'propForCheck'];
...
template: function AppComponent_Template(rf, ctx) {
if (rf & 1) { // insert mode
jit_element_2(0, 'child', _c0);
}
if (rf & 2) { // update mode
jit_elementProperty_3(0, 'propForCheck', jit_bind_4('checkMe'));
}
},
Here we can apply that rule since our static property treats as attribute and won't be checked during CD cycle
What about some hints about the usage of state management in general? NGRX seems to be overused in the community. Mike Ryan's talk is a very good one on this topic: https://youtu.be/omnwu_etHTY
Can we provide some "real" examples of when state management is a good fit and when it might be enough the handle state with a behaviour subject?
YouTube for a basic explanation.
@d3lm I'm working on updating to the latest version of angular. FYI
tools/utils.ts(63,10): error TS2352: Conversion of type 'GrayMatterFile
the other. If this was intentional, convert the expression to 'unknown' fir
[1] Types of property 'data' are incompatible.
[1] Type '{ [key: string]: any; }' is not comparable to type 'Checklist
[1] Property 'title' is missing in type '{ [key: string]: any; }'.
What about add this item? May sound irrelevant for small forms, but in my opinion important for huge forms
Hey, I was wondering if it makes sense to update this item on the checklist:
https://angular-checklist.io/default/checklist/ngrx/iglD3
It's about defining Actions as classes, like that:
export enum AppActionTypes {
APP_PAGE_LOAD_USERS = '[App Page] Load Users'
}
export class AppPageLoadUsers implements Action {
readonly type = AppActionTypes.APP_PAGE_LOAD_USERS;
}
However, based on the newest ngrx docs (https://ngrx.io/guide/store/actions), it maybe should look more like this:
export const loadUsers = createAction('[App Page] Load Users');
What do you think about that?
I'm happy to update this content item, but I'm not sure if we want that, and if so, how many changes do we think it needs?
I'm not sure if "note + resources" makes much sense when using a new ngrx wrapper for actions.
It looks like the site might be down, are you aware of this? Do you know when it might be back?
Hey guys,
It would be great to have a section about the best practices in component styling: Topics could be like:
css
/ sass
styleUrls
:host
)css
/ sass
What do you think?
Currently, projects only live within local storage and the user's machine. They are not not persisted in a DB.
It would be cool if we integrated FireStore to synchronize the user's projects to a DB so that they are available on other machines as well.
This means we would also need Firebase authentication and whenever an action was dispatched that updated the one of the user's projects, we'd sync it with FireStore. For this we could use @ngrx/effects
and encapsulate the side effects related to synchronization between the client and the DB.
add an item about using provideAnimationsAsync
in place of provideAnimations
.
https://angular.dev/guide/animations#enabling-the-animations-module
Angular now stop giving support for tslint in angular v13. So we need to migrate from tslint to eslint for linting to work
I think we should really have some e2e tests for this project to ensure that, when new features are added, we don't break existing functionality.
My preference would be to write mostly e2e tests for the checklist with Cypress. Cypress a fast and reliable testing framework and I have been using it for some of my projects. It really is reliable and writing tests is fun as well.
Here's a list of todo's that we could parallelize across multiple people.
If anyone wants to take some parts over, I am more than happy to provide assistance and help you out with getting Cypress up and running.
Add an example with [attr.title]
syntax when you need to pass an expression and can't just use title="some string value"
.
Update the current snippets by using inject()
for the dependency injection.
Would be nice to have an angular-checklist cli, that would be able to run against an angular project and generate a report, same way as lighthouse does.
As of right now, pre-rendering is no longer used. I am not sure if Universal makes much sense for the checklist, because the content currently lives on the client, meaning in the user's local storage. Prerending would improve the time to First Meaningful Paint but for this app it would also cause flickering when the client kicks in, because that's when data is pulled out of local storage and everything is replaced with the user's data. Since data lives in local storage we cannot transfer the state.
However, we could at least use Universal to pre-render an app-shell to show the above the fold content to the user for improved perceived startup performance. Angular Universal is already set up for static pre-rendering so we would need to also set up the app shell.
Users want to be able to display in a suitable language by selecting their native language.
XXXX.ja-JP.md
.tools/build-checklist.ts
If continue to AoT build, url must be added one path. since I do not know firebase, I do not understand the influence. maybe this will be unnecessary with the transloco.
Currently, https://www.angular-checklist.io/ shows insecure connection error.
We need to investigate what is causing this. Everything seems to work just fine when omitting www
, e: https://angular-checklist.io/.
There are a few things that we still need to add. In particular, it's the following items:
Contributions are more than welcome 🤩If someone wishes to contribute with one of the items above, please create separate pull requests and follow our contributing guide.
I also want to point out again that this project is released with a Code of Conduct. By participating in this project you agree to abide by its terms.
It would be great to have this as an installable web app, I can implement this for you if you want.
Create dev branch
Create dev firebase project for a test hosting site "angular-checklist-dev"?
ng add @angular/pwa
add service worker to app.component.ts
automatic update logic
manual update logic
manual update button
put init logic in the ngOnInit lifecycle hook is not the best practice.
Please have a look at this article on AngularInDepth
This is a question
Hi, are all articles listed on the site current and valid for the latest version of Angular?
I see that some recommendations are based on articles more than 2 years old (so more than 4 versions of Angular). Wouldn't it be possible to add to the recommendations to what version of Angular is this rule applicable? Like for example: Recommended for Angular versions 5 - latest
. And consequently only specific versions of the Angular could be filtered out in the menu.
Update the example with Signals, both as a way to modernize the practice and avoid calling a function in the template.
Hello,
I'm totally surprised that the website is down. Will the project continue?
README.md
CONTRIBUTING.md
with guidelines on how to contribute to this projectA common mistake is to create an app with a long list of components instead of group these into feature modules.
What about add this item to architecture category?
Add a Typescript checklist item about the strict configuration rule.
Even if introduced in Typescript and Angular a while ago, some projects do not include it and might not know the different strictness options.
The title is still valid as some people are creating multiple instances of a shared service by providing it at different levels of the injector tree.
However, the example should not be any longer about the SharedModule
as shown as a bad practice nowadays.
add an item in General to talk about the NodeJS compatibility, linking the official matrix: https://angular.dev/reference/versions#actively-supported-versions
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.