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:
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.
Du musst angemeldet sein, um einen Kommentar abzugeben.
Öffnen Sie Ihre
admin.router.ts
- Datei und sucht diese Zeile:Dann ersetzen Sie es mit:
Und auch in Ihrer
admin.module.ts
- Datei diese:redundant ist. Router gibt es intern.
entryComponents
wurde Hinzugefügt, wenn ich Lesen Sie die anderen Artikel und versucht, um zu sehen, ob es funktioniert.Ich gerade verschwendet über 2 Stunden auf diese Fehlermeldung, weil ich nicht setzen Sie es in Anführungszeichen:
statt (richtig):