AoT + Webpack + json 动态要求

AoT + Webpack + json dynamic require

安装 webpack 的 AoT 插件 (https://www.npmjs.com/package/@ngtools/webpack) 后,dynamic requires 不再工作:

// Example that used to work
public getJson<T>(fileName: String): T {
    return require(`../../${fileName}_${this.lang}.json`);
}

使用标准 ts-loaderawesome-typescript-loader 等,dynamic requires 工作并且 webpack 将 json 文件捆绑到主 app 包中。但是,使用 AoT/Webpack 插件根本不会捆绑 json 文件。我什至认为 aot loader 不再遍历 json 文件。

有什么办法让它再次发挥作用吗?谢谢。

信息:

https://github.com/angular/angular-cli/issues/3306

https://github.com/angular/angular-cli/pull/4153

更新:

SystemJS -> System.import() 有点配合,但不稳定 https://github.com/angular/angular-cli/issues/6629#issuecomment-336411537

解决方法是使用 System.import() 构建加载并捆绑动态文件,然后使用标准的 webpack 机制加载实际文件:

    public getLazyFiles<T>(somePath: string): T {
        /* AoT Hack - causes the AoT to find and prepare the dynamically loaded files */
        System.import(`../../${somePath}_${this.someSuffix}.json`);
        /* ------- */
        // This is then used by webpack to actually load the files
        return require(`../../${somePath}_${this.someSuffix}.json`);
    }

此处解释了为什么需要此解决方法:https://github.com/angular/angular-cli/issues/6629#issuecomment-336478854