钻研起因

  • ng library生成的模块,尽管有构建过程,实际上仅仅进行了一次繁难的包装,在我的项目中还要走一遍构建流程(尽管有metadata,然而还要剖析一遍...)
  • 冀望相似jquery那种,引入一个链接就能够应用,缩小编译时的工夫

改版阐明

  • 仅仅是为了反对aot模式的library打包,启动ivy会间接构建能够用的模块,所以此我的项目的钻研,应该有点过期了
  • 原意是将library打包输入为构建好的ngfactory模块
  • 目前绝大部分曾经胜利,惟一bug(已知)应该是ngstyle也就是style不能应用,无奈输入ngstyle
  • js间接引入 能够实现的就是近程路由技术,近程模块技术
  • 传统引入办法,被引入构建时,依然会从新构建一遍ngfactory,如果要批改,预计要间接批改angular局部包进行反对

应用阐明

  • tsconfig.json
{  "extends": "../../tsconfig.json",  "compilerOptions": {    "outDir": "../../out-tsc/lib",    "target": "es2015",    "declaration": true,    "inlineSources": true,    "types": [],    "lib": [      "dom",      "es2018"    ]  },  // 这里参考设置  "angularCompilerOptions": {    // 必须    "annotateForClosureCompiler": false,    // 必须    "skipTemplateCodegen": false,    "strictMetadataEmit": true,    "fullTemplateTypeCheck": true,    "strictInjectionParameters": true,    "enableResourceInlining": true,    // 必须    "enableIvy":false  },  "exclude": [    "src/test.ts",    "**/*.spec.ts"  ]}
  • 将此分支构建当前npm link替换掉原来的ng-packagr后,就能够应用了(失常构建流程)

实现原理

  • 首先下面的tsconfig设置是要保障代码应用默认的emit形式,既默认输入形式
  • 而后在代码中(本我的项目中)将es5的默认配置正文掉,使得和es2015输入统一(umd包是会依据es5打包的)
  • 最初通过逻辑,将输入的ngfactory文件退出到导出中(如果不退出,那么umd构建依然不蕴含)

调用构建包

  • 间接通过js引入,而后相似动静生成模块那样就Ok了
/**LibAotModuleNgFactory 这个就是通过引入的umd包中的导出*/    const ref = LibAotModuleNgFactory.create(this.inject);    console.log(ref);    const fac = ref.componentFactoryResolver.resolveComponentFactory(      ref.instance.entry    );    console.log(fac);    this.viewContainerRef.createComponent(fac);
  • 通过路由援用loadChildren形式,间接援用ngfactory
未测试,然而ng源码的测试用例中能够应用

已知问题(因为占用工夫过多,曾经没精力解决了,违心搞的大牛能够试试)

  • 不能应用style,因为没有导出ngstyle文件
  • 援用构建好的library后,依然会在构建时生成ngfactory,不晓得是ngfactory有非凡的援用办法,还是须要改ng源码,进行一些重定向或者移除替换操作(因为externals只会移除局部,html模板依然会打进去)

代码地址

  • 地址