javascript - 选择器 "relative-path"没有匹配任何元素

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 行即可使相对路径起作用，因此您可以将 选择器 保留为“first-component”或之前的任何内容。

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