了解angular10模块相关概念，快速入门！

import { BrowserModule } from '@angular/platform-browser';
//从主模块中引入NgModule(模块装饰器或模块注解)
import { NgModule } from '@angular/core';
//引入组件，因为模块为组件提供编译的上下文环境
import { AppComponent } from './app.component';
// 引入路由模块
import { AppRoutingModule } from './app-routing.module';

//装饰器以json的形式声明元数据
@NgModule({
   //组合模块的组件和管道
  declarations: [ AppComponent ],
  //模块依赖项
  imports: [ BrowserModule,AppRoutingModule ],
  //子模块可以输入导出的模块
  imports: [],
  //模块提供的服务
  providers: [],
  //指定宿主组件，只在根模块中出现
  bootstrap: [AppComponent]
})
export class AppModule { }

export declare interface NgModule {
    providers?: Provider[];// 本模块向全局服务中贡献的那些服务的创建器。 这些服务能被本应用中的任何部分使用。（你也可以在组件级别指定服务提供商，这通常是首选方式。）
    declarations?: Array<Type<any> | any[]>;// 那些属于本 NgModule 的组件、指令、管道
    imports?: Array<Type<any> | ModuleWithProviders<{}> | any[]>;// 那些导出了本模块中的组件模板所需的类的其它模块
    exports?: Array<Type<any> | any[]>;//那些能在其它模块的组件模板中使用的可声明对象的子集
    entryComponents?: Array<Type<any> | any[]>;
    bootstrap?: Array<Type<any> | any[]>;
    schemas?: Array<SchemaMetadata | any[]>;
}

ng generate module <module-name> //创建一个模块

ng g m <module-name> // 缩写

ng g m order // 创建订单模块

ng g m order --routing // 创建带路由订单模块

// profile.js
export var firstName = 'Michael';
export var lastName = 'Jackson';
export var year = 1958;

// 优先考虑下面写法
var firstName = 'Michael';
var lastName = 'Jackson';
var year = 1958;

export {firstName，lastName, year}

function a () {...}
function b () {...}

export {
    a,
    b as b_ // 通过as关键字重命名对外接口
}

// main.js
import {firstName, lastName, year} from './profile.js';

function setName(element) {
  element.textContent = firstName + ' ' + lastName;
}

import { lastName as surname } from './profile.js';

// circle.js
export function area(radius) {
  return Math.PI * radius * radius;
}

export function circumference(radius) {
  return 2 * Math.PI * radius;
}

// 使用
import * as circle from './circle';

console.log('圆面积：' + circle.area(4));
console.log('圆周长：' + circle.circumference(14))

import * as circle from './circle';

// 下面两行都是不允许的
circle.foo = 'hello';
circle.area = function () {};

ng g m user --routing //创建user模块
ng g c user/list --skip-tests //在user模块里面创建组件list

<!--order.module 订单模块-->
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; //为一些结构性指令提供支持

import { OrderRoutingModule } from './order-routing.module'; //模块具有自己的路由
import { ListComponent } from './list/list.component'; //引入list组件

@NgModule({
  declarations: [ListComponent],
  imports: [
    CommonModule,
    OrderRoutingModule
  ]
})
export class OrderModule { }

<!--order-routing.module 订单模块对应的路由模块-->
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ListComponent } from './list/list.component';


const routes: Routes = [ //子路由的组件配置
  {
    path: 'list',
    component: ListComponent
  },
];

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

<!--AppRoutingModule 根路由模块-->
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [ //根路由的配置
  {
    path: 'orders',
    loadChildren: './order/order.module#OrderModule' // 配置订单子模块
  },
  {
    path: 'users',
    loadChildren: './user/user.module#UserModule' // 配置用户子模块
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h2>
    Welcome to {{ title }}!
  </h2>
</div>


<button routerLink="/user/list">user</button> //路由跳转
<button routerLink="/order/list">order</button> 

<router-outlet></router-outlet>