关于angular:过时的技术ng-library静态打包实现

钻研起因

• 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模板依然会打进去)

代码地址

• 地址