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

代码地址

• 地址