Angular2：找不到功能 HomeComponent 的组件工厂

Question

我已经检查了this article（和this one）。我什至没有真正使用动态加载（实际上，我不知道它是什么）。

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

core.umd.js:3257 异常：未捕获（承诺）：错误：无组件 为函数 HomeComponent() {

找到工厂

我有以下路由代码 (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 { }

这里是`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,
];

导致问题的HomeComponent (home.component.ts)（还没有代码，不是我在此处剪切其内容）：

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

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

}

另外，我注意到，我在那里使用的任何组件都会导致问题。这是我的应用模块（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 {

}

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

---

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

main.ts:

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

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

在 HTML 页面内调用：

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

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);

Answer 1

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

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

然后将其替换为：

component: Components.HomeComponent

还有在你的admin.module.ts 文件中：

entryComponents: [Components.HomeComponent],

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

Answer 2

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

let modal = this.modalCtrl.create(SearchPage)

而不是（正确的）：

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