为 web 主机发布 angular 2 应用程序的最佳方式

Question

Assuming I'm not using the angular-cli, What would be the best way create the dist folder with all the required files for uploading to a web host in order to publish my app?

My project is based on the angular 2 quickstart, Structed like this on localhost:

Answer 1

TL;DR; Read this article on how to create a consist building process while angular-cli doesn't reach a stable version.

It all comes to the module loader used in your project. From what I've seen in the community the most used are SystemJS(the same as yours) and webpack. In either cases you'll need a build process to create a distribution package of your application.

Things to know.

SystemJS : It's simpler to configure but require external tools for building processes.

Webpack : Harder to configure, but It can do almost everything from module loading to app distribution.

For both tools you have the following options

Use a seed project.

Pros : It will have a lot of features ready and easy to use out of the box. For instance, in a good seed project you'll be able to build your app with a simple npm command.

Cons : Sometimes the seed project does much more than what you need; Errors might be harder to track.

For example, for webpack there's the angular2-webpack-start .

Configure everything from scratch

Pros : You'll have a full understanding of everything happening in your app; Errors are easier to track.

Cons : Requires additional research on which tools you'll need to use; Setting everything up can be hard.

Additionally to those options, there's the angular-cli project, which is pretty much a working in progress, but has been highly endorced by angular team.

Conclusion

I wouldn't use a seed project since I want to know what is happening in my app, however I believe that angular-cli is solid project and once it gets to a stable version I will adopt it.

In the mean time, I'm configuring everything from scratch and following this amazing article from Mink Gechev on how to optimize building process.

Answer 2

There are a few different ways to publish an Angular 2 app to a web host, depending on your specific use case and hosting environment. Here are a few common methods:

Using the Angular CLI: The Angular CLI (Command Line Interface) provides a command for building an Angular app for production, which creates a minified version of the app in the "dist" folder. You can then upload the contents of this folder to your web host. To build the app, you can run the following command: ng build --prod

Using a build tool: There are a variety of build tools available that can be used to automate the process of building and deploying an Angular app, such as Webpack, which can be configured to build and optimize your app for production.

Using a continuous integration (CI) service: You can set up a CI service like Jenkins, Travis CI, or CircleCI to automatically build and deploy your app whenever changes are pushed to a specific branch of your version control system.

Deploying to Firebase hosting: Firebase is a popular hosting platform from Google that allows you to deploy your Angular 2 app quickly and easily. Once you have created a Firebase project, you can use the Firebase CLI to deploy your app by running the command firebase deploy

Deploying to Cloud hosting: You can use any cloud hosting provider such as AWS, Azure, GCP etc to host your application. They provide the option to deploy your application. It needs some initial setup and configuration but it is more powerful and scalable than others.

Overall, the best method for publishing your Angular 2 app will depend on your specific needs and the hosting environment you are using