Quick resolution for some common and important Angular+ issue during development

 1) 'Found the synthetic property @panelState. Please include either “BrowserAnimationsModule” or “NoopAnimationsModule” in your application.'

Make sure the @angular/animations package is installed (e.g. by running npm install @angular/animations). Then, in your app.module.ts 

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

@NgModule({
  ...,
  imports: [
    ...,
    BrowserAnimationsModule
  ],
  ...
})

2) Can't resolve all parameters for Component: (?, [object Object], [object Object])

Can't resolve all parameters for User: (?, [object Object])

{
  "compilerOptions": {
    "emitDecoratorMetadata": true

Here, is a scenario I came across reading...
Injectors use metadata output by the TypeScript compiler, to determine what service types are being requested by component. The metadata outputs information about the number and type of parameters declared on methods.
The dependency injection system then can look at the constructor parameter metadata to figure out what types to inject.
All of this is enabled by the special TypeScript compiler options named
"emitDecoratorMetadata":true
that is usually configured in a tsconfig.json file.
If emitDecoratorMetadata is not set to true, Angular can't find out what to inject in your app.
3. Interesting

I have a constants file constants.ts:

export const C0NST = "constant";
I access it in a service some.service.ts like so:

import { C0NST } from './constants';

console.log(C0NST); // "constant"
However, when I access it in a component template:

some.component.ts:
import { C0NST } from './constants';

some.component.html:

{{ C0NST }} <!-- Outputs nothing -->

However defining a member in the component class works:

some.component.ts
public const constant = C0NST;
some.component.html

{{ constant }} <!-- constant -->
I don't understand why I was able to access the imported constant directly in the service class but not in the component template even though I imported it in the component class
In Angular2, the template can only access fields and methods of the component class. Everything else is off-limits. This includes things which are visible to the component class.
The way to go around this is to have a field inside the component, which just references the constant, and use that instead.

It's one limitation of the design, but perhaps you should thing more about why you need a constant in the template in the first place. Usually these things are used by components themselves, or services, but not the template.
iSo in the Component's template you can only use attributes of the Component's class, you can't directly use any external constants (or external variables).
5. 
Wrapping constants as internal component property
enum.ts
export enum stateEnum {
  'DOING' = 0,
  'DONE',
  'FAILED'
}
component.ts
import { stateEnum  } from './enum'
export class EnumUserClass {
  readonly stateEnum : typeof stateEnum = stateEnum ;    
}
Example uses enum, but this can be any type of defined constant. typeof operator gives you all of benefits of TypeScript typing features. You can use then this variable directly in templates:
component.html
<p>{{stateEnum.DOING}}<p>
}
}