Last active
April 18, 2022 20:01
-
-
Save thomaswmanion/5de24a9748607ce7ada16bca75b60810 to your computer and use it in GitHub Desktop.
Add HMR to Angular CLI
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| createEnvFile() { | |
| production=$1 | |
| hmr=$2 | |
| file=$3 | |
| echo "export const environment = {" > $file | |
| echo " production: $production," >> $file | |
| echo " hmr: $hmr" >> $file | |
| echo "};" >> $file | |
| } | |
| if [ ! -f angular.json ]; then | |
| echo "The file angular.json is missing. Please run in the Angular root directory" | |
| exit 1 | |
| fi | |
| # Create HMR environment | |
| echo "Creating HMR environment" | |
| createEnvFile false true src/environments/environment.hmr.ts | |
| # Update Prod environment | |
| echo "Updating Prod environment" | |
| createEnvFile true false src/environments/environment.prod.ts | |
| # Update Dev environment | |
| echo "Updating Dev environment" | |
| createEnvFile false false src/environments/environment.ts | |
| dir=`pwd` | |
| app=`node -p "require('./package.json').name"` | |
| # Update angular.json build configuration | |
| echo "Updating angular.json build configuration" | |
| updated=`node -p 'const json = require("./angular.json"); json.projects['"'$app'"'].architect.build.configurations.hmr = { "fileReplacements": [{"replace": "src/environments/environment.ts","with": "src/environments/environment.hmr.ts"}]}; JSON.stringify(json, null, 4)'` | |
| echo "$updated" > angular.json | |
| # Update angular.json serve configuration | |
| echo "Updating angular.json serve configuration" | |
| updated=`node -p 'const json = require("./angular.json"); json.projects['"'$app'"'].architect.serve.configurations.hmr = {"hmr": true,"browserTarget": "'"$app"':build:hmr"}; JSON.stringify(json, null, 4)'` | |
| echo "$updated" > angular.json | |
| # Update App TSConfig | |
| echo "Updating App TSConfig" | |
| file=src/tsconfig.app.json | |
| updated=`node -p 'const json = require("./'"$file"'"); json.compilerOptions.types = ["node"]; JSON.stringify(json, null, 4)'` | |
| echo "$updated" > $file | |
| # Add NPM Script | |
| echo "Adding NPM Script hmr" | |
| updated=`node -p 'const json = require("./package.json"); json.scripts.hmr = "ng serve --configuration hmr"; JSON.stringify(json, null, 4)'` | |
| echo "$updated" > package.json | |
| # Installing Angularclass HMR | |
| echo "Installing @angularclass/hmr" | |
| npm install --save-dev @angularclass/hmr | |
| # Create src/hmr.ts | |
| echo "Creating src/hmr.ts" | |
| file=src/hmr.ts | |
| echo "import { NgModuleRef, ApplicationRef } from '@angular/core';" > $file | |
| echo "import { createNewHosts } from '@angularclass/hmr';" >> $file | |
| echo "" >> $file | |
| echo "export const hmrBootstrap = (module: any, bootstrap: () => Promise<NgModuleRef<any>>) => {" >> $file | |
| echo " let ngModule: NgModuleRef<any>;" >> $file | |
| echo " module.hot.accept();" >> $file | |
| echo " bootstrap().then(mod => ngModule = mod);" >> $file | |
| echo " module.hot.dispose(() => {" >> $file | |
| echo " const appRef: ApplicationRef = ngModule.injector.get(ApplicationRef);" >> $file | |
| echo " const elements = appRef.components.map(c => c.location.nativeElement);" >> $file | |
| echo " const makeVisible = createNewHosts(elements);" >> $file | |
| echo " ngModule.destroy();" >> $file | |
| echo " makeVisible();" >> $file | |
| echo " });" >> $file | |
| echo "};" >> $file | |
| # Update src/main.ts | |
| echo "Updating src/main.ts" | |
| file=src/main.ts | |
| echo "import { enableProdMode } from '@angular/core';" > $file | |
| echo "import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';" >> $file | |
| echo "" >> $file | |
| echo "import { AppModule } from './app/app.module';" >> $file | |
| echo "import { environment } from './environments/environment';" >> $file | |
| echo "" >> $file | |
| echo "import { hmrBootstrap } from './hmr';" >> $file | |
| echo "" >> $file | |
| echo "if (environment.production) {" >> $file | |
| echo " enableProdMode();" >> $file | |
| echo "}" >> $file | |
| echo "" >> $file | |
| echo "const bootstrap = () => platformBrowserDynamic().bootstrapModule(AppModule);" >> $file | |
| echo "" >> $file | |
| echo "if (environment.hmr) {" >> $file | |
| echo " if (module[ 'hot' ]) {" >> $file | |
| echo " hmrBootstrap(module, bootstrap);" >> $file | |
| echo " } else {" >> $file | |
| echo " console.error('HMR is not enabled for webpack-dev-server!');" >> $file | |
| echo " console.log('Are you using the --hmr flag for ng serve?');" >> $file | |
| echo " }" >> $file | |
| echo "} else {" >> $file | |
| echo " bootstrap().catch(err => console.log(err));" >> $file | |
| echo "}" >> $file | |
| echo "Done!!! Run npm run hmr to start" |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Cool, thank you!