Fonctionnalité module pas l'exportation de composants

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

Question 1: NgModel Import/Export

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

la maison.le module.ts exportations HomeModule, pas HomeComponent.

@NgModule les exportations de rendre Angular2 caractéristiques de ceux de l'exportation de composants disponibles pour le module d'importation. caractéristiques peut être des directives de modèle, sélecteur, injectable de service, etc.

Composante accueil fonction est son sélecteur. Donc importer HomeModule dans l'app.module fera HomeComponent sélecteur de home disponible à n'importe quelle application.module du composant.

Avoir HomeModule exportation HomeComponent explicitement, index.js et l'index.d.ts sont nécessaires. (Inspiré par Fabio Antunes réponse)

Utiliser le sélecteur de home

Pour l'utiliser, exports: [ HomeComponent ] est nécessaire dans la maison.le module.ts.

app.le 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.composante.ts à l'aide du sélecteur de home

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

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

Utilisation HomeComponent

À utiliser HomeComponent directement, nous devons ajouter index.js et l'index.d.ts ./Maison

./Home/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';

Puis importer la Maison Module npm paquet

app.le routage.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);

Question 2: Routage (à l'enfant module)

De route à un module, l'enfant module nécessité de disposer de sa propre configuration d'un routeur.

Utilisation loadChildren dans le parent de routage(app.le routage.ts).

Utilisation RouterModule.forChild de l'enfant de routage(à la maison.le routage.ts).

app.le 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.composante.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.le routage.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);

À la maison/à la maison.le 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 { }

À la maison/à la maison.le routage.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);

OriginalL'auteur John Siu

Lors de la configuration d'une route où votre app.route.ts vous permettra de charger vos HomeModule à l'aide de loadChildren il y a deux choses que vous devez faire. Soit:

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

ou dans votre app.route.ts vous devez ajouter #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);

Si vous prévoyez d'ajouter des itinéraires supplémentaires à la maison.l'itinéraire.ts, il pourrait être une bonne idée de définir children propriété comme:

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

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

Ce que vous avez à retenir dans le cas ci-dessus, c'est que votre principal RouterOutlet dans votre application.composante.ts (si ça s'appelle comme ça), est ne va pas servir la route telle qu' http://some_url/Home/1 afin de charger HomeDetailsComponent.

Le truc, c'est que la route servi par HomeDetailsComponent est un enfant de l'itinéraire de HomeComponent et en tant que tel HomeComponent de template ou templateUrl doit disposer de sa propre <router-outlet></router-outlet> défini, othwerise, vous obtiendrez un message d'erreur Cannot find primary outlet to load 'HomeDetailsComponent'.

OriginalL'auteur Husein Roncevic