typescript 功能模块不导出组件

Feature module not exporting component

提问by zakdances

My simple app has a root module named AppModuleand a feature module named HomeModule. I'm trying to create a route for a component named HomeComponent(which is part of HomeModule) but all I get is

我简单的应用程序有一个名为根模块的AppModule和指定功能模块HomeModule。我试图创建一个名为部件的路由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

主页.component.ts

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

@Component({
  selector: 'home',
  template: '<h1>Hello World</h1>'
})

export class HomeComponent { }

Why is HomeModulenot exporting its component?

为什么HomeModule不导出其组件？

回答by John Siu

Ref1:http://angularjs.blogspot.com/2016/08/angular-2-rc5-ngmodules-lazy-loading.htmlRef2:https://angular.io/docs/ts/latest/guide/ngmodule.html#!#imports

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

Issue 1: NgModel Import/Export

问题 1：NgModel 导入/导出

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 featuresof those export components available to the importing module. featurescan be template directives, selector, injectable service, etc.

@NgModule 导出使这些导出组件的Angular2功能可用于导入模块。功能可以是模板指令、选择器、可注入服务等。

Home component featureis its selector. So importing HomeModuleinto app.module will make HomeComponentselector homeavailable to any app.module's component.

Home 组件功能是它的选择器。因此导入HomeModuleapp.module 将使HomeComponent选择器home可用于任何 app.module 的组件。

To have HomeModule export HomeComponent explictly, index.js and index.d.ts are needed. (Inspired by Fabio Antunes answer)

要让 HomeModule 显式导出 HomeComponent，需要 index.js 和 index.d.ts。（灵感来自 Fabio Antunes 的回答）

Use selector home

使用选择器 home

To use this, exports: [ HomeComponent ]is required in home.module.ts.

要使用它，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.tsusing 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';
}

Use HomeComponent

使用 HomeComponent

To use HomeComponent directly, we need to add index.js and index.d.ts into ./Home

直接使用HomeComponent需要在./Home中添加index.js和index.d.ts

./Home/index.js

./主页/index.js

exports.HomeModule = require('./home.module').HomeModule;
exports.HomeComponent = require('./home.component').HomeComponent;

./Home/index.d.ts

./主页/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);

Issue 2: Routing (to child module)

问题 2：路由（到子模块）

To route to a module, the child module need to have its own router setup.

要路由到一个模块，子模块需要有自己的路由器设置。

Use loadChildrenin parent routing(app.routing.ts).

使用loadChildren父路由（app.routing.ts）。

Use RouterModule.forChildin child routing(home.routing.ts).

使用RouterModule.forChild儿童路由（home.routing.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

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

回答by Yakov Fain

Feature modules should import CommonModule instead of BrowserModule

功能模块应该导入 CommonModule 而不是 BrowserModule

回答by Husein Roncevic

When setting up a route where your app.route.tswill load your HomeModule using loadChildrenthere are two things you must do. Either:

在设置您app.route.ts将使用加载 HomeModule的路线时，您loadChildren必须做两件事。任何一个：

export default class HomeModule() {} // note *default*

or in your app.route.tsyou 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 childrenproperty 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 RouterOutletin your app.component.ts (if it is called like that), is not going to servethe route such as http://some_url/Home/1in order to load HomeDetailsComponent.

在上述情况下，您必须记住的是，您RouterOutlet的 app.component.ts 中的 main（如果它是这样调用的）不会为诸如http://some_url/Home/1加载 HomeDetailsComponent 之类的路由提供服务。

The thing is that the route served by HomeDetailsComponentis a child route of HomeComponentand as such HomeComponent's templateor templateUrlmust 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'.

回答by Shivam

@yourfriendzak, just remove the '.ts' from below statement:

@yourfriendzak，只需从以下语句中删除“.ts”：

import { HomeComponent } from './Home/home.module.ts' // HomeComponent not found

Hope it helps...

希望能帮助到你...