Làm thế nào để thay đổi tên chunk.js trong góc 4 tải lười biếng

Question

Tôi đã thực hiện mô-đun tải lười ở góc 4. nó hoạt động tốt. và khi tôi điều hướng đến trang mới, nó sẽ tải thêm tệp js như: 0.chunk.js, 1.chunk.js.

câu hỏi của tôi là: cách thay đổi tên đoạn đó? ví dụ: 1.chunk.js => about.js 0.chunk.js => user.js

Answer 1

Cho đến nay cách duy nhất tôi biết làm thế nào để đặt tên cho khối lười nạp là bằng cách sử dụng một cấu hình webpack bên ngoài của góc CLI với angular- Router-loader gói:

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

Dưới đây là một ví dụ về bộ nạp trong một file webpack.config.js

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

Sau đó, thứ e đường dẫn định tuyến phải được định cấu hình như sau:

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

Tôi đã chờ đợi một lúc để tính năng này được thêm vào cli góc. Đây là vấn đề: https://github.com/angular/angular-cli/issues/5171

Answer 2

Tôi giả sử bạn đang sử dụng Webpack để xây dựng Góc.

trong webpack.config, chúng tôi là thuộc tính cấu hình "đầu ra".

Thay đổi (ví dụ):

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

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

Trong trường hợp này, kết quả của chúng tôi sẽ như thế này: 0.89872d7bedaacc90c95a.bundle.js

Hy vọng nó hữu ích.

P/s: Bạn cũng có cấu hình này ở góc-cli Tôi nghĩ

Answer 3

Cập nhật @ angular/cli to 1.3.0-beta. Nó tự động cung cấp tên cho các khối lười của bạn là your-lazy-loading.module.chunk.js. Tất cả tôi cần làm là npm install -g @angular/cli@1.3.0-beta.1 và cập nhật package.json như

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

Cuối cùng, chạy npm install. Vì vậy, bạn tốt để đi!