angular - Funksjonsmodul eksporterer ikke komponent

Min enkle app har en rotmodul som heter AppModule og en funksjonsmodul som heter HomeModule. Jeg prøver å lage en rute for en komponent som heter HomeComponent (som er en del av HomeModule), men alt jeg får er

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

Hvorfor eksporterer ikke HomeModule sin komponent?

Svar #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

Problem 1: NgModel Import/Eksport

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

home.module.ts eksporterer HomeModule, ikke HomeComponent.

@NgModule-eksport gjør Angular2-funksjoner fra de eksporterte komponentene tilgjengelige for den importerende modulen. Funksjoner kan være maldirektiver, velger, injiserbar tjeneste osv.

Hovedkomponenten feature er dens velger. Så ved å importere HomeModule i app.module vil HomeComponent-velgeren home være tilgjengelig for enhver komponent i app.module.

For å få HomeModule til å eksportere HomeComponent eksplisitt, trengs index.js og index.d.ts. (Inspirert av Fabio Antunes sitt svar)

Bruk velger home

For å bruke dette, er exports: [ HomeComponent ] nødvendig i home.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 bruker velgeren home

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

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

Bruk HomeComponent

For å bruke HomeComponent direkte, må vi legge til index.js og index.d.ts i ./Home

./Hjem/index.js

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

./Home/index.d.ts

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

Importer deretter Home-modulen som npm-pakke

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

Problem 2: Ruting (til undermodul)

For å rute til en modul, må barne-modulen ha sin egen ruteroppsett.

Bruk loadChildren i overordnet ruting (app.routing.ts).

Bruk RouterModule.forChild i barneruting (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);

Hjem/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 { }

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

Svar #2

Funksjonsmoduler bør importere CommonModule i stedet for BrowserModule