Question

我在角度4中实现了延迟加载模块。它运行良好。当我导航到新页面时，它将加载额外的js文件，如： 0.chunk.js，1.chunk.js。

我的问题是：如何更改该块名称？例如： 1.chunk.js =＆gt; about.js 0.chunk.js =＆gt; user.js的

Answer 1

到目前为止，我知道如何命名延迟加载块的唯一方法是使用Angular CLI之外的webpack配置和angular-router-loader包：

https://github.com/brandonroberts/angular-router-loader/blob/master/docs/options.md#lazy-loading-options

以下是webpack.config.js文件中的加载程序示例

{
    test: /\.ts$/,
    loaders: [
      {
          loader: 'awesome-typescript-loader',
          options: { configFileName: helpers.root('src', 'tsconfig.json')
      }
      },  
      'angular-router-loader',
      'angular2-template-loader'
    ]
}

然后应该像这样配置路由路径：

{
  path: 'lazy',
  loadChildren './lazy.module#LazyModule?chunkName=MyChunk'
}

我已经等待一段时间才能将此功能添加到角度cli中。问题在于：https://github.com/angular/angular-cli/issues/5171

Answer 2

将@ angular / cli更新为1.3.0-beta。它会自动为您的懒人块提供your-lazy-loading.module.chunk.js的名称。我需要做的就是npm install -g @angular/cli@1.3.0-beta.1并将package.json更新为

devDependencies": {
    "@angular/cli": "1.3.0-beta.1", 
...
}

最后，运行npm install。所以，你很高兴！

Answer 3

我假设您正在使用Webpack构建Angular。

在webpack.config中我们有一个配置属性＆＃34;输出＆＃34;。

更改为（ex）：

const DistDirectory = path.resolve(__dirname, '../dist');

...,
output: {
   path: DistDirectory,
   filename: '[name].[hash].bundle.js'
}

在这种情况下，我们的结果将是这样的： 0.89872d7bedaacc90c95a.bundle.js

希望它有所帮助。

P / s：我认为你在angular-cli中也有这个配置

如何在角度4延迟加载中更改chunk.js名称

3 个答案: