Angular2: Keine Komponente Fabrik gefunden, die für die Funktion HomeComponent

Habe ich schon überprüft dieser Artikel (und diese eine). Ich auch nicht wirklich dynamisch laden (eigentlich, ich weiß nicht, was es ist).

Dies ist die Fehlermeldung und die Netzwerk-scripts laden:

Angular2: Keine Komponente Fabrik gefunden, die für die Funktion HomeComponent

Kern.umd.js:3257 EXCEPTION: Uncaught (bei Versprechen): Fehler: Keine Komponente
Fabrik gefunden, die für die Funktion HomeComponent() {

Ich habe den folgenden code für das routing (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 { }

Hier sind die `alle.Komponente code, es ist, sammeln Sie alles:

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,
];

Den HomeComponent ( home.component.ts ), die das problem verursacht (keine code-in noch, nicht, dass ich mich schneiden Ihre Inhalte hier):

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

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

}

Außerdem merke ich, was auch immer Komponente, die ich benutze gibt es das problem verursacht. Und hier ist meine App-Modul (admin.module.ts), habe ich versucht entryComponents aber der Fehler passiert immer noch:

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 {

}

Ich bin hosting-it, die auf IIS Express - (ASP.NET MVC), wenn es relevant ist. Bitte helfen Sie mir zu überprüfen das problem, ich habe versucht, genau so, wie das tutorial im Routing.


Hier sind die anderen Dateien, die Sie benötigen:

main.ts:

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

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

Aufruf innerhalb der HTML-Seite:

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);
  • Können Sie uns zeigen, Ihre wichtigsten.ts, oder jede andere Datei behandeln Ihre Anwendung, bootstrap, bitte ? So etwas wie platform.bootstrapModule(AppModule);
  • Vielen Dank für Ihre Antwort. Ich habe die anderen Dateien am Ende des posts.
InformationsquelleAutor Luke Vo | 2016-10-24
Schreibe einen Kommentar