[英]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: 这是错误消息,并且正在加载网络脚本:
core.umd.js:3257 EXCEPTION: Uncaught (in promise): Error: No component factory found for function HomeComponent() {
core.umd.js:3257例外:未被捕获(承诺):错误:未找到函数HomeComponent()的组件工厂{
I have the following code for routing ( admin.router.ts
): 我有以下用于路由的代码(
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: 这是all.component代码,它收集了所有内容:
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): 该
HomeComponent
( home.component.ts
导致该问题(在没有代码呢,不就是我在这里削减其内容)):
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: 这是我的应用模块(
admin.module.ts
),我尝试了entryComponents
但错误仍然发生:
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. 如果相关,我将其托管在IIS Express(ASP.NET MVC)上。 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
: 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: 在HTML页面内调用:
System.import('Apps/Admin/main')
.catch(function (err) {
console.log(err);
});
system.config.js
: 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);
Open your admin.router.ts
file and find this line: 打开您的
admin.router.ts
文件并找到以下行:
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: 而且在您的
admin.module.ts
文件中:
entryComponents: [Components.HomeComponent],
is redundant. 是多余的。 Router does it internally.
路由器在内部完成。
I just wasted about 2 hours on this error message because I didn't put it in quotes: 我只是在此错误消息上浪费了大约2个小时,因为我没有将其用引号引起来:
let modal = this.modalCtrl.create(SearchPage)
instead of (correct): 而不是(正确):
let modal = this.modalCtrl.create("SearchPage")
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.