AoT + Webpack + json 动态需求答案

【问题标题】：AoT + Webpack + json dynamic requireAoT + Webpack + json 动态需求
【发布时间】：2017-10-12 09:48:45
【问题描述】：

为 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-loader 或awesome-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

【问题讨论】：

标签： json angular webpack loader angular2-aot

【解决方案1】：

解决方法是使用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

【讨论】：