且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

相对路径在 Angular2 组件中不起作用

更新时间:2023-02-09 23:17:49

问题可能来自 moduleId 应该是 "NavbarComponent" 中的一个字符串.

由于 Angular CLI 现在使用 Webpack,Webpack 中的 module.id 是一个数字,而 Angular 需要一个字符串.您应该做的是删除 moduleId 元数据.

@Component({选择器:应用程序导航栏",templateUrl: './navbar.component.html',styleUrls: ['./navbar.component.css']})

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

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