Migrating Apps to Java 10

If you’re using Maven, set the compiler source/target version to 10 like the following:

<properties>
    <maven.compiler.source>10</maven.compiler.source>
    <maven.compiler.target>10</maven.compiler.target>
</properties>

You don’t need to expliclty add build plugin to configure the maven-compiler-plugin for jdk version.

if you’re coming from JDK 8, you might face this common exception.

Caused by: java.lang.ClassNotFoundException: javax.xml.bind.JAXBException at java.base/jdk.internal.loader.BuiltinClassLoader.loadClass(BuiltinClassLoader.java:582) at java.base/jdk.internal.loader.ClassLoaders$AppClassLoader.loadClass(ClassLoaders.java:185) at java.base/java.lang.ClassLoader.loadClass(ClassLoader.java:496) … 15 more

JAXB is moved into its own modulejava.xml.bind, you need to explicitly specify the dependencies.  You can use the command-line option --add-modules java.xml.bind to fix the issue.  Likewise, you might face ClassNotFound exception for javax/activation/DataSourceclass.

Since Java 9 deprecated the six Java EE API’s (JAXB is one of them), it’s better to add them as dependency (–add-modules probably will not work in Java 10).

<dependency>
    <groupId>javax.xml.bind</groupId>
    <artifactId>jaxb-api</artifactId>
    <version>2.2.8</version>
</dependency>
<dependency>
    <groupId>javax.activation</groupId>
    <artifactId>activation</artifactId>
    <version>1.1.1</version>
</dependency>

 

Refer: https://stackoverflow.com/questions/48204141/replacements-for-deprecated-jpms-modules-with-java-ee-apis/48204154#48204154

 

 

Debugging Angular Applications in Intellij & WebStorm

 

Intellij IDEA (Ultimate Edition) and Webstorm has excellent support for developing & debugging Angular applications.

Before digging into the debugging part, you need to have the following plugins installed:

1. Javascript Support (which includes Typescript)
2. Javascript Debugger
3. AngularJS (which includes Angular 2+)
4. Karma (optional)

You also need to install the JetBrains IDE Support extension in Google Chrome. If you’re using Firefox, then you’re out-of-luck, Jetbrains stopped supporting Firefox.

Chrome Extension Link: https://chrome.google.com/webstore/detail/jetbrains-ide-support/hmhgeddbohgjknpmjagkdomcpobmllji?utm_source=chrome-ntp-icon

Both Intellij & WebStorm uses built-in web server running in port 63342 for debugging any javascript applications.

To debug the angular project, you need to create a new debug configuration:

1. Go to Run -> Edit configurations.
2. Click the + button (Add New Configuration) and select the JavaScript Debug.
3. Change the name of the configuration as you like and change the URL with your application local development url which is usually http://localhost:4200/.
4. And click ok to save the configuration.

Now you’re IDE configuation is ready to run. You need to start the local development web server using ng serve.

1. Run the ng server command in the terminal to start the development server.
2. Run the debug configuration from IDE: Go Run -> Debug -> Your debug configurationn name.

It’ll open your application in the chrome browser with debugging enabled.

You can put a breakpoint anywhere in your angular codebase and debug the application.

Intellij and WebStorm supports liveEdit for html pages. As you edit the content, you can see that reflect in the browser and also it will highlight the selected block of code in the browser. That’s it!.. Happy Hacking!…

Angular 2 with JQuery – Part 1

I’ve seen people saying that there are problems with angular and jquery working together. To me, it’s not a single problem. Since angular uses/prefers typescript by default, it’s kind of combination of JQuery + Typescript + Angular. So, I decided to write about the problems people generally face during the development in a series of blog posts. This is the Part 1 of the series and meant for the beginners.

As a note, when I say Angular, it means Angualr 2.x and above (including Angular 4).

In  general, it’s not recommended to use more than one way to access/manipulate the DOM. Angular already does a nice job when it comes to DOM manipulation. You should be using Angular if you’re starting a new project.

But for the exising projects which uses JQuery extensively, you don’t have an option.

You may want to migrate to Angular, but it’s possible at once. You have to do it iteratively. So for the time being, you might want to use both angular and jquery at the same time.

Let’s start with a simple component.

import { Component, OnInit } from "@angular/core";

@Component({
  selector: 'app-root',
  template: `Click Me!`
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
  }
}

This is a plain angular component which simply shows a button called ‘Click Me’. If you click that button in browser, it’ll display you an alert message. Let’s add jquery on top of this and will make it more interesting.

npm install --save jquery

Here, I just installed jquery node module into project and saved it in package.json file.

If you’re using angular-cli for bootstrapping the project, then you need to tell the webpack (default build tool in angular-cli) to include the jquery during the build, so that it’ll be availble for your browser at runtime.

To do that, just replace the existing empty scripts block with this lines in your .angular-cli.json file.

"scripts": [
  "../node_modules/jquery/dist/jquery.min.js"
],

Now the setup is over!… We can start using it right away.

import { Component, OnInit } from "@angular/core";

declare var jQuery: any;

@Component({
  selector: 'app-root',
  template: `Click Me!`
})
export class AppComponent implements OnInit {
  ngOnInit(): void {
    jQuery('button').click();
  }
}

Here, I declared a type called jquery so that typescript compiler will not complain me about its usage. Since it’s declared as any, you can call any method on it. But in runtime (i.e, inside your browser), jquery variable will be interpretted as the actual jquery. So, it’ll work in the runtime.

If you run the above example, you’ll see an alert message when loading the page. That means, jquery is working with angular and typescript.

I won’t recommend to include this kind of logic in the ngOnInit() method in real applications.

PS: I used the following version of packages for this example. Angular 2.4.9, Typescript 2.0.0, Angular Cli 1.0.0-rc.1 & JQuery 3.1.1.