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 only used Bootstrap. I have not used Angular-CLI. Can anyone guide me how should i deploy it ? Should i use gulp ? what should my steps be. I have gone through a lot of answers on stackoverflow but all were using GULP and CLI. Is it must to use both, if so please guide how to achieve deployment. Sadly there is nothing mentioned about deployment in Anular2 official website. Any help, guidance and suggestion is welcomed.

|--app
|   |-- logo.png
|   |-- components
|   |   |-- main.component.ts
|   |   |-- config.component.ts
|   |   |-- download-resources.component.ts
|   |   |-- header-footer.component.ts
|   |   |-- licence.component.ts
|   |   |-- menu-bar.component.ts
|   |   |-- process-status.component.ts
|   |   |-- release-history.component.ts
|   |   |-- upload-release.component.ts
|   |   `-- version.component.ts
|   |-- main
|   |   `--module.ts
|   |-- main.ts
|   |-- models
|   |   |-- config.model.ts
|   |   |-- meta-info.model.ts
|   |   |-- process-status.model.ts
|   |   `-- version.model.ts
|   |-- services
|   |   |-- cc-info.service.ts
|   |   |-- config.service.ts
|   |   |-- release-history.service.ts
|   |   |-- shared.service.ts
|   |   |-- upload-release.service.ts
|   |   `-- version.service.ts
|   `-- template
|       |-- download-resources.component.html
|       |-- licence.component.html
|       |-- license-info.component.html
|       |-- machines.component.html
|       |-- menu-bar.component.html
|       |-- process-status.component.html
|       |-- release-history.component.html
|       |-- topology-info.component.html
|       |-- topology-upload.template.html
|       |-- upload-release.component.html
|       `-- version.component.html
|-- index.html
|-- package.json
|-- styles.css
|-- systemjs.config.js
|-- tsconfig.json
`-- typings.json

This is my system.config.js file:

(function (global) {
  System.config({
    // DEMO ONLY! REAL CODE SHOULD NOT TRANSPILE IN THE BROWSER
    transpiler: 'ts',
    typescriptOptions: {
      tsconfig: true
    },
    meta: {
      'typescript': {
        "exports": "ts"
      }
    },
    paths: {
      // paths serve as alias
      'npm:': 'node_module'
    },
    // map tells the System loader where to look for things
    map: {
      // our app is within the app folder
      app: 'main-app',

      // angular bundles
      '@angular/core': 'npm:@angular/core/bundles/core.umd.js',
      '@angular/common': 'npm:@angular/common/bundles/common.umd.js',
      '@angular/compiler': 'npm:@angular/compiler/bundles/compiler.umd.js',
      '@angular/platform-browser': 'npm:@angular/platform-browser/bundles/platform-browser.umd.js',
      '@angular/platform-browser-dynamic': 'npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
      '@angular/http': 'npm:@angular/http/bundles/http.umd.js',
      '@angular/router': 'npm:@angular/router/bundles/router.umd.js',
      '@angular/forms': 'npm:@angular/forms/bundles/forms.umd.js',
      '@angular/upgrade': 'npm:@angular/upgrade/bundles/upgrade.umd.js',

      // other libraries
      'ng2-file-upload' : 'npm:ng2-file-upload',
      'rxjs':                      'npm:rxjs',
      'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
      'ts':                        'npm:[email protected]/lib/plugin.js',
      'typescript':                'npm:[email protected]/lib/typescript.js',

    },
    // packages tells the System loader how to load when no filename and/or no extension
    packages: {
      app: {
        main: './main.ts',
        defaultExtension: 'ts'
      },
      rxjs: {
        defaultExtension: 'js'
      },
      'angular-in-memory-web-api': {
        main: './index.js',
        defaultExtension: 'js'
      },
      'ng2-file-upload':{
        main: 'ng2-file-upload.js',
        defaultExtension: 'js'
      }
    }
  });
})(this);

heman123 · Accepted Answer · 2017-02-28 14:06:44Z

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:

Include "compression-webpack-plugin": "^0.3.2" package in package.json in dev-dependency
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.
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",
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
    }
}

heman123 · Accepted Answer · 2017-04-11 07:21:22Z

2

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

answered Apr 11, 2017 at 7:21

heman123

3,0034 gold badges27 silver badges40 bronze badges

Comments

CriCri · Accepted Answer · 2016-10-28 18:51:23Z

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.

Collectives™ on Stack Overflow

How to deploy Angular2 project without using CLI

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related