programmers vocabulary

Wednesday, December 6, 2017

node_modules appears empty, you may need to run 'npm install'

Hi Guys,

You might face the error node_modules appears empty, you may need to run 'npm install' if you try to test an angular 2/4/5 application .

node_modules appears empty, you may need to run 'npm install'

This error occurs when you use the command ng serve.

C:\projects\my-app> ng serve

Note that this command is used to start a server , serving the angular application .

The most common cause of this error is missing node_modules folder in the directory from which you have called ng serve.

To solve this take the following steps.

1. Check , if you have called ng serve from the correct location ? to serve the application you need to navigate to the project folder and then call ng serve .

2. If you are in correct folder , check if you have a folder named node_modules in it.If not your project is incomplete . Create a new application using ng new and replace the src folder of new app with src folder of your existing app.

C:\projects> ng new my-app-new

Copy the src folder in my-app to my-app-new

C:\projects> cd my-app-new
C:\projects\my-app-new> ng serve

3. If you have node_modules folder available and in your app folder then it might be corrupted. To solve this create a new application using ng new and replace the src folder of new app with src folder of your existing app.

Important links
S O

Friday, November 24, 2017

The selector "app-root" did not match any elements

Hi Guys,

You might face this error when we try add a newly created component in Angular 2/4/5.

Let's have a look at the complete stack trace:

ERROR Error: The selector "app-root" did not match any elements
at DefaultDomRenderer2.selectRootElement (platform-browser.js:2791)
at DebugRenderer2.selectRootElement (core.js:14962)
at createElement (core.js:10279)
at createViewNodes (core.js:13409)
at createRootView (core.js:13338)
at callWithDebugContext (core.js:14739)
at Object.debugCreateRootView [as createRootView] (core.js:14040)
at ComponentFactory_.create (core.js:10959)
at ComponentFactoryBoundToModule.create (core.js:3919)
at ApplicationRef.bootstrap (core.js:5730)

This would come if you have placed the newly created component selector in the root component .

Let's look at the working code:

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyFirstApp</title>
<base href="/">

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>

</body>
</html>

Remember this code is working fine , now lets see the erroneous code.

So the error is due to the app-mycomponent which is not present. So , how to fix this error ? You need to add the new component in the app component , not in the index.html.

<app-mycomponent></app-mycomponent>
<div style="text-align:center">
<h1>
Welcome {{title}}!
</h1>
<img width="300" src="xyz">
</div>

Now, we see the output as:

mycomponent works!

TIP

Check Bootstrapping of Angular App

Links:

Refer to similar answers in Stack Overflow site.

Sunday, November 12, 2017

Lexical scoping in JavaScript

If you are familiar with JavaScript you might be aware that JavaScript uses lexical scoping . Now what really is lexical scoping and how is it different than other languages like java ?
What is actually a scope ? A scope is the visibility and accessibility of the variable . So when a JavaScript function tries to refer to a variable , the scope of the variable comes into play . Now lexical scoping means the variable will be accessible to the function only if it was in scope when it was defined.
The key point is variable does have different scopes while definition and execution.

Monday, June 19, 2017

Angular Js

Angular js is mainly used to build single page application . It is based on MVC architecture.

model The form fields act as model , we need to use ng-model attribute to specify the model name.
view The HTML page is the view , which is being displayed to the user
controller We can create a JavaScript function which will be the controller

There are 3 most important components of angular js.

application
controller
service

Common Errors:
Error: [$injector:unpr] Unknown provider: myServiceProvider
When you see this error you need to check if have my service defined for your application.

Click on the buttons inside the tabbed menu:

angular.module("home",home); var home=function (){ }

Wednesday, June 14, 2017

Gradle

Hi Guys,
I have started learning cradle and this blog will help you getting familiar with gradle.

Gradle is a build tool where in you can have a project comprising of tasks.
Your build related details will be mentioned in build.gradle file .
By default the folder name is the rootProject name if you want to configure it change in settings.gradle file.
End.

rootProject=org.myProject

The project inside the root project will be the subProject .
You can specify the dependency in build.gradle as

If you want to use a repository you can use the repository to define it.

repository {
maven{

url "http://testRepo.org"
}

}

Saturday, June 10, 2017

Wildfly 10

Hi Guys, I have started using Wildfly 10 sometime back and here is my guide on how to successfully configure wildfly 10. First of all download it from site.

http://wildfly.org/downloads/

Now, check if you have JAVA in the environment variables .Make sure it is pointed to Java 8.

echo %JAVA%
C:\Program Files\Java\jdk1.8.0_91\jre\bin\java.exe

open command prompt ,goto Wildfly\bin and type the following command

standalone.bat -Djboss.home.dir=\softwares\wildfly_10\wildfly-10.1.0.Final -Djboss.server.config.dir=\softwares\wildfly_10\wildfly-10.1.0.Final\standalone\configuration

If you are using powershell type the following command

.\standalone.bat -Djboss.home.dir=\softwares\wildfly_10\wildfly-10.1.0.Final -Djboss.server.config.dir=\softwares\wildfly_10\wildfly-10.1.0.Final\standalone\configuration

Note : you need to change the path to the path where wildfly installation is.

If you face the following error while starting

Unable to read the logging configuration from 'file:F:\shahbaz\softwares\wildfly_10\wildfly-10.1.0.Final\standalone/logging.properties' (java.io.FileNotFoundException: F:\shahbaz\softwares\wildfly_10\wildfly-10.1.0.Final\standalone\logging.properties (The system cannot find the file specified))

change the -Djboss.server.config.dir to the proper config path.

To find out which port number the http server is running , open standalone.xml and check the following attribute.

<socket-binding name="http" port="${jboss.http.port:8090}"/>

Once you start wildfly hit the following URL http://localhost:8090

Click on admin console and then you might see the following screen.

Run add-user.bat and set the username and password for application as well as management realm

Goto the home page after adding the users

Done with the server configuration . Now you can start playing with the server. So,Lets create a simple application and deploy .We will have a index page which will display a message on load.

<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd"
version="3.1">

<display-name>My App </display-name>
</web-app>

Now build the war file which will be deployed . Type the following command in the console.

"C:\Program Files\Java\jdk1.8.0_91\bin\jar" -cvf myApp.war *

Once you have the war file ready you can deploy it using wildfly admin console.Follow the steps to deploy a war file.

Deploy the selected war file

Lets create servlet jsp project and deploy it.

package org.myApp;

import java.io.IOException;

import javax.servlet.RequestDispatcher;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.myApp.TempConvertor;

public class Converter extends HttpServlet
{
public void doGet(HttpServletRequest request,HttpServletResponse response)throws IOException,ServletException{
try{
String farenhiet=request.getParameter("farenhiet");
if(farenhiet != null ){
String celcius=TempConvertor.farenhietToCelcius(Float.parseFloat(farenhiet));
request.setAttribute("celcius",celcius);
RequestDispatcher requestDispatcher=request.getRequestDispatcher("/conv/result.jsp");
requestDispatcher.forward(request,response);
}
}catch(Exception e){
e.printStackTrace();
RequestDispatcher requestDispatcher=request.getRequestDispatcher("/conv/error.jsp");
requestDispatcher.forward(request,response);
}

}
public void doPost(HttpServletRequest request,HttpServletResponse response){
}
}

public class TempConvertor
{
public static String farenhietToCelcius(float farenhiet){
float celcius =(farenhiet -32 )*5/9;
return String.valueOf(celcius);
}
}

Your code here.

Wednesday, May 31, 2017

org.dom4j.DocumentFactory cannot be cast to org.dom4j.DocumentFactory

Hi Guys , You might face this exception when using wildfly 10 with hibernate. This exception is linked with the classloader since the same class is loaded by two different class loaders. You can the following solution

<dependency>
<groupId>org.hibernate</groupId>
<artifactId>hibernate-core</artifactId>
<version>5.1.0.Final</version>
<scope>provided</scope>
</dependency>

programmers vocabulary

Wednesday, December 6, 2017

node_modules appears empty, you may need to run 'npm install'

Friday, November 24, 2017

The selector "app-root" did not match any elements

Sunday, November 12, 2017

Lexical scoping in JavaScript

Monday, June 19, 2017

Angular Js

Wednesday, June 14, 2017

Gradle

Saturday, June 10, 2017

Wildfly 10

Wednesday, May 31, 2017

org.dom4j.DocumentFactory cannot be cast to org.dom4j.DocumentFactory

ec2-user@ec2 Permission denied

Followers

Labels