[英]Feature module not exporting component
My simple app has a root module named AppModule and a feature module named HomeModule . 我简单的应用程序有一个名为的AppModule根模块和一个名为HomeModule一个功能模块。 I'm trying to create a route for a component named HomeComponent (which is part of HomeModule ) but all I get is
我试图创建一个名为HomeComponent部件的路由(这是HomeModule的一部分),但我得到的是
Module "HomeModule" has no exported member 'HomeComponent'
app.routing.ts app.routing.ts
import { Routes, RouterModule } from '@angular/router'
import { HomeComponent } from './Home/home.module.ts' // HomeComponent not found
const appRoutes: Routes = [
{ path: '', component: HomeComponent }
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(appRoutes);
home.module.ts home.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HomeComponent } from './home.component.ts';
@NgModule({
imports: [ BrowserModule ],
declarations: [ HomeComponent ],
exports: [ HomeComponent ]
})
export class HomeModule { }
home.component.ts home.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'home',
template: '<h1>Hello World</h1>'
})
export class HomeComponent { }
Why is HomeModule not exporting its component? 为什么HomeModule不能导出其组件?
Ref1: http://angularjs.blogspot.com/2016/08/angular-2-rc5-ngmodules-lazy-loading.html Ref2: https://angular.io/docs/ts/latest/guide/ngmodule.html#!#imports 参考文献1: http: //angularjs.blogspot.com/2016/08/angular2-rc5-ngmodules-lazy-loading.html Ref2: https ://angular.io/docs/ts/latest/guide/ngmodule.html #!#进口
import { HomeComponent } from './Home/home.module.ts' // HomeComponent not found
home.module.ts exports HomeModule
, not HomeComponent
. home.module.ts出口
HomeModule
,不HomeComponent
。
@NgModule exports make Angular2 features of those export components available to the importing module. @NgModule导出使导入模块可用的导出组件的Angular2 功能 。 features can be template directives, selector, injectable service, etc.
功能可以是模板指令,选择器,可注射服务等。
Home component feature is its selector. 主要组件功能是其选择器。 So importing
HomeModule
into app.module will make HomeComponent
selector home
available to any app.module's component. 所以进口
HomeModule
到app.module会让HomeComponent
选择home
提供给任何app.module的组件。
To have HomeModule export HomeComponent explictly, index.js and index.d.ts are needed. 要使HomeModule显式导出HomeComponent,需要index.js和index.d.ts。 (Inspired by Fabio Antunes answer)
(灵感来自Fabio Antunes的回答)
home
home
To use this, exports: [ HomeComponent ]
is required in home.module.ts. 要使用它,export
exports: [ HomeComponent ]
HomeComponent exports: [ HomeComponent ]
在home.module.ts中是必需的。
app.module.ts app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeModule } from './Home/home.module';
import { routing } from './app.routing';
@NgModule({
imports: [
BrowserModule,
HomeModule,
routing],
declarations: [
AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts using selector home
app.component.ts使用选择器
home
import {Component} from '@angular/core';
@Component({
selector: 'app-component',
template: `
<h1>{{title}}</h1>
<home></home>`
})
export class AppComponent {
title = 'APP';
}
To use HomeComponent directly, we need to add index.js and index.d.ts into ./Home 要直接使用HomeComponent,我们需要将index.js和index.d.ts添加到./Home中
./Home/index.js ./Home/index.js
exports.HomeModule = require('./home.module').HomeModule;
exports.HomeComponent = require('./home.component').HomeComponent;
./Home/index.d.ts ./Home/index.d.ts
exports * './home.module';
exports * from './home.component';
Then import Home Module like npm package 然后像npm包一样导入Home Module
app.routing.ts app.routing.ts
// We are importing the module directory, not ./Home/home.module.ts
import { HomeComponent } from './Home';
import { Routes, RouterModule } from '@angular/router'
const appRoutes: Routes = [
{ path: '', component: HomeComponent }
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(appRoutes);
To route to a module, the child module need to have its own router setup. 要路由到模块,子模块需要有自己的路由器设置。
Use loadChildren
in parent routing(app.routing.ts). 在父路由(app.routing.ts)中使用
loadChildren
。
Use RouterModule.forChild
in child routing(home.routing.ts). 在子路由(home.routing.ts)中使用
RouterModule.forChild
。
app.module.ts app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { HomeModule } from './Home/home.module';
import { routing } from './app.routing';
@NgModule({
imports: [
BrowserModule,
HomeModule,
routing],
declarations: [
AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }
app.component.ts app.component.ts
import {Component} from '@angular/core';
@Component({
selector: 'app-component',
template: `
<h1>{{title}}</h1>
<nav>
<a routerLink="/home" routerLinkActive="active">Home</a>
</nav>
<router-outlet></router-outlet>`
})
export class AppComponent {
title = 'APP';
}
app.routing.ts app.routing.ts
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './Home/home.module'
}
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(appRoutes);
Home/home.module.ts 首页/ home.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { HomeComponent } from './home.component';
import { routing } from './home.routing';
@NgModule({
imports: [
BrowserModule,
routing],
declarations: [
HomeComponent]
})
export class HomeModule { }
Home/home.routing.ts 首页/ home.routing.ts
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home.component';
const homeRoutes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
component: HomeComponent
}
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forChild(homeRoutes);
功能模块应导入CommonModule而不是BrowserModule
When setting up a route where your app.route.ts
will load your HomeModule using loadChildren
there are two things you must do. 在设置
app.route.ts
将使用loadChildren
加载HomeModule的路线时,您必须做两件事。 Either: 或者:
export default class HomeModule() {} // note *default*
or in your app.route.ts
you need to add #HomeModule
: 或者在你的
app.route.ts
你需要添加#HomeModule
:
import { Routes, RouterModule } from '@angular/router';
const appRoutes: Routes = [
{
path: '',
redirectTo: '/home',
pathMatch: 'full'
},
{
path: 'home',
loadChildren: './Home/home.module#HomeModule' <-- or like this
}
];
export const appRoutingProviders: any[] = [
];
export const routing = RouterModule.forRoot(appRoutes);
If you plan to add additional routes to the home.route.ts it might be a good idea to define children
property like: 如果您计划向home.route.ts添加其他路由,那么定义
children
属性可能是个好主意:
import { Routes, RouterModule } from '@angular/router';
const homeRoutes: Routes = [
path: "",
component: HomeComponent,
children: [
{
path: "",
component: HomeComponent
},
{
path: ":id",
component: HomeDetailsComponent"
}
]
]
What you have to remember in the above case is that your main RouterOutlet
in your app.component.ts (if it is called like that), is not going to serve the route such as http://some_url/Home/1
in order to load HomeDetailsComponent. 在上面的例子中你需要记住的是你的
RouterOutlet
中的主要RouterOutlet
(如果它被调用的那样) 不会按顺序为http://some_url/Home/1
这样的路由提供服务加载HomeDetailsComponent。
The thing is that the route served by HomeDetailsComponent
is a child route of HomeComponent
and as such HomeComponent's template
or templateUrl
must have it's own <router-outlet></router-outlet>
defined, othwerise you will get an error message Cannot find primary outlet to load 'HomeDetailsComponent'.
问题是,由提供服务的途径
HomeDetailsComponent
是一个孩子的路线HomeComponent
,因此HomeComponent的template
或templateUrl
必须有自己的<router-outlet></router-outlet>
定义,othwerise你会得到一个错误信息Cannot find primary outlet to load 'HomeDetailsComponent'.
@yourfriendzak, just remove the '.ts' from below statement: @yourfriendzak,只需从下面的语句中删除'.ts':
import { HomeComponent } from './Home/home.module.ts' // HomeComponent not found
Hope it helps... 希望能帮助到你...
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.