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:
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.
Vous devez vous connecter pour publier un commentaire.
Ouvrir votre
admin.router.ts
fichier et trouvez cette ligne:Puis de le remplacer par:
Et aussi dans votre
admin.module.ts
fichier présent:est redondante. Routeur n'en interne.
entryComponents
a été ajouté lorsque j'ai lu l'autre article et essayé de voir si cela fonctionne.Je viens de perdre environ 2 heures sur ce message d'erreur parce que je n'ai pas mis des guillemets:
au lieu de (correct):