HOW TO DEPLOY AND HOST AN ANGULAR 2 OR 4 PROJECT ON A SERVER
That moment you see something that wowed you, you got the item but got stuck in the process about to use/implement what you got.
That was exactly what I encountered. I heard about Angular 2, I dived into it, learning and implementing the cool features. It was really an awesome experience, only to complete a project with it and got stuck hosting the project. Hmmmm!
In this article, I will share my experience on how I deployed and hosted an Angular 2 project.
PREREQUISITE: You must have completed an Angular 2 or 4 project and about deploying to the server.
- Enable Production Mode
Angular apps run in development mode by default.
Switching to production mode can make it run faster by disabling development specific checks such as the dual change detection cycles.
To enable production mode when running remotely, edit the code in src/main.ts. to the code below:
// Enable production mode unless running locally
if (!/localhost/.test(document.location.host)) { enableProdMode(); }
2. Edit and Configure your App for Hosting
Ensure that you have edited/modified the path to your remote server.
Edit your index.html (I advise you can make duplicate) to load all node_modules from the server but if you have created your app using the ng @angular/cli, add the following codes within your head tag.
<! — Polyfills →
<script src=”https://unpkg.com/core-js/client/shim.min.js"></script><! — Update these package versions as needed →
<script src=”https://unpkg.com/zone.js@0.8.4?main=browser"></script>
<script src=”https://unpkg.com/systemjs@0.19.39/dist/system.src.js"></script>
Replace the systemjs.config.js script with a script that loads systemjs.config.server.js BUT if you have created your app using the ng @angular/cli, Create a new file named src/systemjs.config.server.js and reference it within your head tag too
<! — This SystemJS configuration loads umd packages from the web →
<script src=”systemjs.config.server.js”></script>
Add the following code to your systemjs.config.server.js
/**
* System configuration for deployment without installing node_modules
* Loads umd packages from the web instead
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
‘npm:’: ‘https://unpkg.com/' // path serves as alias
},
// map tells the System loader where to look for things
map: {
app: ‘app’, // location of transpiled app files
// angular minimized umd bundles
‘@angular/core’: ‘npm:@angular/core/bundles/core.umd.min.js’,
‘@angular/common’:
‘npm:@angular/common/bundles/common.umd.min.js’,
‘@angular/compiler’: ‘npm:@angular/compiler/bundles/compiler.umd.min.js’,
‘@angular/platform-browser’: ‘npm:@angular/platform-browser/bundles/platform-browser.umd.min.js’,
‘@angular/platform-browser-dynamic’: ‘npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js’,
‘@angular/http’: ‘npm:@angular/http/bundles/http.umd.min.js’,
‘@angular/router’: ‘npm:@angular/router/bundles/router.umd.min.js’,
‘@angular/router/upgrade’: ‘npm:@angular/router/bundles/router-upgrade.umd.min.js’,
‘@angular/forms’: ‘npm:@angular/forms/bundles/forms.umd.min.js’,
‘@angular/upgrade’:
‘npm:@angular/upgrade/bundles/upgrade.umd.min.js’,
‘@angular/upgrade/static’: ‘npm:@angular/upgrade/bundles/upgrade-static.umd.min.js’,
// other libraries
‘rxjs’: ‘npm:rxjs@5.0.1’,
‘angular-in-memory-web-api’: ‘npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js’
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: ‘./main.js’,
defaultExtension: ‘js’
},
rxjs: {
defaultExtension: ‘js’
}
}
});
})(this);
3. Build your App
Next, run the build command on your project using ng build
After successfully building, it will create a dist folder in your directory which contains all necessary files built from your project.
4. Upload your App
You can now upload all the files in the /dist folder to your server.
After you have uploaded the app, please note that if you uploaded the files in a folder that is not relative to the domain, you will need to edit the <base> tag in your index.html. See example below:
My domain is http://test.abc.com which points to /public/test/ and I uploaded the app into a folder called angular, then I access the app via http://test.abc.com/angular, I will have to edit the base tag in my index.html to have <base href=”/angular/”> to be able to run.
There you go! Test your uploaded app. Feel free to comment on any step that doesn’t work or have challenge with.
Credit: RAD5 Tech Hub
Source: Angular Official Documentation
