DatVM DatVM - 1 year ago 813
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 (

import { NgModule } from "@angular/core";
import { RouterModule } from "@angular/router";
import * as Components from "./Components/all.component";

const Routes: any = [
path: "",
component: [Components.HomeComponent],

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[] = [

) that is causing the problem (no code in yet, not that I am cutting its content here):

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

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 (
), I tried
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";

imports: [
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:


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

const platform = platformBrowserDynamic();

Calling inside the HTML page:

.catch(function (err) {


* System configuration for Angular samples
* Adjust as necessary for your application needs.
(function (global) {
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'

Answer Source

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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download