Discovering the complete URL utilized to load the application

I am working on an Angular application and I am looking to retrieve the full URL of the application from within the code - specifically, the complete address that the user entered into their browser to access the app.

When using Router or ActivatedRoute in my code, I have only been able to extract the path portion of the URL, without the entire URL itself.

constructor (private rt : Router)
{
}

ngOnInit ()
{
  console.log (this.rt.url);
}

For example, if my app is located at https://localhost/blabla, I not only need /blabla but also the complete URL string.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Is it necessary for Eslint to require props fields to be read-only in React components?

Consider the code snippet below: interface MyProps { label: string; } function MyComponent(props: MyProps) { return ( <p> {props.label} </p> ); } Surprisingly, neither Eslint nor the TypeScript compiler will throw a warni ...

What role does the empty object type {} play in typescript?

In the @types/React package of the DefinitelyTyped library, I came across this definition: interface FunctionComponent<P = {}> { (props: PropsWithChildren<P>, context?: any): ReactElement | null; propTypes?: WeakValidationMap&l ...

Why hasn't the variable been defined?

Why am I receiving an error message saying "test is not defined" in this code? Even though I have properly defined the variable in another service file, it seems to be causing issues here. Any insights on what could be going wrong? import { Injectable } f ...

Deploy your Angular website for absolutely no cost on Firebase by leveraging the Command Line Interface

Looking to deploy an Angular application on Firebase cloud for free using the CLI? Recently started delving into Angular 9 and exploring Firebase's cloud server capabilities, I'm interested in seeing how simple it is to deploy an app on Firebase. ...

Error encountered: UI-Router state's 'includes' property is not recognized as a valid property in the StateDeclaration type

Prior to initiating the state transition, it is necessary to validate whether the target state falls under a parent state. The MatchCriteria is as follows: this.transition.onStart({ to: function(state) { return state.includes.parentstate; } },() = ...

Accessing a Feature from a Separate Module

As a newcomer to Angular, I'm grappling with a concept and hoping for some insight... Within my module, I have a powerful singleton service that I want other components to access. Currently, I have it exporting with the static forRoot(): ModuleWithPr ...

Struggling to send information to the data layer on every page in Angular 9

Currently, I am in the process of integrating a GTM snippet into my Angular project. However, I have noticed that when the page is hard reloaded, it pushes data but does not do so during normal navigation. I have already added the GTM snippet provided by ...

What is the interaction between a service worker and a sub-domain?

I have been exploring how Angular 6 works with ngsw-config.json for service worker configuration, but I'm unsure about its interaction with sub-domains. Based on my current understanding: When a user visits example.com, The service worker is regist ...

Error: The default export is not a component compatible with React in the specified page: "/"

I'm facing an issue while building my next app. Despite using export default, I keep encountering an error that others have mentioned as well. My aim is to create a wrapper for my pages in order to incorporate elements like navigation and footer. vi ...

The Angular CLI is consolidating all component styles within the head section of the document

Currently, all CSS for a page's components is being injected into the head of the document. Is it possible to consolidate these styles into a separate file that can be linked in the head of the document, similar to how external CSS libraries like boot ...

Every time I attempt to submit the login form on the Ionic and Angular page, instead of capturing the values of the form group, the page simply refreshes

Struggling with submitting the login form in Ionic and Angular? When attempting to submit, the page reloads instead of capturing the form group values. I am utilizing angular reactive forms and form builder within the ionic framework. Need assistance in id ...

Configuring routes for Angular4 router is a vital step in creating a

Issue: I am currently setting up routes for my application, aiming to structure the URL as https://localhost:4200/hero=id, where the 'id' will be dynamically selected. However, this setup is not functioning as expected. If I attempt to use a URL ...

Troubleshooting the AngularJS digest error within a hybrid application

My hybrid app is quite bulky, using angularjs 1.7 and angular 5.x simultaneously. I have integrated ngUpgrade module to manage both apps, but I encountered a problem when trying to navigate to a different route using href, which is causing the digest cyc ...

Looking for a way to dynamically append a child element within another child

Struggling to include a new child within a specific child in Json myObject:any[] = []; this.myObject = { "type": "object", "properties": { "first_name": { "type": "string" }, "last_name": { "type": "string" }, } } addF ...

Creating autorest client based on various OpenAPI versions

I'm currently exploring options for creating a Typescript client from our .NET API. After researching various tools, I decided to go with Autorest, as it is Node-based and fits my skillset. While I am aware of Swashbuckle, my knowledge leans more towa ...

Avoiding redundant code in reactive forms

I have set up reactive forms for both login and registration. Here is the code for the Registration form: <div class="registration_wrap"> <div class="registration"> <form [formGroup]="form" novalidate> < ...

Is it possible to utilize [key:string]: any in order to eliminate the requirement for an additional function when working

Currently, I am utilizing recompose within my React project. Specifically, I am leveraging its compose function which is defined as: function compose<TInner, TOutter>( ...functions: Function[] ): ComponentEnhancer<TInner, TOutter>; interf ...

What is the reason behind having to coerce the enum value before the object type can be properly recognized?

My object is discriminated based on the type property, which can be any value from a specified enum. I encounter an issue in TypeScript when passing a valid object to a function; it complains about mismatched types. However, coercing the enum value resolve ...

The Angular router is directed to an empty URL path instead of the specified URL

I have encountered a strange issue while developing my angular app which involves the router functionality. All routes were working perfectly fine until I discovered that after a successful login, instead of navigating to the '/admin' path as int ...

Calling an HTTP client request with consideration for variable scope

When operating within a well-functioning cloud environment, I encounter an interesting dilemma. While inside the request1 call, I am successfully able to retrieve the output for bodydayOfTheWeek variable. However, upon venturing outside the request1 call, ...