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

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

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