typescript Angular2：找不到函数 HomeComponent 的组件工厂

Angular2: No component factory found for function HomeComponent

提问by Luke Vo

I have already checked this article(and this one). I do not even actually use dynamically loading (actually, I do not know what it is).

我已经检查过这篇文章（和这篇文章）。我什至不实际使用动态加载（实际上，我不知道它是什么）。

This is the error message and the Network scripts loading:

这是错误消息和网络脚本加载：

core.umd.js:3257 EXCEPTION: Uncaught (in promise): Error: No component factory found for function HomeComponent() {

core.umd.js:3257 例外：未捕获（承诺）：错误：未找到函数 HomeComponent() {

I have the following code for routing (admin.router.ts):

我有以下路由代码（admin.router.ts）：

import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import * as Components from "./Components/all.component";

const Routes: any = [
    {
        path: "",
        component: [Components.HomeComponent],
    },
];

@NgModule({
    imports: [RouterModule.forRoot(Routes)],
    exports: [RouterModule],
})
export class AdminRoutingModule { }

Here are the `all.component code, it is to gather everything:

下面是`all.component 代码，就是把所有的东西都收集起来：

import { NgModule } from "@angular/core";

import { ShellComponent } from "./shell.component";
import { SidebarComponent } from "./sidebar.component";
import { HomeComponent } from "./home.component";

export * from "./home.component";
export * from "./shell.component";
export * from "./sidebar.component";

export const AllComponents: any[] = [
    ShellComponent,
    SidebarComponent,
    HomeComponent,
];

The HomeComponent(home.component.ts) that is causing the problem (no code in yet, not that I am cutting its content here):

在HomeComponent（home.component.ts），导致该问题（没有代码呢，不就是我在这里切割其内容）：

import { Component } from "@angular/core";

@Component({
    moduleId: module.id,
    selector: "home",
    templateUrl: "/Admin/Template/Home",
})
export class HomeComponent {

}

Also, I notice, whatever component I use there causes the problem. And here is my App Module (admin.module.ts), I tried entryComponentsbut the error still happens:

另外，我注意到，我在那里使用的任何组件都会导致问题。这是我的应用程序模块 ( admin.module.ts)，我试过了，entryComponents但错误仍然发生：

import {NgModule} from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { RouterModule } from "@angular/router";

import * as Components from "./Components/all.component";
import { AdminRoutingModule } from "./admin.router";

@NgModule({
    imports: [
        BrowserModule,
        AdminRoutingModule,
    ],
    declarations: [Components.HomeComponent, Components.ShellComponent, Components.SidebarComponent],
    entryComponents: [Components.HomeComponent],
    bootstrap: [Components.ShellComponent],
})
export class AdminModule {

}

I am hosting it on IIS Express (ASP.NET MVC) if it is relevant. Please help me check the problem, I have tried exactly as the tutorial in Routing.

如果相关，我将它托管在 IIS Express (ASP.NET MVC) 上。请帮我检查问题，我已经完全按照路由中的教程进行了尝试。

---

---

Here are the other files that you may need:

以下是您可能需要的其他文件：

main.ts:

main.ts：

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

const platform = platformBrowserDynamic();
platform.bootstrapModule(AdminModule);

Calling inside the HTML page:

在 HTML 页面内部调用：

System.import('Apps/Admin/main')
    .catch(function (err) {
        console.log(err);
    });

system.config.js:

system.config.js：

/**
 * System configuration for Angular samples
 * Adjust as necessary for your application needs.
 */
(function (global) {
    System.config({
        paths: {
            // paths serve as alias
            'npm:': '/node_modules/'
        },
        // map tells the System loader where to look for things
        map: {
            // our app is within the app folder
            Apps: '/App/Pages',
            // angular bundles
            '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
            '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
            '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
            '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
            '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
            '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
            '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
            '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
            // other libraries
            'rxjs': 'npm:rxjs',
            'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
        },
        // packages tells the System loader how to load when no filename and/or no extension
        packages: {
            Apps: {
                main: 'main.js',
                defaultExtension: 'js'
            },
            rxjs: {
                defaultExtension: 'js'
            },
            'angular-in-memory-web-api': {
                main: './index.js',
                defaultExtension: 'js'
            }
        }
    });
})(this);

回答by yurzui

Open your admin.router.tsfile and find this line:

打开您的admin.router.ts文件并找到这一行：

const Routes: any = [
  {
     path: "",
     component: [Components.HomeComponent], // this line
  },
];

Then replace it with:

然后将其替换为：

component: Components.HomeComponent

And also in your admin.module.tsfile this:

而且在您的admin.module.ts文件中：

entryComponents: [Components.HomeComponent],

is redundant. Router does it internally.

是多余的。路由器在内部完成。

回答by Nico

I just wasted about 2 hours on this error message because I didn't put it in quotes:

我只是在这条错误消息上浪费了大约 2 个小时，因为我没有把它放在引号中：

let modal = this.modalCtrl.create(SearchPage)

instead of (correct):

而不是（正确）：

let modal = this.modalCtrl.create("SearchPage")