能否通过已编译的chunk.js文件加载Angular 4模块或导入Angular模块？

当然可以！在Angular 4中，通过已编译的chunk文件（比如someModule.chunk.js）加载/导入模块是完全可行的，这其实就是Angular懒加载机制的核心实现方式之一。

核心实现方式：路由懒加载 #

Angular 4原生支持模块的懒加载，当你配置路由使用loadChildren语法时，Angular CLI（或你使用的构建工具如Webpack）会自动将对应的模块编译成独立的chunk文件，在用户访问对应路由时才动态加载这个chunk。

举个简单的路由配置例子：

const routes: Routes = [
  {
    path: 'lazy',
    // 指定要懒加载的模块路径，编译后会生成对应的chunk文件
    loadChildren: './lazy/lazy.module#LazyModule'
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

当用户访问/lazy路径时，浏览器会自动请求编译后的lazy.module.chunk.js（类似你说的someModule.chunk.js），并加载对应的Angular模块。

手动动态加载模块 #

如果你需要在路由之外手动加载chunk形式的Angular模块，也可以利用ES6的动态import()语法（Angular 4支持这种方式，前提是你的构建工具配置正确）。示例代码如下：

// 动态加载指定模块的chunk文件
import('./someModule/someModule.module')
  .then(module => {
    // 获取模块类
    const SomeModule = module.SomeModule;
    // 可以将模块注入到当前应用中，比如使用Compiler.compileModuleAndAllComponentsAsync
    this.compiler.compileModuleAndAllComponentsAsync(SomeModule)
      .then(factory => {
        // 后续可以创建组件实例等操作
        const componentFactory = factory.componentFactories.find(cf => cf.componentType === SomeComponent);
        // ...
      });
  })
  .catch(error => {
    console.error('加载模块失败:', error);
  });

这种方式下，构建工具同样会把someModule.module.ts编译成独立的someModule.chunk.js文件，在调用import()时动态加载。

一些注意事项 #

• 确保你的构建工具（比如Angular CLI或Webpack）配置了代码分割（code splitting），这样才能将模块编译成独立的chunk文件。
• Angular 4中loadChildren的语法是路径#模块类名的字符串形式，后续Angular版本有所简化，但Angular 4仍然使用这种写法。
• chunk文件的命名可以通过构建工具的配置进行自定义，比如在Angular CLI中可以修改angular.json里的输出配置。

内容的提问来源于stack exchange，提问作者selvin john