私のシンプルなアプリには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がコンポーネントをエクスポートしないのはなぜですか?
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
import { HomeComponent } from './Home/home.module.ts' // HomeComponent not found
home.module.tsはHomeModule
ではなくHomeComponent
をエクスポートします。
@NgModuleエクスポートにより、それらのエクスポートコンポーネントのAngular2機能をインポートモジュールで使用できるようになります。 featuresは、テンプレートディレクティブ、セレクター、注入可能なサービスなどにすることができます。
ホームコンポーネントfeatureはそのセレクターです。したがって、HomeModule
をapp.moduleにインポートすると、HomeComponent
セレクターhome
がすべてのapp.moduleのコンポーネントで使用できるようになります。
HomeModuleでHomeComponentを明示的にエクスポートするには、index.jsとindex.d.tsが必要です。 (Fabio Antunesの回答に触発されました)
home
これを使用するには、exports: [ HomeComponent ]
は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セレクターを使用home
import {Component} from '@angular/core';
@Component({
selector: 'app-component',
template: `
<h1>{{title}}</h1>
<home></home>`
})
export class AppComponent {
title = 'APP';
}
HomeComponentを直接使用するには、index.jsとindex.d.tsを./Homeに追加する必要があります
./ 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';
次に、npmパッケージのようなホームモジュールをインポートします。
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);
モジュールにルーティングするには、子モジュールに独自のルーターを設定する必要があります。
親ルーティング(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/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
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);
機能モジュールはBrowserModuleではなくCommonModuleをインポートする必要があります
app.route.ts
がloadChildren
を使用してHomeModuleをロードするルートを設定する場合、2つのことを行う必要があります。どちらか:
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
が(そのように呼び出された場合)、配信されないルートHomeDetailsComponentをロードするためにhttp://some_url/Home/1
として。
重要なのは、HomeDetailsComponent
が提供するルートはHomeComponent
の子ルートであるため、HomeComponentのtemplate
またはtemplateUrl
には、独自の<router-outlet></router-outlet>
が定義されている必要があります。エラーメッセージCannot find primary outlet to load 'HomeDetailsComponent'.
が表示されます
@yourfriendzak、以下のステートメントから '.ts'を削除してください:
import { HomeComponent } from './Home/home.module.ts' // HomeComponent not found
それが役に立てば幸い...