Category: Angular

Categories
Angular HTML Javascript Silly Wise Tips

Silly Wise Tip: How to make a comment on an Angular .HTML template which is not outputted

When you are used to the way of commenting on most of programming languages (usually with // or /* */ ) you can a find a bit nerving when you have to write a comment on an HTML template with our old friend <!– –>

It is not so handy, takes more time and it will be outputted on the .HTML template.

So in case you want a much more confortable, faster way to add a comment, with the plus that it won´t be outputted on the template and only you or other developers will read it, you can use this tricky solution I found on Stack Overflow. Is ugly but it works.

https://stackoverflow.com/questions/18063475/how-can-i-add-a-comment-for-developers-not-in-output-html-to-an-angular-templ

Since there still does not seem to be template syntax support for (non-html) comments the easiest way I found to do this is abusing the support for one line js comments in embedded expressions. Like this:

{{ '' // my comment }}

The empty string literal – which makes this even more ugly than it already is – is necessary because without it the angular compiler barfs out a ‘ERROR in TypeError: Cannot read property ‘visit’ of undefined’, at least with the 9.0.0 version I am on.

Categories
Angular Javascript Typescript Useful software

Move .ts files and automatically update imports with MOVE .TS

move-ts

Sometimes we find on our Angular projects, we have created a Component in the wrong place (for example outside Components folder). It can be a waste of time and effort to delete the older and create a new one, specially if we have already used it. Changing all the imports and references is also a work which can lead us to lots of errors, wasting, again, a lot of time to fix them.

To solve it we will use move.ts for visual studio code. This useful plugin for Visual Studio Code will allow you to move all your folders and automatically rename all the imports and references to the folder very easily. You just to make right click on the folder, look for the option “Move Typescript” and follow the instructions:

 

 

Categories
Angular Javascript npm

Angular package.json file overview

I think this might be helpful for any novice Angular developer like me. It is important to know how this package.json works, among other things, because of possible vulnerabilities of the project.

Also it is useful to avoid a backup of the node_modules folder, making your project back up much smaller and it will allow NPM (Node Package Manager), to install all the required dependencies whenever you need it.

https://www.codestack.net/angular/getting-started/package/#:~:text=files%20and%20folders.-,package.,packages%20installed%20for%20the%20project

I also shared it on my linkedin. Visit me and tell me what you think 🙂

 

EDIT: I update with some good info which may be very helpful to you, as I asked about package.json and vulnerabilities on Stack Overflow and I received a very good answer:

https://stackoverflow.com/questions/68415239/npm-audit-force-is-not-recommended-if-you-are-not-expert-what-to-do-then-is/68416325?noredirect=1#comment120923232_68416325