Skip to content

Instantly share code, notes, and snippets.

@thomaswmanion
Last active April 18, 2022 20:01
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save thomaswmanion/5de24a9748607ce7ada16bca75b60810 to your computer and use it in GitHub Desktop.
Add HMR to Angular CLI
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"
@kubk
Copy link

kubk commented May 19, 2019

Cool, thank you!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment