DEV Community: APD

Deploying your angular application to GitHub-pages

APD — Fri, 08 Nov 2019 17:27:52 +0000

In this article, you will learn how to deploy your angular application to GitHub pages.

Let us go through the following steps,

Create your angular app with Angular CLI
Create a git repository
Push your changes from local repository
Deploy
Get through the hurdles (optional)
Safety tips

Create your angular app with Angular CLI

ng new my-app --routing=true --style=scss

Now move to the project folder

cd my-app

Install all the dependencies

npm install

Check your application locally

ng s -o

Create a git repository

1 . Log in to your github account
2 . On the top-right corner click the + icon and then select new repository
3 . Check the “Initialize this repository with a README” if you need a README file to document your project, else just ignore it
4 . Now go ahead and click the “Create repository” button

Push your changes from local repository

Again go to the terminal/command window and initialize your local application with git

git init

Check the status of the upstages files

git status

To stage all the changes use

git add .

Commit all the stages changes to your initial commit with a message

git commit -m "Initial commit"

(If you miss this step, you will get an error saying “src refspec master does not match any.” So don’t forget your commit)

Now set your origin to the remote repository

git remote add origin https://github.com/<username>/my-app.git

While connecting over HTTPS is recommended by GitHub, If you still don’t want to type the GitHub password each and everytime you commit, just use the below command instead of the previously mentioned one.

git remote add origin git@github.com:<username>/<remote_repo_name>

But be sure to setup SSH in your device before using this method.

Did you get ‘Github “fatal: remote origin already exists”’ error?
Then use,

git remote rm 
git remote add origin https://github.com/<username>/my-app.git

This will remove the associated origin from remote and add it again.
Note: git remote rm does not delete the remote repository from the server. It simply removes the remote and its references from your local repository.

Now push all changes to remote repository

git push origin master

Deploy

Since you have pushed everything to your remote, you are now ready to deploy your application.

Build your application with “--prod” for production mode and provide the --base-href to which link your application has to be hosted. In your case this would be

ng build --prod --base-href "https://<username>.github.io/my-app/"

If everything is fine, then continue. Else go to the 2nd troubleshoot of the “Get-through the hurdles” section below and comeback soon.

If you don’t have angular-cli-ghpages installed globally in your system,

npm install -g angular-cli-ghpages

Now deploy,

angular-cli-ghpages --dir=dist/angular-app

Angular 6 & below

angular-cli-ghpages

Did you get a message “Successfully published!” ? Hooray!!! You have deployed your app successfully!

Now goto https://username.github.io/my-app/(the link provided by you as the “base-href”) and check your application up and running.

For updating your application with any new changes, just commit, push and follow the steps mentioned under the topic “Deploy”.
Note: After your first deployment, you don’t need to use the “--base-href” flag again as it is already set.

Why do we provide --dir in newer versions?
In older versions(6 or below) the output folder is dist itself.
But in newer versions the output folder is dist/project-name/ by default. To output to a different folder, change the outputPath in angular.json.

Get-through the hurdles

1 . After creating your remote repository, if you receive some message saying: “We found a vulnerable dependency in a repository you have security alert access to.”,
open a terminal/command window on your project location and then run

npm audit fix

This will fix your problem

2 . While running ‘ng build --prod --base-href "https://username.github.io/my-app/“‘ some of you may have got the below error

Error: Schema validation failed with the following errors: Data path ".builders['app-shell']" should have required property 'class'. at MergeMapSubscriber._registry.compile.pipe.operators_1.concatMap.validatorResult [as project] (/Users/<username>/git/my-app/node_modules/@angular-devkit/core/src/workspace/workspace.js:215:42) at MergeMapSubscriber._tryNext (/Users/<username>/git/my-app/node_modules/rxjs/internal/operators/mergeMap.js:69:27) at MergeMapSubscriber._next (/Users/<username>/git/my-app/node_modules/rxjs/internal/operators/mergeMap.js:59:18) at MergeMapSubscriber.Subscriber.next (/Users/<username>/git/my-app/node_modules/rxjs/internal/Subscriber.js:67:18) at MergeMapSubscriber.notifyNext (/Users/<username>/git/my-app/node_modules/rxjs/internal/operators/mergeMap.js:92:26) at InnerSubscriber._next (/Users/<username>/git/my-app/node_modules/rxjs/internal/InnerSubscriber.js:28:21) at InnerSubscriber.Subscriber.next (/Users/<username>/git/my-app/node_modules/rxjs/internal/Subscriber.js:67:18) at MapSubscriber._next (/Users/<username>/git/my-app/node_modules/rxjs/internal/operators/map.js:55:26) at MapSubscriber.Subscriber.next (/Users/<username>/git/my-app/node_modules/rxjs/internal/Subscriber.js:67:18) at SwitchMapSubscriber.notifyNext (/Users/<username>/git/my-app/node_modules/rxjs/internal/operators/switchMap.js:86:26)

To fix this,
Goto your working directory
Delete the node_modules folder
Also delete package_lock.json file

Now open package.json file
In the “devDependencies” change the “@angular-devkit/build-angular” version to "~0.13.4"

Run

npm install

Safety tips

In your GitHub pages repo settings, be sure that you have checked the Enforce HTTPS option
While deploying, always provide your --base-href with a https prefix rather than a http.

Reason:

Otherwise you may get few errors like,

Mixed Content: The page at ‘<your_gpages_remote_url>’ was loaded over HTTPS, but requested an insecure stylesheet ‘<url_provided_with_http_prefix_while_deploying>/styles.acb808cb000123f5c6ec.css'. This request has been blocked; the content must be served over HTTPS.

Ways to fix “-bash: ng: command not found”

APD — Sat, 02 Nov 2019 21:20:27 +0000

What you have already tried



ng version

or any other ng commands.

Error produced by the previous command



-bash: ng: command not found

Before heading into the fix, let me ask a question

Are you sure that Angular is globally installed in your machine? If yes, you can continue to read this article. Else I recommend you to visit the official Angular site and get the latest version installed :)

This problem is caused due to the reason that npm is unable to find ng. There are few ways that we can follow to get rid of this error.

1 . Linking angular/cli with npm

This can be done using the command,



npm link @angular/cli

2. Setting the location of npm folder



export PATH="$HOME/.npm-global/bin:$PATH"



export PATH="$HOME/.npm-packages/bin:$PATH"

3. Clearing cache and Re-installing Angular (least recommended)

In this case, you may need to uninstall angular from your machine with the command



npm uninstall -g @angular/cli
npm cache clean
npm install -g @angular/cli

4. Giving an alias to ng path

To do this you must know the full path of your angular installation. For example: “/Users/<username>/.npm-global/lib/node_modules/@angular/cli/bin/ng”. So the command would be



alias ng="/Users/Dharshini/.npm-global/lib/node\_modules/@angular/cli/bin/ng"

Note that the above option works for many users but the problem is that this is just a temporary solution. It means that this command works only on your current terminal (same terminal where you ran the above command). Once you close and open a new terminal, the problem seems to reappear.

So how can we permanently solve this? Here comes the solution. Credits: Thanks for this fix.

5 . By adding the PATH directly to the Mac OS terminal

Before doing this we just have to verify whether angular is installed to the base of the user. To check this, in your terminal enter



cd ~

to get to the base of your files. Then in order to list all your base files, enter



ls -a

Now you must see “.npm-global” listed in the files.

If its not there, again I recommend you to install Angular using the official documentation link I have mentioned in the beginning.

If the folder is listed, you are good to go. Go back to the base of the user using the command



cd ~

Here we are going to edit the paths using vim editor. Use “sudo” in front of the command to avoid permission issues. Here you will be prompted to enter the device’s password.



sudo vim /etc/paths

The editor now opens a file containing some paths as shown below. All you have to do here is to insert the path of .npm-global/bin to the list. To do so you have to press insert from your mac keyboard (press fn + i key combination), navigate to the bottom of the list and add ~/.npm-global/bin as I have added below.



/usr/local/bin
/usr/bin
/bin
/usr/sbin
/sbin
~/.npm-global/bin
~ 
~

Now to save your changes and exit, press ESc key and then type :wq vim command which means to write/save the changes and quit. This will bring you back to the terminal window. Now restart your terminal and type

echo $PATH

This should give you all the paths with the newly added one concatenated at the end.

/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:~/.npm-global/bin

Finally the happy ending. Try any ng command



ng version

There you go! Thanks for reading this article. Have a great day!

Difference between Arrays and JSON Objects

APD — Thu, 16 May 2019 22:08:55 +0000

Sometimes most of us get confused while dealing with Arrays and Objects. This leads into further confusions when choosing which manipulation technique to use. For example, we can find the length only if we know whether it is an array or an object. As both have different approaches.

This is a basic checklist for all the programmers coding out there. So, in this blog you will learn how to differentiate between Arrays and Objects.

What are Arrays?

Array items are accessed using indices

Format [ , , , ]

Example [1, 2, 3, 4, 5]

Arrays can contain objects, strings, numbers, arrays & boolean.

Initialization

1. _datatype_[] = [, , ,];

2. Array\<_datatype_\> = [, , ,]; // _Uses a generic array type_

Array of objects

Syntax :

[{“ “:” “,” “:” “},{“ “:” “,” “:” “}]

Example:

[
 { “position”: “winner”,”country”: “U.S.A” },

{ “position”: “runner”,”country”: “China” }

];

[
 { “rainy”: true,”sunny”: false },

{ “rainy”: false,”sunny”: true }

]

Array of strings

Example:

[‘Sunday’, ‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’,’Friday’, ‘Saturday’];

[‘a’, ‘b’, ‘c’, ‘d’];

[‘1’, ‘2’, ‘3’, ‘4’, ‘5’, ’6’, ‘7’];

Array of numbers

Example:

[1, 2, 3, 4, 5];

[788.34, 432.34, 3234.72];

Array of arrays

These can be otherwise called as multi-dimensional arrays.

[

[1, 2, 3, 4, 5, 6, 7],

[1, 2, 3, 4, 5, 6, 7],

[1, 2, 3, 4, 5, 6, 7],

[1, 2, 3, 4, 5, 6, 7],

[1, 2, 3, 4, 5, 6, 7],

[1, 2, 3, 4, 5, 6, 7]

];

Array of booleans

[true, false, false, true]

What are Objects?

An object is a collection of properties, and a property is an association between a name (or key) and a value. A property’s value can be a function, in which case the property is known as a method.

Object properties are accessed using keys.

Keys must be strings, and values must be a valid JSON data type (string, number, object , array, boolean or null).

Format { “ ”: “ ” }

Example {“position”: “winner”,”country”: “U.S.A”}

Object of arrays and objects

{

“binary”: [{“id”:1,”name”:0},{“id”:2,”name”:1}],

“boolean”: [{“id”:1,”value”: false},{“id”:2,”value”: true}]

}

Nested Objects:

“results”: {

“tennis”: [
 {“position”: “winner”,“country”: “U.S.A},

{“position”: “runner”,“country”: “China”}
 ]

}

Object of objects

JSON Objects are enclosed within {}

“universe”: {

“planets”: {

“day”: “Sun”,

“night”: “Moon”

}

}

Nested JSON Object:

json: any = {

"visible": true,

"colors": {

"data": {

"darkest": "Black",

"lightest": "white",

"neutral": "Grey",

"spectrum": {

"1": "Violet",

"2": "Indigo",

"3": "Blue",

"4": "Green",

"5": "Yellow",

"6": "Orange",

"7": "Red"

},

"default": "Grey",

"primary": "Blue",

"danger": "Red",

"warning": "Yellow",

"success": "Green",

"RGB": {

"r": "Red",

"g": "Green",

"b": "Blue"

}

}

}

}

So these are the differences between Arrays and Objects. I hope that from now you all can use these types without any worries.

Happy coding :)

Understanding the usage of optional and nullable in TypeScript

APD — Mon, 22 Oct 2018 11:16:20 +0000

Angular is being widely used by developers as a front-end web application development platform. As an open-source platform, Angular is built with TypeScript, a superset of JavaScript. It is good for Angular developers to have an understanding of how things happen with TypeScript. So, in this article, let us discuss about some of the differences between nullable and optional parameters.

Common misconception

Most developers fall into the category of misunderstanding nullable and optional parameters. The confusion arises on where to use the “ ? ”. Look at this code block.

function example(x: number?, y?: string) {
 // …
}

“?” Suffix

Notice carefully where the “?” is suffixed. In the first argument it is suffixed to the type of the parameter whereas in the second, it is suffixed to the name of the argument. Do you think both are same?

The answer is no. The first one indicates a nullable parameter that can also be a number, undefined or null. But, the second argument is an optional , it can be a string or undefined.

x // =\> number | undefined | null
y // =\> number | undefined

Undefined vs Null

Again here some may not be aware of the difference between “ undefined ” and “ null ”. Undefined represents something that may not exist. Null is used for things that are nullable. So both are entirely different.

[@Optional]

So what is this @Optional in angular is all about? What is the difference between “?” and @Optional? As the official document says, Optional is a constructor parameter decorator that marks a dependency as optional. This clearly states that @Optional is used in the context of DI (Dependency Injection). Here is an example from the official docs.

@Injectable()
class Car {
  constructor(@Optional() public engine: Engine) {}
}

When @Optional is used, no exceptions occur even when the injected dependency is undefined. It treats the dependency as optional. Same thing happens if we replace @Optional annotation with “ ?”. The injector will search for the dependency and when it is undefined, it will throw the exception.

It is always nice to follow the best practices and learn something new :)

Account activation by sending email confirmation with Java Spring MVC

APD — Mon, 20 Aug 2018 19:48:13 +0000

In this article, you will learn how to implement user registration with email confirmation. Basically, after the registration process, a new user is created behind the scenes. But the user cannot log into the application as the account is by default locked. To activate the user account we need a confirmation from the user. That is why we send a link to verify the registration process and activate the user account if the user clicks on the link.

Assuming that you already know how to register a new user, we are now heading towards the email verification part. (In case you don’t have any idea about how to register a new user, you may have a look at the GitHub repository mentioned at the end of this article).

We are going to modify few files that we have already created while implementing the user registration process. Apart from this, we are going to add the following new files to our project.

Entity — VerificationToken.java
Repository layers — TokenDAO.java, ITokenDAO.java
Package — event
event > Event — OnRegistrationSuccessEvent.java
event > EventListener — RegistrationEmailListener.java

First we are going to start with our AccountController.java. The user fills the registration form and clicks submit. Onsubmit, the User object with the data is posted to the registerNewUser method with the following method signature.

AccountController.java

public String registerNewUser(@ModelAttribute(“user”) UserDTO userDto, BindingResult result, WebRequest request, Model model) { … }

Note : Please ensure that you give the parameters in the same order as above. Changing this order may give you some unwanted errors.

Always make sure that you do not use your entity directly on your controller as it may put your application into security vulnerabilities. (i.e., you may expose the entire domain model to the client. We really don’t want this to happen). So make use of a Data Transfer Object (DTO) as a middle layer to acces the entity.

We recall few steps from the registration process here,

Initialize a new User object.
Find that the user already exists.
If user already exists, we show an error message else we create a new user and assign the user to the newly initialized User object

AccountController.java

User registeredUser = new User();

String userName = userDto.getUserName();

if (result.hasErrors()) {

return “registration”;

}

registeredUser = service.findByUsername(userName);

if(registeredUser!=null) {

model.addAttribute(“error”,”There is already an account with this username: “ + userName);

return “registration”;

}

registeredUser = service.registerUser(userDto);

Now let’s move into the confirmation of user via email.

Before going to the controller code, we have to first create the Event and EventListener in order to send the email on successful registration of the user.

This will be our event,

OnRegistrationSuccessEvent.java

public class OnRegistrationSuccessEvent extends ApplicationEvent {

private static final long serialVersionUID = 1L;

private String appUrl;

private User user;

public OnRegistrationSuccessEvent(User user, String appUrl) {

super(user);

this.user = user;

this.appUrl = appUrl;

}

public String getAppUrl() {

return appUrl;

}

public void setAppUrl(String appUrl) {

this.appUrl = appUrl;

}

public User getUser() {

return user;

}

public void setUser(User user) {

this.user = user;

}

Events must always inherit the ApplicationEvent class of Spring that is inherited from the java.util.EventObject. We have three variables serialVersionUID, appurl and user.

It is strongly recommended that all serializable classes explicitly declare serialVersionUID values, otherwise it may result in unexpected InvalidClassExceptions during deserialization. To know more visit the Java docs for java.io.Serializable

appurl is the context path to our application and user is the new user object. These two variables construct the confirmation url. However, we do not use the serialVersionUID in our url. And finish the Event creation with the implementation of the basic getters/setters and constructors.

Next is we have to build an EventListener to handle the OnRegistrationSuccessEvent. We name our EventListener as RegistrationEmailListener.java and give it the @Component annotation. This will be responsible for sending our confirmation email to the newly registered user. The RegistrationEmailListener inherits the ApplicationListener that Listens to our OnRegistrationSuccessEvent event.

@Component

public class RegistrationEmailListener implements ApplicationListener\<OnRegistrationSuccessEvent\> { … }

Inside this class, we will do the Dependency Injection for the IUserService and MailSender with the @Autowired annotaion of Spring.

@Autowired

private IUserService userService;

@Autowired

private MailSender mailSender;

Then we will override onApplicationEvent , the method defined by the org.springframework.context.ApplicationListener. Inside this we are going to call the confirmRegistration method that we will create in the next few steps.

@Override

public void onApplicationEvent(OnRegistrationSuccessEvent event) {

this.confirmRegistration(event);

}

The confirmRegistration method takes OnRegistrationSuccessEvent as its parameter.

private void confirmRegistration(OnRegistrationSuccessEvent event) { … }

Then we will initialize the user with the passed parameter. Each user must have a unique id because at this point we are still unaware that the new user have been already registered. For this, we create a unique token using the UUID. Using this UUID, we are going to create a verification token along with an expiration date and save it to the VerificationToken table in the database. When the user clicks the link, the verification token helps us to identify whether the confirmation link is valid and is not expired. We create this token in the createVerificationToken method implemented in the UserService.

RegistrationEmailListener.java

User user = event.getUser();

String token = UUID.randomUUID().toString();

userService.createVerificationToken(user,token);

IUserService.java

public void createVerificationToken(User user, String token);

UserService.java

@Override 
public void createVerificationToken(User user, String token) { VerificationToken newUserToken = new VerificationToken(token, user); tokenDAO.save(newUserToken); 
}

After saving the verification token, we will now generate the confirmation email that has to be sent to the user. Get the recipient from the user object. Then set the email subject text to whatever you want. But I recommend you to give a subject related to the email message. (i.e., Registration Confirmation.) Then we create the url by concatenating the appurl with the route to the method that activates the user and with the user token (i.e., UUID ). We will then generate the message to be sent along with the email.

String recipient = user.getEmail();

String subject = “Registration Confirmation”;

String url

= event.getAppUrl() + “/confirmRegistration?token=” + token;

String message = “Thank you for registering. Please click on the below link to activate your account.”;

Now we have all the necessary data and we are going to send the email using the SimpleMailMessage.

SimpleMailMessage email = new SimpleMailMessage();

email.setTo(recipient);

email.setSubject(subject);

email.setText(message + “http://localhost:8080" + url);

mailSender.send(email);

Create the SimpleMailMessage bean and set the SMTP mail settings in the Config.java file.

@Bean(name = “mailSender”)

public MailSender javaMailService() {

JavaMailSenderImpl javaMailSender = new JavaMailSenderImpl();

javaMailSender.setHost(“smtp.gmail.com”);

javaMailSender.setPort(587);

javaMailSender.setProtocol(“smtp”);

javaMailSender.setUsername(“sender’s email”);

javaMailSender.setPassword(“sender’s password”);

Properties mailProperties = new Properties();

mailProperties.put(“mail.smtp.auth”, “true”);

mailProperties.put(“mail.smtp.starttls.enable”, “true”);

mailProperties.put(“mail.smtp.debug”, “true”);

javaMailSender.setJavaMailProperties(mailProperties);

return javaMailSender;

}

@Bean

public MessageSource messageSource() {

final ReloadableResourceBundleMessageSource messageSource = new ReloadableResourceBundleMessageSource();

messageSource.setBasename(“classpath:messages”);

messageSource.setUseCodeAsDefaultMessage(true);

messageSource.setDefaultEncoding(“UTF-8”);

messageSource.setCacheSeconds(0);

return messageSource;

}

Now we have to create the VerificationToken Entity inside the entity package of your application.

VerificationToken.java

@Entity

@Table(name = “verification\_token”)

public class VerificationToken {

private static final int EXPIRATION = 60 \* 24;

@Id

@GeneratedValue(strategy = GenerationType.IDENTITY)

private int id;

@Column(name=”token”)

private String token;

@OneToOne(targetEntity = User.class, fetch = FetchType.EAGER)

@JoinColumn(name = “user\_id”, nullable = false)

private User user;

@Column(name=”created\_date”)

private Date createdDate;

@Column(name=”expiry\_date”)

private Date expiryDate;

Generate the basic getters/setters and the constructors for the entity. We will create the calculateExpiryDate method to calculate the expiration date of the verification token.

VerificationToken.java

private Date calculateExpiryDate(int expiryTimeInMinutes) {

Calendar calendar = Calendar.getInstance();

calendar.setTime(new Timestamp(calendar.getTime().getTime()));

calendar.add(Calendar.MINUTE, expiryTimeInMinutes);

return new Date(calendar.getTime().getTime());

}

Then we are going to initiate the publishEvent in order to send the email to the user. After the email has successfully sent, the user will receive a success message.

AccountController.java

try {

String appUrl = request.getContextPath();

eventPublisher.publishEvent(new OnRegistrationSuccessEvent(registeredUser, appUrl));

}catch(Exception re) {

re.printStackTrace();

}

return “registrationSuccess”;

The user receives an email with the following format,

Thank you for registering. Please click on the below link to activate your account. http://localhost:8080/spring-email-verification/confirmRegistration?token=3e5a64c7-dbb1-4179-be48-be9361703457

After the user clicks the link:

Now when the user clicks the link, he/she gets directed to the path /confirmRegistration .

AccountController.java

@GetMapping("/confirmRegistration")

public String confirmRegistration(WebRequest request, Model model,@RequestParam("token") String token) {

VerificationToken verificationToken = service.getVerificationToken(token); 
 if(verificationToken == null) { 
 String message = messages.getMessage("auth.message.invalidToken", null, locale); 
 model.addAttribute("message", message); 
 return "redirect:access-denied"; 
 }

User user = verificationToken.getUser(); 
 Calendar calendar = Calendar.getInstance(); 
 if((verificationToken.getExpiryDate().getTime()-calendar.getTime().getTime())\<=0) { 
 String message = messages.getMessage("auth.message.expired", null, locale); 
 model.addAttribute("message", message); 
 return "redirect:access-denied"; 
 }

user.setEnabled(true); 
 service.enableRegisteredUser(user); 
 return null; 
}

Here the GET method is called and it first checks whether the token is valid. If not valid, we are going to pass an error stating that the link is invalid. Then we will check the expiration of the token. If the link is valid in both the cases, we will activate the user with the setteruser.setEnabled(true).

Finally, in the UserService we will update the database with the new values.

IUserService.java

public void enableRegisteredUser(User user);

UserService.java

@Override 
@Transactional 
public void enableRegisteredUser(User user) { 
 userDAO.save(user); 
}

So, we have successfully implemented the user account confirmation process with Spring. You can find the complete code in this Github repository.

Thank you for visiting my blog :)