Question

徽标未在组件（Navbar）中的Angular 2中加载

navbar组件文件：

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() {
  }

}

我在模板文件中添加了一些html代码，并且没有加载徽标

我的徽标代码是

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

在控制台中输出 moduleId should be a string in "NavbarComponent"。

我的徽标路径：

navabar.component.ts
logo/
    rakesh.png

Answer 1

问题可能来自moduleId should be a string in "NavbarComponent"。

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

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

Answer 2

从module.id移除@Component。它不再需要了，你可以在@NgModule中找到它，因为Angular 2.0。

这是webpack用户使用 component relative paths而不是module.id的方式。

Webpack：加载模板和样式

Webpack开发人员可以替代moduleId。

他们可以在运行时加载./来加载模板和样式   模板的开头和styles / styleUrls属性   引用组件相对 URL。
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将在幕后进行require加载模板和风格。阅读更多here。

如果你在打字稿中有编译错误，

This回答可以帮到你。

如果您收到打字稿错误，只需在文件中声明该变量即可。
declare var module: {
   id: string;
}

@Component({
   moduleId: module.id,   
   ...
})

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

navbar组件文件：

我的徽标代码是

我的徽标路径：

2 个答案:

Webpack：加载模板和样式