CODEWITHSUNDEEP
angularangular-cli
Rakesh Roy
Rakesh Roy

Reputation: 970

Relative path is not working in Angular2 component

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

Upvotes: 0

Views: 1800

Answers (2)

Roman C
Roman C

Reputation: 1

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,   
   ...
})

Upvotes: 1

Jacques Cornat
Jacques Cornat

Reputation: 1642

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']
})

Upvotes: 2

Related Questions