How to fix Angular page refresh error #404 error

We can fix the 404 error or page refresh error using angular HashLocationStrategy. Simply follow the steps and fix the page refresh error in you angular application.

1. First open your project and search app.module.ts file. Then open that file and add the following line in import section.

import { HashLocationStrategy, LocationStrategy } from '@angular/common';

2. Then bootom of the page you can see the providers next to importers setion. Inside the providers[] you just add the following line.

{provide: LocationStrategy, useClass: HashLocationStrategy}

3. The final output will be look like this.

providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],

4. The entire page will be like this

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import {HttpClientModule} from '@angular/common/http';
import { LayoutComponent } from './layout/layout.component';
import { FooterComponent } from './footer/footer.component';
import { FeaturesComponent } from './features/features.component';
import { PricingComponent } from './pricing/pricing.component';
import { ContactComponent } from './contact/contact.component';
import { AboutComponent } from './about/about.component';
import { HashLocationStrategy, LocationStrategy } from '@angular/common';
import { HeaderComponent } from './header/header.component';
import { FormsModule }   from '@angular/forms';
import { ReactiveFormsModule } from '@angular/forms'

@NgModule({
  declarations: [
    AppComponent,
    LayoutComponent,
    FooterComponent,
    FeaturesComponent,
    PricingComponent,
    ContactComponent,
    AboutComponent,
    HeaderComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    HttpClientModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [{provide: LocationStrategy, useClass: HashLocationStrategy}],
  bootstrap: [AppComponent]
})
export class AppModule { }

5. Then upload your project file into the live server and refresh the page. You can't able to see the 404 error now.. 

How to make your Angular app SEO friendly

Let's see how we can add SEO to our Angular app easily using following steps

1. First open your app.component.ts file and import meta and title service. The example is below..

import { Meta, Title } from '@angular/platform-browser';

2. Then you can find the "export class LayoutComponent implements OnInit {}" line and add the following code inside the curly brases.

constructor(private titleService: Title, private meta: Meta) {

this.titleService.setTitle('Add Your Title Here - Learn Angular Fast');

this.meta.addTag({ name: 'description', content: 'Add your website description here' });

this.meta.addTag({ name: 'keywords', content: 'Add your website seo keywords here' });
}

3. Now the app.component.ts file output will be look like this.

import { Component, OnInit } from '@angular/core';
import { Meta, Title } from '@angular/platform-browser';

export class LayoutComponent implements OnInit {

constructor(private titleService: Title, private meta: Meta) {

this.titleService.setTitle('Learn Angular Fast - This is my blog title');

this.meta.addTag({ name: 'description', content: 'This is my blog description' });

this.meta.addTag({ name: 'keywords', content: 'How to learn angular Fast - This is my blog description' });

}

ngOnInit() {

}
}

4. Then repeat the same step for the remaining component files to add multiple keywords, title and description.

How to start New angular project

This guide shows you how to start new project in angular. Just follow the simple steps and enjoy it.

1. First download nodejs from https://nodejs.org

2. Then run the exe file to intall it.

3. Open Command Prompt and do the following steps.

3.1 To open d drive (C:\Users\siva>D:)

3.2 To install angular CLI D:\> npm install -g @angular/cli

3.3 To start new project (D:\>ng new project-name)

4. It will ask Would you like to add angular routing? (y/n)

5. Just press y and select which stylesheet format would you like to use? Choose you favourite stylesheet css or scss or sass etc.

6. Please wait 5 mins for the new project installation

7. Once the installation is completed, use the following command (D:\>cd project-name).

8. To run the project follow the command (D:\project-name>ng s -o)

9. The current project will work on the port http://localhost:4200 on your default browser

How to use jQuery with Angular?

The quick way to use jQuery in Angular is very easy. Just follow the steps below.

1. First install Jquery in your angular project using following command

npm i --save jquery

2. Then go to angular.json file and find the script part.

3. Just call the js file from the installed folder

4. The js file path is like  "node_modules/jquery/dist/jquery.min.js"

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

5. Now we came to the final step, just check jquery is working or not using some script.

6. Go to your component file and import jquery (import * as $ from 'jquery';) then add alert function in your component.ts file.


For Example -:) alert("Helo Siva.....!") 

How to Install Bootstrap 3 and 4 in angular project

First, create an Angular app. Once the app is created successfully, install bootstrap 3 and 4 by using the following simple steps.

1. First install Bootstrap 3 and 4 in your angular project using following command

npm i --save bootstrap3
npm i --save bootstrap4

2. Then go to angular.json file and find the script and style part.

3. Just call the css and js file from the installed folder

4. The css file path is like "node_modules/bootstrap/dist/css/bootstrap.min.css",

5. And the js file path is like "node_modules/aos/dist/aos.js"

            "styles": [
              "node_modules/bootstrap/dist/css/bootstrap.min.css",
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/bootstrap/dist/js/bootstrap.min.js",
            ]

6. Now we came to the final step, just terminate the running project in Command Prompt using the shortcut ctrl+c twice.

7. Then serve the project again it'll work.

8. Use some bootstrap default classes and check the output once.

For Example -:)( <div class="container"> <h1>This is the bootstrap heading</h1> </div> )

Angular aos animation installation

1. First install aos animation in your project using following command

npm i --save aos

2. Then go to angular.json file and find the script and style part.

3. Just call the css and js file from the AOS

The aos css file path is like "node_modules/aos/dist/aos.css"

And the aos js file path is like "node_modules/aos/dist/aos.js"

The output will be like this

            "styles": [
              "node_modules/aos/dist/aos.css"
              "src/styles.css"
            ],
            "scripts": [
              "node_modules/aos/dist/aos.js"
            ]

4. If you want to add aos animation for your entire project just add the following code in app.component.ts

import * as AOS from 'aos';

5. After that add the following code inside the export class

ngOnInit(){
AOS.init();
}

Now we came to the final step

6. Add the animation effect to the element.

data-aos="fade-left"


For Example -:)( <div class="container" data-aos="fade-left"></div> )