CODEWITHSUNDEEP
angulartypescriptroutes
Luke Vo
Luke Vo

Reputation: 20668

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);

Upvotes: 1

Views: 13290

Answers (2)

Nico
Nico

Reputation: 4426

I just wasted about 2 hours on this error message because I didn't put it in quotes:

let modal = this.modalCtrl.create(SearchPage)

instead of (correct):

let modal = this.modalCtrl.create("SearchPage")

Upvotes: 1

yurzui
yurzui

Reputation: 214047

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.

Upvotes: 12

Related Questions