一:Angular-CLI建立应用

cmd命令:ng new lazy-app --routing    (创建一个名叫 lazy-app 的应用,而 --routing 标识生成了一个名叫 app-routing.module.ts 的文件)

cd lazy-app     (进入lazy-app项目)

二:创建一个带路由的特性模块

cmd命令:ng generate module customers --routing    (创建一个 customers 目录,其中有两个文件:CustomersModule 和 CustomersRoutingModule)

备注:如果出现  Error: Cannot find module '@angular-devkit/core',那就 npm install @angular-devkit/core

:向特性模块添加组件

cmd命令:ng generate component customers/customer-list    (在 customers 目录中创建一个名叫 customer-list 的文件夹,其中包含该组件的四个文件)

:再添加一个特性模块

cmd命令:ng generate module orders --routing

ng generate component orders/order-list

三:建立UI

app.component.html

 <h1>
{{title}}
</h1> <button routerLink="/customers">Customers</button>
<button routerLink="/orders">Orders</button>
<button routerLink="">Home</button> <router-outlet></router-outlet>

四:配置路由

4.1:顶级路由:app-routing.module.ts    (惰性加载的语法:loadChildren 后面紧跟着一个字符串,它指向模块路径,然后是一个 #,然后是该模块的类名)

 const routes: Routes = [
{
path: 'customers',
loadChildren: 'app/customers/customers.module#CustomersModule'
},
{
path: 'orders',
loadChildren: 'app/orders/orders.module#OrdersModule'
},
{
path: '',
redirectTo: '',
pathMatch: 'full'
}
];

4.2:配置特性模块的路由

customers-routing.module.ts:

 import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { CustomerListComponent } from './customer-list/customer-list.component'; const routes: Routes = [
{
path: '',
component: CustomerListComponent
}
]; @NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class CustomersRoutingModule { }

orders-routing.module.ts:

 import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router'; import { OrderListComponent } from './order-list/order-list.component'; const routes: Routes = [
{
path: '',
component: OrderListComponent
}
]; @NgModule({
imports: [RouterModule.forChild(routes)],
exports: [RouterModule]
})
export class OrdersRoutingModule { }

五:正常工作

cmd命令:ng serve --open

初始化后台:

点击【Customers】后台

点击【Orders】后台

备注:forRoot() 包含的注入器配置是全局性的,比如对路由器的配置。forChild() 中没有注入器配置,只有像 RouterOutlet 和 RouterLink 这样的指令。

Angular惰性加载的特性模块的更多相关文章

  1. angular惰性加载拓展剖析

    最近把一个比较旧的业余项目重新升级了下,将主文件进行了剥离,增加了些惰性加载的配置,将过程中一些零散的知识点做个总结,同时尽量深入原理实现层面. 项目环境: 前端框架:angular2.0.0-bet ...

  2. Angular - 预加载 Angular 模块

    Angular - 预加载延迟模块 在使用路由延迟加载中,我们介绍了如何使用模块来拆分应用,在访问到这个模块的时候, Angular 加载这个模块.但这需要一点时间.在用户第一次点击的时候,会有一点延 ...

  3. Angular 懒加载找不到模块问题解决方法

    问题: 懒加载无法找到模块 解决办法: 在app-routing.module.ts中引入该模块

  4. 关于angular5的惰性加载报错问题

    之前为了测试一个模块优化问题,于是用angular-cli快速搭建了个ng5的脚手架demo,在应用惰性加载功能的时候发现浏览器报错如下: ERROR Error: Uncaught (in prom ...

  5. Angular2 ng2 如何配置惰性加载

    需要修改至少四个地方1. 将子组件进行模块化操作2.生成子组件module .子组件router3.配置主路由 信息 改为loadChild4.配置appModule 删除引入 以product组件 ...

  6. angular懒加载的一些坑

    写在前面 最近在工作中接触到angular模块化打包加载的一些内容,感觉中间踩了一些坑,在此标记一下. 项目背景: 项目主要用到angularJs作为前端框架,项目之前发布的时候会把所有的前端脚本打包 ...

  7. 雷林鹏分享:jQuery EasyUI 树形菜单 - 树形网格惰性加载节点

    jQuery EasyUI 树形菜单 - 树形网格惰性加载节点 有时我们已经得到充分的分层树形网格(TreeGrid)的数据. 我们还想让树形网格(TreeGrid)按层次惰性加载节点. 首先,只加载 ...

  8. Windows加载器与模块初始化

    本文是Matt Pietrek在1999年9月的MSJ杂志上发表的关于Windows加载器与模块初始化方面的文章.作者深入分析了LdrpRunInitialize璕outines例程的作用,用C语言写 ...

  9. 根据配置文件加载js依赖模块(JavaScript面试题)

    面试题目 根据下面的配置文件 module=[ {'name':'jquery','src':'/js/lib/jquery-1.8.3.js'}, {'name':'swfobject','src' ...

随机推荐

  1. git比较本地仓库和远程仓库的差异(转)

    转自:https://www.jianshu.com/p/6078a49900a4

  2. CAS 5.x搭建常见问题系列(1).未认证的授权服务

    错误内容 错误信息如下: 未认证授权的服务 CAS的服务记录是空的,没有定义服务.希望通过CAS进行认证的应用程序必须在服务记录中明确定义 错误原因 CAS 5.x 默认情况下不支持HTTP的客户端接 ...

  3. 无法将文件xxx复制到xxx文件xxx正由另一进程使用,因此该进程无法访问此文件

    对于VS2017,可以这样处理,开始——>运行——>tskill msbuild,然后重新生成即可.

  4. IdentityServer4实现OAuth2.0四种模式之客户端模式

    一,准备内容 IdentityServer4 是Asp.net core的一个中间件,用于添加符合OpenId Connect和OAuth2.0规范的终端到Asp.net Core应用.在这里简单介绍 ...

  5. QSDK与OPENWRT区别

    QSDK与OPENWRT区别 来源 https://www.jianshu.com/p/178ae18b2570 QSDK是一种在openwrt的基础上,加入了高通atheros芯片相关资料的一种环境 ...

  6. Euraka适合初学者的简单小demo

    1. 创建父工程:父工程的的打包形式该为pom,删除其余无关的文件 修改父工程的pom文件内容如下: <?xml version="1.0" encoding="U ...

  7. node+mysql+vue+express项目搭建

    第一步:项目搭建之前首先需要安装node环境和MySQL数据库. 在已经完成上述的条件下开始进行以下操作: npm install @vue/cli -g   (-g 代表全局安装) 初始化项目  v ...

  8. 9.如何让一个div 上下左右居中?【CS

      方法1:[绝对定位50%-本身50%]              position:absolute; left:50%; top:50%;              transform: tra ...

  9. js实现图片上传本地预览

    演示地址:https://xibushijie.github.io/static/uploadImg.html <!DOCTYPE> <html> <head> & ...

  10. gitlab异地备份并验证MD5值

    最近公司发生了蛮多事情的,唉,咱也不管问啊,好好干活吧 需求 把gitlab的备份文件异地备份一份,备份无论失败还是成功通知某邮箱 实现思路 先rsync文件过去,判断rsync这个步骤有没有成功,失 ...