A toolbox like Ionic makes our life as a developer a little bit more easy. This post guides you in how to get the window size dynamically in your components and to set a variable width depending on it.

Uncaught (in promise): Error: Type EventcardComponent does not have 'ɵmod' property.

This error occurs in Angular when you have copied a module or component but you did not rename the class properly.

Solution

Make sure the components module file has the right "export class xModule" function inside xModule.ts.

second solution is that you possibly want to import a component inside another component. Make sure you import the module, rather than the component. So:

imports: [EventcardModule,
Instead of
imports: [EventcardComponent,
Animate.css is my favorite css library to easily add nice open/close or fade effects with css3.
Ionic uses components for layout. This is a gigantic time saver for your web apps. This easy trick makes an ionic item get a transparent background.

Fix http-server -p 8080 -c-1 dist/app throw er; // Unhandled 'error' event ^

This error occured when using the http-server to run production builds of angular on a local machine.

Solution one

Restart your computer, really :). The error means there is some process running already and you're probably here because you can't find it. Restart your machine will kill the process.

Solution two

The solution is to clear your entire npm cache and folders (yeah, pretty lame). I could not found another answer (yet):

rm -rf node_modules
npm cache clear --force
npm install

 

Service workers are meant to run on production builds over https. But we want to test on localhost.
I stumbled upon some annoying errors setting up Tailwind and Angular. These snippets might fix things.

NG8002: Can't bind to x since it isn't a known property of 'app-my-component'.

This error I got in Angular 11 is actually pretty basic. You are trying to loop over a component, for example:

  <div *ngFor="let book of books">
    <app-book-card [book]="book"></app-book-card>
  </div>

But the component <app-book-card> does not know how to read the variable [book] you send with it. 

Solution

In your component, in my case book-card-component.ts, add an input decorator:

Error: budgets: initial exceeded maximum budget. Budget 1.00 MB was not met by x kB with a total of x MB.

I got this error on a Angular 10 project. A performance budget is a group of limits to certain values that affect site performance, that may not be exceeded in the design and development of any web project.

Change the values in your angular.json file. Example:

"budgets": [
  {
    "type": "initial",
    "maximumWarning": "4mb",
    "maximumError": "5mb"
  },
  {
    "type": "anyComponentStyle",
    "maximumWarning": "2kb",
    "maximumError": "4kb"
  }
]

 

Fix error in styles.scss class does not exist. Module build failed (from ./node_modules/postcss-loader/dist/cjs.js):

I had this error on a Typescript Angular project, where my Tailwind css could not be compiled every time I created a new component in my angular cli.

I was able to fix it:

Put 

chmod -R 777 * 

as access rights on your node_modules folder.

 

Thanks to this user:  https://stackoverflow.com/a/54033562/3280710