Angular 自定義模塊

創建自定義模塊

ng g module mymodule

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

//angular內置的模塊
import { FormsModule } from '@angular/forms';

//angualr內置的模塊
import { HttpClientModule } from '@angular/common/http';

import { AppComponent } from './app.component';
import { HomeComponent } from './components/home/home.component';
import { NewsComponent } from './components/news/news.component';


//上百個組件  會導致頁面加載比較慢  所以要模塊化

//引入自定義模塊

import { UserModule } from './module/user/user.module';



import { ProductModule } from './module/product/product.module';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    NewsComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpClientModule,
    UserModule,
    ProductModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

user.moudle.ts

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { CommonService } from './services/common.service';

import { ProfileComponent } from './components/profile/profile.component';
import { AddressComponent } from './components/address/address.component';
import { OrderComponent } from './components/order/order.component';
import { UserComponent } from './user.component';


@NgModule({

  /*user模塊里面的組件*/
  declarations: [ProfileComponent, AddressComponent, OrderComponent, UserComponent], 
  
  exports:[UserComponent,AddressComponent],  /*暴露組件 讓其他模塊里面可以使用暴露的組件*/

  providers:[CommonService],
  imports: [
    CommonModule
  ]
})
export class UserModule { }