{"id":20260775,"url":"https://github.com/independer/angular-named-lazy-chunks-webpack-plugin","last_synced_at":"2025-04-11T01:41:48.984Z","repository":{"id":57178815,"uuid":"108172062","full_name":"Independer/angular-named-lazy-chunks-webpack-plugin","owner":"Independer","description":"A Webpack plugin that assigns names to the async chunks generated for lazy routes in an Angular 2+ app","archived":false,"fork":false,"pushed_at":"2019-01-15T13:05:38.000Z","size":19,"stargazers_count":7,"open_issues_count":1,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2024-11-01T04:05:32.761Z","etag":null,"topics":["angular","angular4","webpack","webpack-plugin"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Independer.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-10-24T19:13:16.000Z","updated_at":"2022-11-21T06:26:23.000Z","dependencies_parsed_at":"2022-09-09T17:30:24.626Z","dependency_job_id":null,"html_url":"https://github.com/Independer/angular-named-lazy-chunks-webpack-plugin","commit_stats":null,"previous_names":[],"tags_count":4,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Independer%2Fangular-named-lazy-chunks-webpack-plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Independer%2Fangular-named-lazy-chunks-webpack-plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Independer%2Fangular-named-lazy-chunks-webpack-plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Independer%2Fangular-named-lazy-chunks-webpack-plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Independer","download_url":"https://codeload.github.com/Independer/angular-named-lazy-chunks-webpack-plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224610580,"owners_count":17340124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular4","webpack","webpack-plugin"],"created_at":"2024-11-14T11:22:14.116Z","updated_at":"2024-11-14T11:22:14.908Z","avatar_url":"https://github.com/Independer.png","language":"JavaScript","readme":"[![Build status](https://travis-ci.org/Independer/angular-named-lazy-chunks-webpack-plugin.svg?branch=master)](https://travis-ci.org/Independer/angular-named-lazy-chunks-webpack-plugin)\n\n# Angular Named Lazy Chunks Webpack Plugin \n\nAssigns names to the async chunks generated by Webpack for lazy routes in an Angular app. \n\nExample:\n\n**app.module.ts**\n```ts\nexport const ROUTES: Routes = [\n  { path: '', component: HomeComponent },\n  { path: 'gallery', loadChildren: './gallery/gallery.module#GalleryModule' },\n  { path: 'about', loadChildren: './about/about.module#AboutModule' }\n];\n\n@NgModule({\n  imports: [RouterModule.forRoot(ROUTES)],\n  declarations: [AppComponent]\n})\nexport class AppModule { }\n```\n\nWebpack build output without the `AngularNamedLazyChunksWebpackPlugin`:\n\n```\n                        Asset     Size  Chunks           \n    0.155b2d62f27ec0c62c13.js  3.92 kB       0  [emitted]\n    1.5d938dc52f1919e39aa9.js  3.82 kB       2  [emitted]\n  app.9d8bb980840d155d8745.js  13.1 kB       4  [emitted]\n                 polyfills.js   6.9 kB       7  [emitted]\n                    vendor.js  8.38 kB       9  [emitted]\n```\n\nWebpack build output **with** the plugin:\n```\n                              Asset     Size  Chunks           \n    gallery.155b2d62f27ec0c62c13.js  3.92 kB       0  [emitted]\n      about.5d938dc52f1919e39aa9.js  3.82 kB       2  [emitted]\n        app.9d8bb980840d155d8745.js  13.1 kB       4  [emitted]\n                       polyfills.js   6.9 kB       7  [emitted]\n                          vendor.js  8.38 kB       9  [emitted]\n```\n\n## Installation\n\n```bash\n$ npm install --save-dev angular-named-lazy-chunks-webpack-plugin\n```\n\n## Usage\n\n**webpack.config.js**\n```js\nconst AngularNamedLazyChunksWebpackPlugin = require('angular-named-lazy-chunks-webpack-plugin');\n\nmodule.exports = {\n  ...\n  plugins: [\n    ...\n    new AngularNamedLazyChunksWebpackPlugin()\n  ]\n}\n```\n\n### Options\n\n```js\n{\n  // Default: false\n  // Set to \"true\" if you have multiple apps built with one Webpack config and \n  // the build output goes to one folder. In this case the plugin will try to\n  // determine the name of the app based on the page to the module (see \n  // \"appNameRegex\" option) and prefix the chank name with the app name (e.g.\n  // app1.gallery.155b2d62f27ec0c62c13.js).\n  multiAppMode: boolean,\n\n  // Default: \"apps(\\\\\\/|\\\\\\\\)(.*?)(\\\\\\/|\\\\\\\\)\"\n  // When \"multiAppMode\" is set to \"true\" this regular expression is used for\n  // extracting the name of the app from the module file path.\n  // E.g. if you have the following file structure:\n  // apps/\n  //   app1/\n  //     module1\n  //     module2\n  //   app2/\n  //     module1\n  //     module2\n  // The chunks will be named \"app1.module1.15..c13.js\", \n  // \"app2.module1.9d...745.js\", etc.\n  // \n  // Note: If a custom regex expression is provide, the name of the app is assumed to be the first match group in that regex.\n  appNameRegex: string,\n  \n  // A function that returns the name of the chunk based on the file path of the lazy module.\n  // If this function is specified then \"multiAppMode\" and \"appNameRegex\" are ignored.   \n  nameResolver: (filePath: string) =\u003e string | null\n}\n```\n\n## Credit\nFull credit goes to [Angular CLI](https://github.com/angular/angular-cli), where this plugin was [originally introduced](https://github.com/angular/angular-cli/blob/master/packages/%40angular/cli/plugins/named-lazy-chunks-webpack-plugin.ts). \n\nThis package includes a few tweaks (like multi-app support) and makes it available for Angular apps that are not based on Angular CLI and instead use custom Webpack config.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findepender%2Fangular-named-lazy-chunks-webpack-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Findepender%2Fangular-named-lazy-chunks-webpack-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Findepender%2Fangular-named-lazy-chunks-webpack-plugin/lists"}