To deploy your application, you have to compile it, and then host the JavaScript, CSS, and HTML on a web server. Built Angular applications are very portable and can live in any environment or served by any technology, such as Node, Java, .NET, PHP, and many others.
Whether you came here directly from Part 1, or completed the entire online store application through the In-app navigation, Manage data, and Forms for user input sections, you have an application that you can deploy by following the instructions in this section.
StackBlitz projects are public by default, allowing you to share your Angular app via the project URL. Keep in mind that this is a great way to share ideas and prototypes, but it is not intended for production hosting.
https://<Project ID>.stackblitz.io
.To build your application locally or for production, download the source code from your StackBlitz project by clicking the Download Project
icon in the left menu across from Project
to download your files.
Once you have the source code downloaded and unzipped, install Node.js
and serve your app with the Angular CLI.
From the terminal, install the Angular CLI globally with:
npm install -g @angular/cli
This installs the command ng
on your system, which is the command you use to create new workspaces, new projects, serve your application during development, or produce builds to share or distribute.
Create a new Angular CLI workspace using the ng new
command:
ng new my-project-name
In your new CLI generated app, replace the /src
folder with the one from your StackBlitz
download, and then perform a build.
ng build --prod
This will produce the files that you need to deploy.
If the above
ng build
command throws an error about missing packages, append the missing dependencies in your local project'spackage.json
file to match the one in the downloaded StackBlitz project.
The files in the dist/my-project-name
folder are static. This means you can host them on any web server capable of serving files (such as Node.js
, Java, .NET), or any backend (such as Firebase, Google Cloud, or App Engine).
One of the easiest ways to get your site live is to host it using Firebase.
@angular/fire
schematics that will handle your deployment using ng add @angular/fire
.npm install -g firebase-tools
.firebase login
and firebase init
.Follow the prompts to select the Firebase
project you are creating for hosting.
Hosting
option on the first prompt.dist/my-project-name
as the public directory.ng deploy
.To host an Angular app on another web host, upload or send the files to the host. Because you are building a single page application, you'll also need to make sure you redirect any invalid URLs to your index.html
file. Read more about development and distribution of your application in the Building & Serving and Deployment guides.
You are now an Angular developer! Share this moment, tell us what you thought of this get-started exercise, or submit suggestions for future editions.
Angular offers many more capabilities, and you now have a foundation that empowers you to build an application and explore those other capabilities:
Keep current by following the Angular blog.
© 2010–2020 Google, Inc.
Licensed under the Creative Commons Attribution License 4.0.
https://angular.io/start/start-deployment