如何使用角度CLI

Question

我創造的角2 CLI應用程序，我的應用程序模塊會太長所以現在我想創建子模塊

創建子模塊

我的子模塊

import { NgModule } from '@angular/core'; 
import { Routes, RouterModule } from '@angular/router'; 
import { CommonModule } from '@angular/common'; 
import { ProjectComponent } from './project.component'; 
import { ProjectListingComponent } from './project-listing/project-listing.component'; 
import { ProjectCreateUpdateComponent } from './project-create-update/project-create-update.component'; 


// routing set for project module 

const routes: Routes = [ 
    {path:'project/add' , component:ProjectCreateUpdateComponent}, 
    {path:'project/:id/edit' , component:ProjectCreateUpdateComponent}, 
    {path:'project-listing' ,component:ProjectListingComponent}, 
]; 

@NgModule({ 
    imports: [RouterModule.forChild(routes)], 
    exports: [RouterModule], 
    providers: [] 
}) 
export class ProjectRoutingModule { } 


// Main module for project 
@NgModule({ 
    imports: [ 
    CommonModule, 
    ProjectRoutingModule 
    ], 
    declarations: [ProjectComponent, ProjectListingComponent, ProjectCreateUpdateComponent ] 
}) 
export class ProjectModule { } 

>主模塊是

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { DatePipe } from '@angular/common'; 
//import { ViewContainerRef} from '@angular/core'; 
import { FormsModule } from '@angular/forms'; 
import { HttpModule } from '@angular/http'; 
import { routing } from './app.routing'; 
import { ReactiveFormsModule } from '@angular/forms'; 

import { MaterialModule } from '@angular/material'; 

//custom modules 
import {ProjectModule} from './project_module/project.module'; 

import { HomeComponent } from './home/home.component'; 
... 
@NgModule({ 
    declarations: [ 
    AppComponent, 
    GradeComponent, 
    GradeListingComponent, 
    HomeComponent, 
    GradeComponent, 
    ... 

    ], 
    imports: [ 
    BrowserModule, 
    FormsModule, 
    HttpModule, 
    routing,  
    MaterialModule.forRoot(), 
    ReactiveFormsModule,   
    ProjectModule 

    ], 
    providers: [ 
    NotificationsService, 
    DatePipe, 
    GradeService, 
    ...   
    ], 
    exports: [ 
     ConfirmDialogComponent, 
    ], 
    entryComponents: [ 
    logsShow 
    ], 
    bootstrap: [AppComponent] 
}) 
export class AppModule { } 

乙UT問題來了我的子模塊無法訪問材料模塊值 和其他模塊/插件我在app.module使用..

是什麼讓這個方式..也面臨着路由

Answer 1

問題

這是完全正常的。如果您想從子模塊訪問MaterialModule，則必須在此子模塊中聲明MaterialModule。

這將是與你的所有共享的模塊相當跛腳...

解決這個基本的方法就是創建要在整個應用程序使用SharedModule，進口/出口的一切。

例如，這裏是我的當前項目的shared.module.ts文件：

export const modules = [ 
    CommonModule, 
    ReactiveFormsModule, 
    HttpModule, 
    RouterModule, 
    MaterialModule, 
    FlexLayoutModule, 
    StoreModule, 
    StoreDevtoolsModule, 
    TranslateModule, 
    PrettyJsonModule, 
    SimpleNotificationsModule 
]; 

export const declarations = [GenerateIconComponent, ColorSearchedLettersDirective]; 

@NgModule({ 
    imports: modules, 
    exports: [...modules, ...declarations], 
    declarations 
}) 
export class SharedModule { } 

然後我將其導入每子模塊。

你應該在官方的文檔看看太：

https://angular.io/docs/ts/latest/guide/ngmodule.html#!#shared-module