DatVM DatVM - 1 month ago 120
TypeScript Question

Angular2: No component factory found for function HomeComponent

I have already checked this article (and this one). I do not even actually use dynamically loading (actually, I do not know what it is).

This is the error message and the Network scripts loading:

enter image description here


core.umd.js:3257 EXCEPTION: Uncaught (in promise): Error: No component
factory found for function HomeComponent() {


I have the following code for 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 { }


Here are the `all.component code, it is to gather everything:

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


The
HomeComponent
(
home.component.ts
) that is causing the problem (no code in yet, not that I am cutting its content here):

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

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

}


Also, I notice, whatever component I use there causes the problem. And here is my App Module (
admin.module.ts
), I tried
entryComponents
but the error still happens:

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 {

}


I am hosting it on IIS Express (ASP.NET MVC) if it is relevant. Please help me check the problem, I have tried exactly as the tutorial in Routing.




Here are the other files that you may need:

main.ts
:

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

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


Calling inside the HTML page:

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

Open your admin.router.ts file and find this line:

const Routes: any = [
  {
     path: "",
     component: [Components.HomeComponent], // this line
  },
];

Then replace it with:

component: Components.HomeComponent

And also in your admin.module.ts file this:

entryComponents: [Components.HomeComponent],

is redundant. Router does it internally.

Comments