web-dev-qa-db-ja.com

機能モジュールがコンポーネントをエクスポートしない

私のシンプルなアプリには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がコンポーネントをエクスポートしないのはなぜですか？

angulartypescriptimportmodule
11
zakdances

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は、テンプレートディレクティブ、セレクター、注入可能なサービスなどにすることができます。

ホームコンポーネント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を使用する

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

問題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/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);
12
John Siu

機能モジュールはBrowserModuleではなくCommonModuleをインポートする必要があります

3
Yakov Fain

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'.が表示されます

1
Husein Roncevic

@yourfriendzak、以下のステートメントから '.ts'を削除してください：

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

それが役に立てば幸い...

1
Shivam