Relative path is not working in Angular2 component

Question

Logo not loading in Angular 2 in a component (Navbar)

navbar component file:

import { Component, OnInit } from '@angular/core';
@Component({
  moduleId: module.id,
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})
export class NavbarComponent implements OnInit {

  private website:string
  private websiteUrl:string
  constructor() {  
    this.website = 'Rakesh'
    this.websiteUrl = 'http://google.com'
   }
  ngOnInit() {
  }

}

i add some html code in template file and the logo not loading

my logo code is

<div class="navbar-header">
  <a class="navbar-brand" href="{{websiteUrl}}">
  *<img src="./logo/rakesh.png" class="img-responsive" alt="Image">*
  </a>
</div>

Output in console moduleId should be a string in "NavbarComponent" .

my Logo path:

navabar.component.ts
logo/
    rakesh.png

Answer 1

Problem maybe comes from moduleId should be a string in "NavbarComponent" .

As Angular CLI now use Webpack, module.id in Webpack is a number, while Angular expects a string. What you should do is remove the moduleId metadata.

@Component({
  selector: 'app-navbar',
  templateUrl: './navbar.component.html',
  styleUrls: ['./navbar.component.css']
})

Answer 2

Remove module.id from @Component . It doesn't need anymore, you can find it in @NgModule since Angular 2.0.

This is how webpack users use component relative paths instead of module.id .

Webpack: load templates and styles

Webpack developers have an alternative to moduleId .

They can load templates and styles at runtime by adding ./ at the beginning of the template and styles / styleUrls properties that reference component-relative URLS.

 import { Component } from '@angular/core'; import '../../public/css/styles.css'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent { } 

Webpack will do a require behind the scenes to load the templates and styles. Read more here .

---

This answer can help you if you have compilation errors in typescript.

If you get typescript error, just declare the variable in your file.

 declare var module: { id: string; } @Component({ moduleId: module.id, ... })