发表新帖
发表新帖

How to deploy Angular 2 application developed in Typescript to production?

前端 未结
关注
6 710
情深已故
情深已故 2020-12-05 01:47

I am new to Angular 2. I am confused with how Angular 2 works in production environment.

  1. What are the prerequisites for running Angular 2 application in pr

相关标签:
6条回答
  • 孤城傲影
    2020-12-05 02:28
    1. An application server (for my answer, I used Tomcat), node.js, and angular-cli (by running "npm install -g angular-cli")
    2. You can deploy to other servers
    3. Just .html, .js and .map files (at least for my solution)

    This works better if you had created the application using angular-cli instructions shown here. In your application root directory, run the following command ng build --env=prod and that will bundle, via webpack, the deployable items in the \dist directory.

    Copy the \dist directory and paste it into {CATALINA_HOME}\webapps. Rename \dist to a folder name such as \foo. Open \foo\index.html and edit the base-href line to represent your new directory name: 

    <base href="/foo/">

    Start Tomcat via startup.bat or your chosen preference and navigate to http://localhost:8080/foo/ and you should be able to view your Angular 2 application.

    Note: If you had not created the project with ng new command, I had read where executing ng init before build will allow you to still follow the steps. I have not tested this myself though.

    0 讨论(0)
  • 北海茫月
    2020-12-05 02:32

    I use JSPM to make my angular2 projects production ready. Other popular tools like JSPM include webpack, and browserfy. One of the important tasks that JSPM will accomplish is to bundle the various modules that make up your angular2 project. I also set the "selfExecutingBundle" flag to true and have JSPM make one bundled js file (e.g. myApp.bundled.js) and from there I minify it (myApp.bundled.min.js) and this one script reference is used in the index.html file. 

    <html>

<head>
    <title>Hello Angular World</title>
</head>
<body>
<div>
    <my-app>Loading...</my-app>
</div>
    <script src="/js/myApp.bundle.min.js"></script>
</body>

</html>

    And that is all you need!

    In the future when the HTTP/2 spec is more common, there may be less of a need to bundle your module-based projects, but for now I think bundling is needed.

    There is no reference to your typescript files (as they were already transpiled in the process of making the myApp.bundled.js). As Zama said, you can run angular2 on any server (I use IIS and works fine).

    UPDATE: Since the final release of Angular 2, I have switched to using the angular-cli for building for production. Setup is easy (no spaghetti of gulp tasks) and the final bundle is super-optimized (esp due to tree-shaking). I recommend checking out the angular-cli for setting up, developing with, and building your ng2 projects.

    0 讨论(0)
  • 粉色の甜心
    2020-12-05 02:38

    There are many starter seed projects that include the ability to serve and build your project. I am using (and very happy with) https://github.com/antonybudianto/angular2-starter

    You can find many others here: https://github.com/timjacobi/angular2-education#boilerplates

    0 讨论(0)
  • 星月不相逢
    2020-12-05 02:50

    Angular 2 applications are written in TS but the browser only understands JavaScript at the end. So any TS project is transpiled to JavaScript first event while development.

    You can run angular 2 application on any server.

    You only have to deploy .js files, since a browser won't parse .ts files.

    0 讨论(0)
  • 暖寄归人
    2020-12-05 02:52

    All typescript files will be transpiled to js files while developing the application by the transpiler so you don't need ts files in production.

    Also when you are done with the development , all you need to do is to make the bundle of dist directory using some bundling tool like webpack-starter or angular2-seed.

    Then you deploy this bundle to your server.

    The above mentioned packages have good amount of information on how one can deploy their angular2 app to production.

    Hope this helps.

    0 讨论(0)
  • 死守一世寂寞
    2020-12-05 02:54

    it's very simple to upload app on production. steps:

    1. create an app using follow https://angular.io/docs/ts/latest/guide/webpack.html

    2. if your app has router then don't forget to use {useHash: true} for prevent the error can't load the page. like:

      RouterModule.forRoot(routes, { useHash: true })

    3. type npm build in your project root path.

    4. it create dist folder automatically in project root directory.
    5. don't need to setup node server on production. you can simply choose apache server and upload dist folder content.
    0 讨论(0)
 看不清?
提交回复
热议问题