功能模块不导出组件

Question

我的简单应用程序有一个名为 AppModule 的根模块和一个名为 HomeModule 的功能模块。我正在尝试为名为 HomeComponent 的组件创建路由（它是 HomeModule 的一部分），但我得到的只是

Module "HomeModule" has no exported member 'HomeComponent'

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

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

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

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

export class HomeComponent { }

HomeModule 为什么不导出其组件？

Answer 1

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：NgModel导入/导出

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

home.module.ts导出HomeModule，而不是HomeComponent。

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

主页组件功能是其选择器。因此，将HomeModule导入app.module会使HomeComponent选择器home可用于任何app.module的组件。

要使HomeModule显式导出HomeComponent，需要index.js和index.d.ts。 （受Fabio Antunes的启发回答）

使用选择器home

要使用此功能，home.module.ts中需要exports: [ HomeComponent ]。

<强> 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 { }

使用选择器home

app.component.ts

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

@Component({
    selector: 'app-component',
    template: `
        <h1>{{title}}</h1>
        <home></home>`
})
export class AppComponent {
    title = 'APP';
}

使用HomeComponent

要直接使用HomeComponent，我们需要将index.js和index.d.ts添加到./Home

<强> ./主页/ index.js

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

<强> ./主页/ index.d.ts

exports * './home.module';
exports * from './home.component';

然后像npm包那样导入Home Module

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

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

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

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

在子路由中使用RouterModule.forChild（home.routing.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

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

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

Answer 2

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

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

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

如果您计划向home.route.ts添加其他路线，那么定义children属性可能是个好主意：

import { Routes, RouterModule } from '@angular/router';

const homeRoutes: Routes = [
    path: "",
    component: HomeComponent,
    children: [
        {
            path: "",
            component: HomeComponent
        },
        {
            path: ":id",
            component: HomeDetailsComponent"
        }
    ]
]

在上述情况下，您必须记住的是，您的app.component.ts中的主RouterOutlet（如果它被称为那样），将无法投放路由如http://some_url/Home/1以加载HomeDetailsComponent。

问题是由HomeDetailsComponent提供的路线是HomeComponent的子路线，因此HomeComponent的template或templateUrl必须拥有自己的<router-outlet></router-outlet>已定义，othwerise您将收到错误消息Cannot find primary outlet to load 'HomeDetailsComponent'.

Answer 3

@yourfriendzak，只需删除＆＃39; .ts＆＃39;来自以下声明：

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

希望它有所帮助...