选择器“相对路径”不匹配任何元素

Question

我正在关注component-relative paths angular documentation。

根据说明，我将组件 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"));
    }
}

我的 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>

我看过这个解决方案，The selector "my-app" did not match any elements，但是，我发现它不适用。我的 main.ts 文件只包含这个：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

// start the application
const platform = platformBrowserDynamic();
platform.bootstrapModule(AppModule); 

并且没有对 BrowserModule 的引用。我还查看了 why getting the error "The selector did not match any elements"? ，但是，我没有 boot.ts 文件来比较我的值。

最后，我查看了 Angular2 CLI build EXCEPTION : The selector "app-root" did not match any elements ，但是，我的 Packaging.json 中没有提到 angular-universal。

知道我做错了什么吗？

Answer 1

我也遇到了同样的问题，这个例子有点混乱。行：

selector: 'relative-path', 

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

只需添加 moduleId 行即可使相对路径起作用，因此您可以将 selector 保留为“第一组件”或您之前的任何内容。

错误消息实际上是想说您现在拥有的选择器（“相对路径”）与 index.html 文件中的内容不匹配。这只发生在您更改 app.module 中 bootstrap 条目中的组件时。如果您在使用非引导模块时遇到同样的问题，则会收到更清晰的错误消息。