unable to marshal type as an element because it is missing an @XmlRootElement annotation

Hi Guys,

This blog is about the error while serializing an xml.

javax.xml.bind.MarshalException
 - with linked exception:
[com.sun.istack.internal.SAXException2: unable to marshal type "test.serializeXML.Request" as an element because it is missing an @XmlRootElement annotation]
at com.sun.xml.internal.bind.v2.runtime.MarshallerImpl.write(MarshallerImpl.java:311)
at com.sun.xml.internal.bind.v2.runtime.MarshallerImpl.marshal(MarshallerImpl.java:236)
at javax.xml.bind.helpers.AbstractMarshallerImpl.marshal(AbstractMarshallerImpl.java:103)
at test.serializeXML.SerializeXML.serialize(SerializeXML.java:16)
at test.Test1.test(Test1.java:16)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at org.junit.internal.runners.TestMethod.invoke(TestMethod.java:59)
at org.junit.internal.runners.MethodRoadie.runTestMethod(MethodRoadie.java:98)
at org.junit.internal.runners.MethodRoadie$2.run(MethodRoadie.java:79)
at org.junit.internal.runners.MethodRoadie.runBeforesThenTestThenAfters(MethodRoadie.java:87)
at org.junit.internal.runners.MethodRoadie.runTest(MethodRoadie.java:77)
at org.junit.internal.runners.MethodRoadie.run(MethodRoadie.java:42)
at org.junit.internal.runners.JUnit4ClassRunner.invokeTestMethod(JUnit4ClassRunner.java:88)
at org.junit.internal.runners.JUnit4ClassRunner.runMethods(JUnit4ClassRunner.java:51)
at org.junit.internal.runners.JUnit4ClassRunner$1.run(JUnit4ClassRunner.java:44)
at org.junit.internal.runners.ClassRoadie.runUnprotected(ClassRoadie.java:27)
at org.junit.internal.runners.ClassRoadie.runProtected(ClassRoadie.java:37)
at org.junit.internal.runners.JUnit4ClassRunner.run(JUnit4ClassRunner.java:42)
at org.eclipse.jdt.internal.junit4.runner.JUnit4TestReference.run(JUnit4TestReference.java:86)
at org.eclipse.jdt.internal.junit.runner.TestExecution.run(TestExecution.java:38)
at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.runTests(RemoteTestRunner.java:538)
at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.runTests(RemoteTestRunner.java:760)
at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.run(RemoteTestRunner.java:460)
at org.eclipse.jdt.internal.junit.runner.RemoteTestRunner.main(RemoteTestRunner.java:206)
Caused by: com.sun.istack.internal.SAXException2: unable to marshal type "test.serializeXML.Request" as an element because it is missing an @XmlRootElement annotation
at com.sun.xml.internal.bind.v2.runtime.XMLSerializer.reportError(XMLSerializer.java:234)
at com.sun.xml.internal.bind.v2.runtime.ClassBeanInfoImpl.serializeRoot(ClassBeanInfoImpl.java:323)
at com.sun.xml.internal.bind.v2.runtime.XMLSerializer.childAsRoot(XMLSerializer.java:479)
at com.sun.xml.internal.bind.v2.runtime.MarshallerImpl.write(MarshallerImpl.java:308)
... 26 more

Invalid '@FunctionalInterface' annotation; Greeting is not a functional interface

Lambda expressions are allowed only at source level 1.8 or above https://stackoverflow.com/questions/22544064/java-8-lambdas-dont-work-everything-else-from-java-8-works-though

StaticInjectorError NullInjectorError: No provider for MyService

Hi Guys,

You might have faced an error like "StaticInjectorError NullInjectorError: No provider for MyService".

This error comes when you try to create a service and something goes wrong.

Let's see the full stack trace.

ERROR Error: StaticInjectorError[MyService]: 
  StaticInjectorError[MyService]: 
    NullInjectorError: No provider for MyService!
    at _NullInjector.get (webpack-internal:///../../../core/esm5/core.js:1189)
    at resolveToken (webpack-internal:///../../../core/esm5/core.js:1477)
    at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1419)
    at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1290)
    at resolveToken (webpack-internal:///../../../core/esm5/core.js:1477)
    at tryResolveToken (webpack-internal:///../../../core/esm5/core.js:1419)
    at StaticInjector.get (webpack-internal:///../../../core/esm5/core.js:1290)
    at resolveNgModuleDep (webpack-internal:///../../../core/esm5/core.js:11074)
    at NgModuleRef_.get (webpack-internal:///../../../core/esm5/core.js:12306)
    at resolveDep (webpack-internal:///../../../core/esm5/core.js:12804)


I have few tips which will help you Debug this.

Let's see the working code

import { Component, OnInit } from '@angular/core';
import { MyService } from './myapp.service';


@Component({
  selector: 'app-question',
  templateUrl: './myapp.component.html',
  styleUrls: ['./myapp.component.css'],
  providers:[MyService ]
})
export class MyComponent implements OnInit {

  constructor(private myService:MyService ) { }
  //constructor() { }
  ngOnInit() {

this.data=this.myService.loadData();
console.log(data);
  }
var data={};

}

In the above code I have successfully created a service .You need to check if you have specified the service in providers.If you have not added ,add it in the provider attribute of @Component decorator .

Apart from this you need to add the service to app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';
import { MyService } from './myapp.service';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule
  ],
  providers: [MyService],
  bootstrap: [AppComponent]
})
export class AppModule { }

directive in Angular 5

Uncaught Error: Encountered undefined provider

Hi Guys,

Here is how you can fix the issue "Uncaught Error: Encountered undefined provider" . Have a look at the stack trace below.


compiler.js:485 

Uncaught Error: Encountered undefined provider! Usually this means you have a circular dependencies (might be caused by using 'barrel' index.ts files.
    at syntaxError (compiler.js:485)
    at eval (compiler.js:15725)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (compiler.js:15710)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (compiler.js:14994)
    at CompileMetadataResolver._getEntryComponentMetadata (compiler.js:15812)
    at eval (compiler.js:15293)
    at Array.map (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (compiler.js:15293)
    at JitCompiler._loadModules (compiler.js:34226)


To find out which part of the code is throwing  this error , first have a check in the component.ts file.
Check the value of provider attribute in the @Component decorator .

Invalid providers for "AppComponent" - only instances of Provider and Type are allowed

Hi Guys,

You might have faced the issue "Invalid providers for "AppComponent" - only instances of Provider and Type are allowed" .

The full stack trace is as below:

Uncaught Error: Invalid providers for "AppComponent" - only instances of Provider and Type are allowed, got: [?./user.service.ts?]
    at syntaxError (webpack-internal:///../../../compiler/esm5/compiler.js:706)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:15963)
    at Array.forEach (<anonymous>)
    at CompileMetadataResolver._getProvidersMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:15931)
    at CompileMetadataResolver.getNonNormalizedDirectiveMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:15215)
    at CompileMetadataResolver._getEntryComponentMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:16033)
    at eval (webpack-internal:///../../../compiler/esm5/compiler.js:15514)
    at Array.map (<anonymous>)
    at CompileMetadataResolver.getNgModuleMetadata (webpack-internal:///../../../compiler/esm5/compiler.js:15514)
    at JitCompiler._loadModules (webpack-internal:///../../../compiler/esm5/compiler.js:34447)



To find the root cause of the issue first check the providers attribute of @Component decorator in the component.ts file.

If the value is anything other than a valid Typescript type you will get the above error.

property binding in Angular 5

Hi Guys,

Let's understand what is property binding in angular 5.

We all know that an HTML element has various properties like id , name , value, etc. . Angular provides a way to bind to the property of HTML elements , called property binding .

There are multiple use cases that can be simplified using property binding like , if you have to change the value of a text field dynamically , or enable/disable a button. Let's see how can we do it.

First create an html file which will act as a component . Name this file as test.component.html , in this file have a text field . To bind a property we need to put the property in []. Here we are going to bind the value property , so I have placed value in square brackets . Since I am going to bind this property to a dynamic value , I will do so by assigning the property to a variable myValue.

<input type="text" [value]="myValue">

You need to define myValue in the component file . So , create a typescript file and name it as test.component.ts . The content of the file should be as below.

import { Component } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html'
})
export class TestComponent {
myValue="test";
}

Finally update your index.html as 

<app-test></app-test>

That's all , verify the code by refreshing the localhost:4200 in chrome browser . You will see the output as

---