[Schematics] 0. Schematics "Hello World"
1. Install schematics cli:
npm i -g @angular-devkit/schematics-cli@latest
2. Then run schematics
to create a new blank project:
schematics blank --name=my-component
It creates folder with number of files for you.
CREATE /my-component/README.md (639 bytes)
CREATE /my-component/package.json (539 bytes)
CREATE /my-component/tsconfig.json (656 bytes)
CREATE /my-component/.gitignore (191 bytes)
CREATE /my-component/.npmignore (64 bytes)
CREATE /my-component/src/collection.json (231 bytes)
CREATE /my-component/src/my-component/index.ts (318 bytes)
CREATE /my-component/src/my-component/index_spec.ts (474 bytes)
3. One important thing to do now, open .npmignore, remove line:
*.ts
It is because when you do `npm pack` to publish your schematics, it will remove all ts files, which is not what we want.
4. src/collection.json:
{
"$schema": "../node_modules/@angular-devkit/schematics/collection-schema.json",
"schematics": {
"my-component": {
"description": "A blank schematic.",
"factory": "./my-component/index#myComponent"
}
}
}
The highlighted part, is the name of your schematics. Run the following command from the my-component
directory.
schematics .:my-component
By default schematics run in staging mode, which means it won't generate any files for you. Instaed you can run:
schematics .:my-component --dry-run=false
5. Let’s do something slightly more interesting than making sure it runs and create a hello.ts
file. Modify my-component/index.ts
to have a tree.create()
command.
import { Rule, SchematicContext, Tree } from '@angular-devkit/schematics'; export function myComponent(_options: any): Rule {
return (tree: Tree, _context: SchematicContext) => {
tree.create('hello.ts', 'console.log("Hello, World")');
return tree;
};
}
describe('my-component', () => {
it('works', () => {
const runner = new SchematicTestRunner('schematics', collectionPath);
const tree = runner.runSchematic('my-component', {}, Tree.empty()); expect(tree.files).toEqual(['/hello.ts']);
});
});
[Schematics] 0. Schematics "Hello World"的更多相关文章
- Angular Schematics 三部曲之 Add
前言 因工作繁忙,差不多有三个月没有写过技术文章了,自八月份第一次编写 schematics 以来,我一直打算分享关于 schematics 的编写技巧,无奈还是拖到了年底. Angular Sche ...
- 在库中使用schematics——ng add与ng update
起步 创建一个angular库 ng new demo --create-application=false ng g library my-lib 可见如下目录结构 ├── node_modules ...
- ng 服务端渲染
官网文档 教学视屏 ng-toolkit @ng-toolkit/universal 注意: 使用 npm和yarn安装项目依赖,不要使用cnpm ng add @ng-toolkit/univers ...
- 试用 Angular v6 的 Ivy compiler
“Ivy” 是 Angular v6 的新一代渲染器.从 v6.0.0-beta.1 开始,Ivy 已经作为体验 API 发布. 作为下一代的 Angular 的视图引擎,重点在于彻底缩减代码尺寸并增 ...
- Vivado Design Suite用户指南之约束的使用第二部分(约束方法论)
Constraints Methodology(约束方法论) 关于约束方法论 设计约束定义了编译流程必须满足的要求,以使设计在板上起作用. 并非所有步骤都使用所有约束在编译流程中. 例如,物理约束仅在 ...
- Angular CLI: 1.6.7 入门
当你使用npm或者yarn也安装不了angular-cli时,请使用淘宝镜像. Step1 npm i -g cnpm --registry=https://registry.npm.taobao.o ...
- 为什么angular library的build不能将assets静态资源打包进去(转)
Versions Angular CLI: 6.0.7 Node: 9.3.0 OS: darwin x64 Angular: 6.0.3 ... animations, common, compil ...
- Angular7.1.4+Typescript3.1框架学习(二)
接着第一部分,这篇文章就 Angular cli进行介绍总结: 1. ng g:列出当前命令 ng g 需在angular工程文件夹下执行: C:\Users\zb\angulardemo\heroe ...
- 从 10.x 到 ArcGIS Pro 的 Python 迁移
与 ArcGIS Pro 结合使用 Python 的方式与包括 ArcGIS Desktop.ArcGIS Server 以及 ArcGIS Engine 在内的其他 ArcGIS 产品不同. 地理处 ...
随机推荐
- [CMD] 批处理
https://www.tutorialspoint.com/batch_script/batch_script_commands.htm
- Java开发笔记(一百三十七)JavaFX的标签
前面介绍了JavaFX的窗口框架,其中舞台.场景.窗格都能与AWT/Swing体系的相关概念一一对应,不仅如此,JavaFX的常见控件也能在Swing中找到相应的控件.比如JavaFX的按钮控件名叫B ...
- 通过命令窗口导入导出oracle数据库到dmp文件
通过命令窗口导入导出oracle数据库到dmp文件 很多时候我们需要备份Oracle的数据库,然后将数据导入其他数据库,因为有大文本字段会导致insert无法完全导出,只能导出为dmp文件,前提是wi ...
- XGBoost 重要参数(调参使用)
XGBoost 重要参数(调参使用) 数据比赛Kaggle,天池中最常见的就是XGBoost和LightGBM. 模型是在数据比赛中尤为重要的,但是实际上,在比赛的过程中,大部分朋友在模型上花的时间却 ...
- Golang 实现单例模式
目录 只适用于单线程环境 支持并发版本 优化并发版本 sync.Once版本 只适用于单线程环境 package main import "fmt" type Single str ...
- R学习笔记3 数据处理
1,日期类型 日期类型比较特殊,日期值通常以字符串的形式输入到R中,然后使用as.Date()函数转换为以数值形式存储的日期变量 mydate <- as.Date("2019-01- ...
- idea 终端terminal修改git bash
1 Ctrl+Alt+s 打开设置修改shell path 2 Alt +12 或View + Tool Windows + Terminal 修改成功
- WPF 的 Application.Current.Dispatcher 中,Dispatcher 属性一定不会为 null
原文:WPF 的 Application.Current.Dispatcher 中,Dispatcher 属性一定不会为 null 在 WPF 程序中,可能会存在 Application.Curren ...
- MVC模式和Maven项目构建
1. 尽管Servlet + JSP可以完成全部的开发工作,但是代码耦合度高.可读性差.重用性不好,维护.优化也不方便.所以才有了MVC. MVC是当前WEB开发的主流模式,核心是使用Strut ...
- 北航OO课程完结总结
什么是OO? 面向对象,是一种编程的思想方法,但是在这门课程中,我们实际学习到的是将理论运用到具体实践上,将自己的想法付诸实践,不断去探索和优化的这一体验. 后两次作业架构总结 本单元两次作业,我们面 ...