Push in release Angular2 Quick Step application

Question

I'm new with Angular2. I've follow the quick start guide and create my application.

Now, I'm ready to push in production on my server. But I've many and many files.

I've found this SO : How to bundle an Angular app for production

But I do not understand. If I make a npm build, dist folder do not exist but no error happen.

If I try something with Gulp, I do not understand to. like here : http://blog.scottlogic.com/2015/12/24/creating-an-angular-2-build.html

If there an easy way to create release files in a folder and push it online without many many commands before?

if you are using cli use `ng build` you will get a folder dist with your production build files. Now deploy these — Rahul Singh, Aug 14 '17 at 11:46
If you have Angular CLI installed, than you can use "ng build" — Milan Tenk, Aug 14 '17 at 11:46
you need to use prod environment check https://github.com/angular/angular-cli/wiki/build for reference — vaibhavmaster, Aug 14 '17 at 11:53
So I need to migrate like here : https://stackoverflow.com/questions/41972847/how-to-migrate-angular-2-app-on-angular-cli Thanks for the downvote without explications. Always a pleasure. — Portekoi, Aug 14 '17 at 11:57
It's hard to identify what you are having trouble with when you post a tutorial from another website and just say that you don't understand it. What part of that tutorial are you stuck on? You also post an answer which should be marked as a duplicate, if only because it actually answers your question but you posted a command `npm build` which doesn't exist in that answer, suggesting it didn't solve your problem. It's `ng build`, if you are using Angular-CLI. since you aren't, the other answer is more appropriate, using `npm run bundle`. — Claies, Aug 14 '17 at 11:58
Just FYI, posting a comment complaining about a downvote or asking why you got a downvote is really a waste of time, since the majority of people who downvote posts aren't going back later to see if you made a comment asking them about it. They generally never come back to explain themselves. — Claies, Aug 14 '17 at 12:01
I understand but it's really not fare. I've follow the QuickStart guide and now, i'm stuck for publish. I can push all files but it's not a solution. — Portekoi, Aug 14 '17 at 12:02
About the tutorial, I'm surprise because there are many and many steps....just for push in release like all others languages... I'm disappointed about angular. — Portekoi, Aug 14 '17 at 12:04
Angular isn't a **language**, it is a **framework library** built on a scripting language (a language that is interpreted, not compiled). You can't compare the build process in Angular to the process in, say, a C# application..... — Claies, Aug 14 '17 at 12:07
You right. My fault. Angular is a framework but if I compare with Dotnet (and VS), I just make a build on my project (c#/, vb.net etc.) and I have the files to publish. It's really another adventure with angular. — Portekoi, Aug 14 '17 at 12:11

score 0 · Accepted Answer · answered Aug 19 '17 at 00:22

I've found a solution : migrate to Angular CLI.

This link help me a lot : http://www.codingpedia.org/ama/fast-faster-angular-cli-how-i-converted-my-angular-project-to-use-angular-cli

I add some lines in my .angular.cli.json for styles and scripts. I put my app parameters :

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": [
        "assets",
        "app/api",
        "favicon.ico"
      ],
      "index": "index.html",
      "main": "main.ts",
      "polyfills": "polyfills.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.app.json",
      "testTsconfig": "tsconfig.spec.json",
      "prefix": "app",
      "styles": [
        "styles.scss",
        "../src/assets/vendors/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/font-awesome/css/font-awesome.css",
        "../src/assets/vendors/iCheck/skins/flat/green.css",
        "../src/assets/build/css/custom.min.css"
      ],
      "scripts": [
          "../src/assets/vendors/jquery/dist/jquery.min.js",
          "../src/assets/vendors/bootstrap/dist/js/bootstrap.min.js",
          "../src/assets/vendors/datatables.net/js/jquery.dataTables.min.js",
          "../src/assets/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js",
          "../src/assets/vendors/datatables.net-buttons/js/dataTables.buttons.min.js",
          "../src/assets/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js",
          "../src/assets/vendors/datatables.net-buttons/js/buttons.flash.min.js",
          "../src/assets/vendors/datatables.net-buttons/js/buttons.html5.min.js",
          "../src/assets/vendors/datatables.net-buttons/js/buttons.print.min.js",
          "../src/assets/vendors/jszip/dist/jszip.min.js",
          "../src/assets/vendors/pdfmake/build/pdfmake.min.js",
          "../src/assets/vendors/pdfmake/build/vfs_fonts.js"
        ],
      "environmentSource": "environments/environment.ts",
      "environments": {
        "dev": "environments/environment.ts",
        "prod": "environments/environment.prod.ts"
      }
    }
  ]

I have to optimise this but it's working now.

Push in release Angular2 Quick Step application

1 Answers1