Web Programming TutorialsLearn About Relative Paths of Components in Angular 2

Learn About Relative Paths of Components in Angular 2

Relative Paths

In this article, we are going to discuss the component relative paths. So far in this tutorial series, it is very clear that we use @Component decorators in order to create components and within such components we specify the metadata information defined under the blocks such as template, selector, templateUrl, styles, styleUrls, etc. as shown below.

import { Component } from '@angular/core';

@Component({
  selector: 'my-zippy-app',
  templateUrl: 'resource/app.component.html'
})

Types of custom component implementations
Before we get deep into this topic, let us first understand the two types of custom component implementations. These are Components with Inline Metadata and Components with External Assets.
1. Components with Inline Metadata: – In this type of implementation, we use @Component decorator to create a component and provide the inline metadata within this component. Inline metadata means that we specify the HTML code under the template block and the CSS style under the styles block within the component instead of writing the code into a separate file and providing the file path inside the @Component decorator under the block. The advantage of such a kind of set up is that it is very easy to implement and recommended to use by novice developers as all the code is already written within the component and it requires no dependencies to the external files. Therefore, the chances to encounter with 404 loading error is very less due to the broken path. The following is an example of Components with inline metadata.

import { Component } from '@angular/core';

@Component({
  
selector: 'my-zippy-app',
  
template: `
<div align="center">
<h2>Zippy Component Demonstration</h2>

<p>This component demonstrates the following.</p>
<pre>
1. Data flow in Angular 2.
2. Working of Inputs and Outputs at Component level.
3. An event is emitted when a component is opened or closed.
4. At such event the application state is logged.
</pre>
<p>Click on the below "Get Application Status" link to get Application Status Logs.</p>
<hr>
<br>
<my-zippy (opened)="log('Component was Opened')" (closed)="log('Component was Closed')" [isOpen]="false">
  View the Projected content
</my-zippy>

<h3>Application Logs:</h3>
<ul>
`,
styles: [' 
h2 {
	color: #369;
	font-family: Georgia, Helvetica, sans-serif;
	font-size: 250%;
}

h3 {
	color: #669;
	font-family: Georgia, Helvetica, sans-serif;
	font-size: 250%;
}

p {
	color: #969;
	font-family: Georgia, Helvetica, sans-serif;
	font-size: 100%;
}

body {
	margin: 2em;
}']
})

export class AppComponent { 
  
  logs:string[] = [];
  
  log(message) {
    this.logs.push(message);
  }
}

2. Components with External Assets: – In this type of implementation, we use @Component decorator to create a component and provide the file path as the metadata under the blocks. Here, we specify the HTML code inside a separate HTML file and the file path is provided under the templateUrl block of the decorator. Similarly, we specify the CSS style code inside a separate ccs file and the file path is provided under the styleUrls block of the component decorator. The advantage of such kind of set up is that it is very organized and easy to maintain as changes in the HTML or CSS code can be made directly into the associated files. As there are fair chances of the broken path of the associated HTML and CSS files. Therefore, the chances to encounter a 404 loading error is quite frequent, but if it is coded very efficiently then it is the best way to build an app using Angular 2. The following is an example of Components with external assets.
app/Component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-zippy-app',
  templateUrl: 'resource/app.component.html',
  styleUrls  : ['assets/styles.css']
})

export class AppComponent { 
  
  logs:string[] = [];
  
  log(message) {
    this.logs.push(message);
  }
}

resource/app.component.html

<div align="center">
<h2>Zippy Component Demonstration</h2>

<p>This component demonstrates the following.</p>
<pre>
1. Data flow in Angular 2.
2. Working of Inputs and Outputs at Component level.
3. An event is emitted when a component is opened or closed.
4. At such event the application state is logged.
</pre>
<p>Click on the below "Get Application Status" link to get Application Status Logs.</p>
<hr>
<br>
<my-zippy (opened)="log('Component was Opened')" (closed)="log('Component was Closed')" [isOpen]="false">
  View the Projected content
</my-zippy>

<h3>Application Logs:</h3>
<ul>
  <li *ngFor="let log of logs">
    {{log}}
  </li>
</ul>
<hr>
</div>

assets/styles.css

h2 {
	color: #369;
	font-family: Georgia, Helvetica, sans-serif;
	font-size: 250%;
}

h3 {
	color: #669;
	font-family: Georgia, Helvetica, sans-serif;
	font-size: 250%;
}

p {
	color: #969;
	font-family: Georgia, Helvetica, sans-serif;
	font-size: 100%;
}

body {
	margin: 2em;
}

Explanation of Implementation: –
In the above implementation, we have specified HTML code inside the ‘app.component.html’ file that has the relative path to the application root as ‘resource/app.component.html’. Similarly, we have specified the CSS style code inside ‘styles.css’ that has the relative path to the application root as ‘assets/styles.css’. The relative path is specified under the templateUrl and styleUrls blocks of the @Component decorator, which makes the code very compact and easy to read with the least probability of syntax error.

Components with Relative-Path URLs
In case, if we want to provide the relative path URLs for the HTML template file and the CSS style file in the component’s blocks of Angular 2 (as shown below) then this approach is also a valid approach in the angular 2.

import { Component } from '@angular/core';

@Component({
  selector: 'my-zippy-app',
  templateUrl: './resource/app.component.html',
  styleUrls  : ['./assets/styles.css']
})

export class AppComponent { 
  
  logs:string[] = [];
  
  log(message) {
    this.logs.push(message);
  }
}

Instead, if we first import the required files as their relative file path URLs into the reference variables by using the import and later use these references under the required component’s blocks as shown below, then this is an invalid approach in Angular 2 to use relative path URLs with the components and the system will throw a 404 error.

import { Component } from '@angular/core';

import htmlTemplate from './resource/app.component.html';
import cssStyle    from './assets/styles.css';

@Component({
  selector: 'my-zippy-app',
  templateUrl: htmlTemplate,
  styleUrls  : [cssStyle]
})

export class AppComponent { 
  
  logs:string[] = [];
  
  log(message) {
    this.logs.push(message);
  }
}

Source code for My Zippy Component App
Conclusion: –
In this article, we discussed the various approaches to specify metadata inside the @Component decorator, in order to build an app which is free from getting a 404 loading error.

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Exclusive content

- Advertisement -

Latest article

21,501FansLike
4,106FollowersFollow
106,000SubscribersSubscribe

More article

- Advertisement -