How to deploy Angular2 project without using CLI

Question

This is the Folder structure i have made for a project made in angular 2. I have deleted the Node-Module folder and other folder in order to fit it here. For styling i have

Answer 1

TLDR answer: Look at the Angular2 Quickstart Docs and understand how everything works and then figure out what you want to use to build your project to tailor your needs. If you are just practicing just follow the tutorial and try out combinations. I also recommend trying the tour of heroes tutorial for added descriptions.

---

I had the same problem you are running into I did not know how to start with Angular2 as it seems there are a lot of steps involved. In addition many of the projects you find online are very limited in what they do. For the most part they are just tutorials on how to start using angular2 on the frontend using systemjs and CLI tasks -- Which are good as they help understand what you need to launch the application or handle any questions you might have.

Having said that the optimal build is subjective to what you want to do and how you want to build the project. For example I myself went with the Gulp approach as it is a tool I am familiar with and did not want to do any cli other than just typing in gulp . The drawback to doing so was the fact that there are no tutorials illustrating how to piece together and run Angular2 the way I wanted, with the added difficulty of tying in a backend that suited my needs.

I know this is probably not the answer you want but take it as a tip. In order to understand what you want to do, play around with Angular 2 the way the Docs walk you through and pay attention to how they build the project and how everything interacts. When you're doing that disregard all other information about a Gulp or whatever build others are using; to make sure you understand what you need. From there I would suggest taking your skills and knowledge of other tools to build a more robust package that can handle your needs and what you want to accomplish. Also if you want a step by step the Angular tour of heroes tutorial is pretty descriptive and a good way to get started.

Answer 2

I solved this problem by using webpack. My webpack makes a bundle.js which includes all the .js .ts .html files and converts it into bundle.js. which i import in Index.html. This bundle.js contains all the things required for it to run. Other things required by my site, like style.css and some bootstrap libraries have to be included externally in index.html. Steps that you need to follow are:

1. Include "compression-webpack-plugin": "^0.3.2" package in package.json in dev-dependency
2. There are few more things to keep in mind when you use webpack. You need to use correct syntax to import your templates in componenet and there are few changes in routes.

3. I have changed my build script as well in package.json. Added code for webpack to work

   "build": "npm run tsc && npm run clean && mkdir _dist && webpack --devtool inline-source-map",

4. You need to configure your webpack. webpack.config.js contains all the configuration that i have done, It looks something like this.

var webpack = require("webpack");
var CompressionPlugin = require("compression-webpack-plugin");  
module.exports = {
entry: {
 "app": "./app/main"
 },
        output: {
            path: __dirname,
            filename: "./_dist/bundle.js",
            publicPath: 'http://localhost:4242/app'
        },
 resolve: {
        extensions: ['', '.js', '.ts', '.html']
    },
    devtool: 'source-map',
    module: {
        loaders: [
            {
  test: /\.ts$/,
                loaders: ['awesome-typescript-loader', 'angular2-template-loader']
            },
            {
                test: /\.html$/,
                loader: 'html'
            }
    ]
},
htmlLoader: {
    minimize: false
},
plugins: [
    new webpack.NoErrorsPlugin(),
],
devServer: {
    historyApiFallback: true,
 stats: 'minimal',
        inline: true,
        port: 4242
    }
}

Answer 3

Finally Angular guys listened to my problem and gave a very Extensive solution. They have updated their site and have included the above step in their site. please go through this for proper guidance Webpack for Angular2