Angular AppComponent_Host.ngfactory.js？[sm]：1错误：选择器“；ng组件“；不匹配任何元素

我正在尝试将分页与角度

这是我的密码

app.module.ts

    import { NgModule }      from '@angular/core';
    import { BrowserModule } from '@angular/platform-browser';
    import { HttpModule } from '@angular/http';

    import { AppComponent }  from './app.component';

    import { PagerService } from './_services/pager.service';

    @NgModule({
        imports: [
            BrowserModule,
            HttpModule
        ],
        declarations: [
            AppComponent
        ],
        providers: [
            PagerService
        ],
        bootstrap: [AppComponent]
    })

    export class AppModule { }

app.components.ts

    import { Component, OnInit } from '@angular/core';
    import { Http, Headers, RequestOptions, Response } from '@angular/http';
    import { Observable } from 'rxjs/Observable';
    import { map } from 'rxjs/operators';
    import 'rxjs/add/operator/map'
    import { PagerService } from './_services/index'


    @Component({
        templateUrl: 'app.component.html'
    })

    export class AppComponent implements OnInit {
        constructor(private http: Http, private pagerService: PagerService) { }

        // array of all items to be paged
        private allItems: any[];

        // pager object
        pager: any = {};

        // paged items
        pagedItems: any[];

        ngOnInit() {
            // get dummy data
            this.http.get('./dummy-data.json')
                .map((response: Response) => response.json())
                .subscribe(data => {
                    // set items to json response
                    this.allItems = data;

                    // initialize to page 1
                    this.setPage(1);
                });
        }

        setPage(page: number) {
            // get pager object from service
            this.pager = this.pagerService.getPager(this.allItems.length, page);

            // get current page of items
            this.pagedItems = this.allItems.slice(this.pager.startIndex, this.pager.endIndex + 1);
        }
    }

寻呼机服务

    export class PagerService {
        getPager(totalItems: number, currentPage: number = 1, pageSize: number = 10) {
            // calculate total pages
            let totalPages = Math.ceil(totalItems / pageSize);

            // ensure current page isn't out of range
            if (currentPage < 1) {
                currentPage = 1;
            } else if (currentPage > totalPages) {
                currentPage = totalPages;
            }

            let startPage: number, endPage: number;
            if (totalPages <= 10) {
                // less than 10 total pages so show all
                startPage = 1;
                endPage = totalPages;
            } else {
                // more than 10 total pages so calculate start and end pages
                if (currentPage <= 6) {
                    startPage = 1;
                    endPage = 10;
                } else if (currentPage + 4 >= totalPages) {
                    startPage = totalPages - 9;
                    endPage = totalPages;
                } else {
                    startPage = currentPage - 5;
                    endPage = currentPage + 4;
                }
            }

            // calculate start and end item indexes
            let startIndex = (currentPage - 1) * pageSize;
            let endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);

            // create an array of pages to ng-repeat in the pager control
            let pages = Array.from(Array((endPage + 1) - startPage).keys()).map(i => startPage + i);

            // return object with all pager properties required by the view
            return {
                totalItems: totalItems,
                currentPage: currentPage,
                pageSize: pageSize,
                totalPages: totalPages,
                startPage: startPage,
                endPage: endPage,
                startIndex: startIndex,
                endIndex: endIndex,
                pages: pages
            };
        }
    }

导出类页面服务{
getPager（totalItems:number，currentPage:number=1，pageSize:number=10）{
//计算总页数
让totalPages=Math.ceil（totalItems/pageSize）；
//确保当前页面未超出范围
如果（当前页面<1）{
currentPage=1；
}else if（当前页面>总页面）{
currentPage=总页数；
}
开始页：编号，结束页：编号；
if（总页数起始页+i）；
//返回具有视图所需的所有寻呼机属性的对象
返回{
totalItems:totalItems，
currentPage:currentPage，
pageSize:pageSize，
totalPages:totalPages，
起始页：起始页，
endPage:endPage，
startIndex:startIndex，
endIndex:endIndex，
页数：页数
};
}
}

app.component.html

    <div>
        <div class="container">
            <div class="text-center">
                <h1>Angular 2 - Pagination Example with logic like Google</h1>

                <!-- items being paged -->
                <div *ngFor="let item of pagedItems">{{item.name}}</div>

                <!-- pager -->
                <ul *ngIf="pager.pages && pager.pages.length" class="pagination">
                    <li [ngClass]="{disabled:pager.currentPage === 1}">
                        <a (click)="setPage(1)">First</a>
                    </li>
                    <li [ngClass]="{disabled:pager.currentPage === 1}">
                        <a (click)="setPage(pager.currentPage - 1)">Previous</a>
                    </li>
                    <li *ngFor="let page of pager.pages" [ngClass]="{active:pager.currentPage === page}">
                        <a (click)="setPage(page)">{{page}}</a>
                    </li>
                    <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                        <a (click)="setPage(pager.currentPage + 1)">Next</a>
                    </li>
                    <li [ngClass]="{disabled:pager.currentPage === pager.totalPages}">
                        <a (click)="setPage(pager.totalPages)">Last</a>
                    </li>
                </ul>
            </div>
        </div>
        <hr />
        <div class="credits text-center">
            <p>
                <a href="http://jasonwatmore.com/post/2016/08/23/angular-2-pagination-example-with-logic-like-google" target="_top">Angular 2 - Pagination Example with logic like Google</a>
            </p>
            <p>
                <a href="http://jasonwatmore.com" target="_top">JasonWatmore.com</a>
            </p>
        </div>
    </div>

使用Google之类的逻辑进行角度2分页示例
{{item.name}

我正在犯错误。 说“ng组件”与任何元素都不匹配

但我这里没有使用任何选择器

我正在htmlUrl中使用Html文件

请检查一下我的代码

---

使用角度项目选择器的index.html中加载AppComponent的部分

因此，在app.component.ts中进行以下更改：

...
@Component({
    selector: 'my-app'
    templateUrl: 'app.component.html'
})

export class AppComponent implements OnInit {...}

如果index.html中使用了其他选择器，则在app.component.ts中使用相同的选择器