Angular2: Aucun composant de l'usine trouvé pour la fonction HomeComponent

J'ai déjà vérifié cet article (et cette une). Je n'ai même pas fait usage de les charger dynamiquement (en fait, je ne sais pas ce que c'est).

C'est le message d'erreur et le Réseau des scripts de chargement:

Angular2: Aucun composant de l'usine trouvé pour la fonction HomeComponent

de base.umd.js:3257 EXCEPTION: Uncaught (promettre): Erreur: Aucun composant
usine trouvé pour la fonction HomeComponent() {

J'ai le code suivant pour le routage (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 { }

Ici sont les " toutes les.code du composant, c'est de rassembler tout:

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

La HomeComponent (home.component.ts) qui est à l'origine du problème (pas de code tout de suite, non pas que je me coupe son contenu ici):

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

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

}

Aussi, je remarque que, quelle que soit la composante I utiliser, il provoque le problème. Et voici l'une de mes applications Module (admin.module.ts), j'ai essayé entryComponents mais l'erreur se produit toujours:

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 {

}

Je suis d'hébergement sur IIS Express (ASP.NET MVC) si elle est pertinente. Merci de m'aider à vérifier le problème, j'ai essayé exactement comme le tuto dans le Routage.


Voici les autres fichiers que vous pourriez avoir besoin:

main.ts:

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

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

Appel à l'intérieur de la page 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);
  • Pouvez-vous nous montrer votre main.ts, ou de n'importe quel fichier que gérer votre application bootstrap, s'il vous plaît ? Quelque chose comme platform.bootstrapModule(AppModule);
  • Merci pour votre réponse. J'ai ajouté les autres fichiers à la fin du post.
InformationsquelleAutor Luke Vo | 2016-10-24