Question

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

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

core.umd.js：3257 EXCEPTION：未捕获（在承诺中）：错误：没有组件找到函数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")

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

2 个答案: