Angular URL fragment handling

The URL http://devsail.mindzapps.in/#/safety/sms#_Bookmark_heading contains two

fragment identifiers: #/safety/sms and #_Bookmark_heading. The first fragment identifier is
used to route the application to the correct page, while the second fragment identifier is
used to navigate to a specific section within that page.

In order to resolve this issue, you need to make sure that your Angular application is
properly configured to handle URLs with multiple fragment identifiers.

You can start by checking the code for your router configuration in the Angular application.
Make sure that the routes are defined correctly and that the appropriate components are
being loaded for each route.

You may also need to modify the code for the component that is associated with the
#/safety/sms route to handle the #_Bookmark_heading fragment identifier. This could
involve adding code to scroll to the appropriate section within the component when the URL
with the fragment identifier is loaded.
Here's a sample of what your router configuration might look like:
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

import { SafetyComponent } from './safety/safety.component';

const routes: Routes = [

{ path: 'safety/sms', component: SafetyComponent }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
In this code, the route 'safety/sms' is being associated with the SafetyComponent.

Next, let's modify the code for the SafetyComponent to handle the second fragment
identifier #_Bookmark_heading. You can do this by using the ElementRef and Renderer2
services in Angular to programmatically scroll to a specific section within the component
when it is loaded.

Here's a sample of what the code for the SafetyComponent might look like:
import { Component, ElementRef, OnInit, Renderer2, ViewChild } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
selector: 'app-safety',
templateUrl: './safety.component.html',
styleUrls: ['./safety.component.css']
})
export class SafetyComponent implements OnInit {
@ViewChild('bookmarkHeading') bookmarkHeading: ElementRef;

constructor(
private route: ActivatedRoute,
private renderer: Renderer2
){}

ngOnInit() {
this.route.fragment.subscribe(fragment => {
if (fragment === '_Bookmark_heading') {
this.scrollToBookmark();
}
 });
}

private scrollToBookmark() {
this.renderer.setProperty(window, 'scrollTo', {
top: this.bookmarkHeading.nativeElement.offsetTop,
behavior: 'smooth'
});
}
}

In this code, the route.fragment property is being used to subscribe to changes in the
fragment identifier in the URL. If the fragment is '_Bookmark_heading', the
scrollToBookmark method is called, which uses the ElementRef and Renderer2 services to
smoothly scroll to the section with the id 'bookmarkHeading' in the component's template.

To implement this solution for multiple HTML files, you can write a script to automate the
process. Here's an example of how you can do it:

Create a file bookmark-fixer.js and add the following code to it:

const fs = require('fs');
const path = require('path');

const targetDirectory = 'path/to/your/html/files';

fs.readdir(targetDirectory, (err, files) => {

if (err) {
console.error(err);
return;
}
 files.forEach(file => {
if (path.extname(file) === '.html') {
const filePath = path.join(targetDirectory, file);
fs.readFile(filePath, 'utf8', (err, data) => {
if (err) {
console.error(err);
return;
}

const newData = data.replace(/#_Bookmark_heading/g, '');

fs.writeFile(filePath, newData, err => {

if (err) {
console.error(err);
return;
}

console.log(`Successfully fixed bookmark in ${file}`);

});
});
}
});
});

Replace 'path/to/your/html/files' with the actual path to your HTML files.

Save the file and run it using Node.js: node bookmark-fixer.js.

This script will iterate over all HTML files in the target directory, read their contents, remove
all instances of the fragment identifier #_Bookmark_heading, and save the updated content
back to the file.

Note: This script assumes that the HTML files use the #_Bookmark_heading fragment
identifier consistently. If the fragment identifier is used differently in different files, you will
need to modify the script to handle those cases.

Here's how you can modify the script to handle the routing part:

First, you need to modify the components associated with the #/safety/sms route to handle
the #_Bookmark_heading fragment identifier. This can be done by adding a method to scroll
to the appropriate section within the component when the URL with the fragment identifier
is loaded.
Here's an example of how this can be done in Angular:
import { Component, OnInit, ViewChild } from '@angular/core';

@Component({
selector: 'app-sms',
templateUrl: './sms.component.html',
styleUrls: ['./sms.component.css']
})
export class SmsComponent implements OnInit {
@ViewChild('bookmarkHeading') bookmarkHeading: ElementRef;

ngOnInit() {
const fragment = window.location.hash;
if (fragment === '#_Bookmark_heading') {
this.bookmarkHeading.nativeElement.scrollIntoView();
}
}
}
In this example, bookmarkHeading is a reference to an HTML element with the
#_Bookmark_heading id. When the component is initialized, the code checks if the current
URL contains the fragment identifier #_Bookmark_heading. If it does, it uses the
scrollIntoView method to scroll to the element with the corresponding id.

Next, you need to modify the script to update the URLs in the HTML files.
Here's an updated version of the script:
const fs = require('fs');
const path = require('path');

const targetDirectory = 'path/to/your/html/files';

fs.readdir(targetDirectory, (err, files) => {

if (err) {
console.error(err);
return;
}

files.forEach(file => {
if (path.extname(file) === '.html') {
const filePath = path.join(targetDirectory, file);
fs.readFile(filePath, 'utf8', (err, data) => {
if (err) {
console.error(err);
return;
}

const newData = data.replace(/#_Bookmark_heading/g, '');

const updatedData = newData.replace(/#\/safety\/sms#_Bookmark_heading/g,
'#/safety/sms');
 fs.writeFile(filePath, updatedData, err => {
if (err) {
console.error(err);
return;
}

console.log(`Successfully fixed URL in ${file}`);

});
});
}
});
});

In this updated script, we use two calls to .replace() to remove the #_Bookmark_heading
fragment identifier and update the URL with the correct routing.

Note: You may need to modify the script if the URL structure in your HTML files is different
from the example used here.