Last active
April 18, 2022 20:01
Star
You must be signed in to star a gist
Add HMR to Angular CLI
This file contains 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!