选择器"relative-path"与任何元素都不匹配

Question

我遵循angular文档中的组件相对路径。

根据指示，我保持我的组件ts和组件html在同一目录。在这个问题中，该目录是/app/components/first

我的组件ts包含以下代码，命名为First.component.ts

import {Component, Injectable} from '@angular/core';
import {MyService} from "../../service/MyService";
import {ValueObj} from "../../value/ValueObj";
@Component({
    moduleId: module.id,
    selector: 'relative-path',
    templateUrl: 'First.component.html',
    providers: [MyService]
})
@Injectable()
export class FirstComponent {
    public valueObjs: ValueObj[];
    constructor(private _myService: MyService) {}
    getAllItems(): void {
        this._myService.getAllValueObjs().subscribe(
            data => this.valueObjs= data, error=> console.log(error),
            () => console.log("getting complete"));
    }
}

My First.component.html包含以下代码:

<form (ngSubmit)="getAllItems()">
<label>Value Objects</label>
<button type="submit">Search</button>
</form>
<hr>
<p style="color:red">{{error}}</p>
<h1>All Objects</h1>
<div *ngFor="let valueObj of valueObjs">{{valueObj.name}}</div>

我看过这个解决方案，选择器"my-app"没有任何匹配的元素，然而，我不觉得它适用。我的主。文件只包含以下内容:

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
// start the application
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule); 

并且没有对BrowserModule的引用。我还研究了为什么会出现错误"选择器不匹配任何元素"?但是，我没有靴子。来比较我的值。

最后，我看了一下Angular2 CLI构建EXCEPTION:选择器"app-root"没有匹配任何元素，但是，我没有在我的package .json中引用angular-universal。

知道我做错了什么吗?

Answer 1

我刚刚遇到了同样的问题，这个例子有点令人困惑。线:

selector: 'relative-path', 

只是组件的示例名称，它不是使用相对路径的命令。

简单地添加moduleId行将使相对路径工作，因此您可以将selector保留为"第一组件"或之前的任何内容。

错误消息实际上是试图说，你现在拥有的选择器("相对路径")与index.html文件中的内容不匹配。只有当你改变了app.module中bootstrap条目中的组件时，才会发生这种情况。如果您在非引导模块中遇到同样的问题，则会得到更清晰的错误消息。