Suggested Videos
Part 1 - Angular project setup | Text | Slides
Part 2 - Reading data in angular | Text | Slides
Part 3 - Angular routing and navigation | Text | Slides
In this short video we will discuss the significance of the base href element in Angular.
When setting up routing in an angular application, the first step is to set the base path using the base href element. The base path tells the angular router, how to compose the navigation URLs. The browser uses the <base href> value to prefix relative URLs when referencing CSS files, scripts, and images.
During development we usually set this to a single forward slash as shown below.
<base href="/">
This means all the URLs now will be relative to the root of the application. So when we navaigate to "/list", the path "/list" will be appended to root UR and the complete URL will be as shown below. Notice "/list" is relative to the root URL.
http://localhost:4200/list
Along the same lines, when we navigate to "/create", the complete URL is http://localhost:4200/create
When we deploy our application to a server, we typically deploy it to a sub folder on the server. For example, if we are deploying our application in a sub-folder called "emp", then we set the base href element to /emp/ as shown below.
<base href="/emp/">
This means all the URLs now will be relative to the "emp" base path and will be as shown below.
http://serverName/emp/list
http://serverName/emp/create
During development we usually set base href element to a single forward slash as shown below.
<base href="/">
At this point, if we execute the following command, all the URLs will be relative to the root URL "http://localhost:4200"
ng serve -o
Also, on the "sources" tab in the browser developer tools, you will find all the Script, Images and Template files are relative to the root URL "http://localhost:4200" as shown in the image below.
During development, if you want a different base path other than "/", simply execute the "ng serve" command with --base-href option set to your desired base path as shown below.
ng serve -o --base-href /emp/
At this point all the URLs will be relative to "http://localhost:4200/emp" as we have set the --base-href to /emp/. You can confirm this by looking at the URLs in the address bar and the "Sources" tab in the browser developer tools.
On your local development machine, if you set the base href element in index.html to "/emp/" instead of a single "/" and if you run ng serve -o command without the "base-href" option you will not see anything on the browser. When you open the browser developer tools, you will see the JavaScript bundle files failed to load. To fix this execute ng serve command along with the base href option as shown below.
ng serve -o --base-href /emp/
On your local development machine, if you set the base href element in index.html to a single forward slash and if you want to deploy your application on a server on sub-folder called "emp", then you will have to remember to update the base href element value in index.html to "/emp/". There are 2 ways we can do this.
Part 1 - Angular project setup | Text | Slides
Part 2 - Reading data in angular | Text | Slides
Part 3 - Angular routing and navigation | Text | Slides
In this short video we will discuss the significance of the base href element in Angular.
When setting up routing in an angular application, the first step is to set the base path using the base href element. The base path tells the angular router, how to compose the navigation URLs. The browser uses the <base href> value to prefix relative URLs when referencing CSS files, scripts, and images.
During development we usually set this to a single forward slash as shown below.
<base href="/">
This means all the URLs now will be relative to the root of the application. So when we navaigate to "/list", the path "/list" will be appended to root UR and the complete URL will be as shown below. Notice "/list" is relative to the root URL.
http://localhost:4200/list
Along the same lines, when we navigate to "/create", the complete URL is http://localhost:4200/create
When we deploy our application to a server, we typically deploy it to a sub folder on the server. For example, if we are deploying our application in a sub-folder called "emp", then we set the base href element to /emp/ as shown below.
<base href="/emp/">
This means all the URLs now will be relative to the "emp" base path and will be as shown below.
http://serverName/emp/list
http://serverName/emp/create
During development we usually set base href element to a single forward slash as shown below.
<base href="/">
At this point, if we execute the following command, all the URLs will be relative to the root URL "http://localhost:4200"
ng serve -o
Also, on the "sources" tab in the browser developer tools, you will find all the Script, Images and Template files are relative to the root URL "http://localhost:4200" as shown in the image below.
During development, if you want a different base path other than "/", simply execute the "ng serve" command with --base-href option set to your desired base path as shown below.
ng serve -o --base-href /emp/
At this point all the URLs will be relative to "http://localhost:4200/emp" as we have set the --base-href to /emp/. You can confirm this by looking at the URLs in the address bar and the "Sources" tab in the browser developer tools.
On your local development machine, if you set the base href element in index.html to "/emp/" instead of a single "/" and if you run ng serve -o command without the "base-href" option you will not see anything on the browser. When you open the browser developer tools, you will see the JavaScript bundle files failed to load. To fix this execute ng serve command along with the base href option as shown below.
ng serve -o --base-href /emp/
On your local development machine, if you set the base href element in index.html to a single forward slash and if you want to deploy your application on a server on sub-folder called "emp", then you will have to remember to update the base href element value in index.html to "/emp/". There are 2 ways we can do this.
- Manually update the index.html file OR
- Use the --base-href option along with the ng build command as shown below. This will update the "base href" element value index.html.ng build --base-href /emp/
ng build --prod --base-href /emp/
ReplyDelete