Getting started with Angular 2 Dynamically add components using ViewContainerRef.createComponent Pipes Routing (3.0.0+)Http Interceptor Directives Installing 3rd party plugins with [email protected]Testing an Angular 2 App Routing Optimizing rendering using ChangeDetectionStrategy Lifecycle Hooks Directives & components : @Input @Output Angular RXJS Subjects and Observables with API requests Zone.js Services and Dependency Injection Angular 2 Forms Update Detecting resize events Bootstrap Empty module in angular 2 Advanced Component Examples Bypassing Sanitizing for trusted values Angular2 Custom Validations Angular 2 Data Driven Forms Angular - ForLoop Feature Modules Angular2 In Memory Web API Ahead-of-time (AOT) compilation with Angular 2 Debugging Angular2 typescript application using Visual Studio Code CRUD in Angular2 with Restful API Component interactions Use native webcomponents in Angular 2 Lazy loading a module Update typings Mocking @ngrx/Store How to use ngfor ngrx Animation Commonly built-in directives and services How to Use ngif Testing ngModel Create an Angular 2+ NPM package Angular2 CanActivate Angular 2 - Protractor Example for routes such as /route/subroute for static urls Angular2 Input() output()Page title unit testing Angular-cli OrderBy Pipe Angular2 Animations Angular 2 Change detection and manual triggering Angular2 Databinding Brute Force Upgrading EventEmitter Service Angular2 provide external data to App before bootstrap Using third party libraries like jQuery in Angular 2 Component interactions Attribute directives to affect the value of properties on the host node by using the @HostBinding decorator.Templates Configuring ASP.net Core application to work with Angular 2 and TypeScript Angular2 using webpack Angular material design Dropzone in Angular2 custom ngx-bootstrap datepicker + input angular redux Creating an Angular npm library Barrel angular-cli test coverage Service Worker Components Modules

Angular2 using webpack

Angular 2 webpack setup

webpack.config.js

const webpack = require("webpack")
const helpers = require('./helpers')
const path = require("path")
const WebpackNotifierPlugin = require('webpack-notifier');

module.exports = {
    
    // set entry point for your app module
    "entry": {
        "app": helpers.root("app/main.module.ts"), 
    },
    
    // output files to dist folder
    "output": {
        "filename": "[name].js",
        "path": helpers.root("dist"),
        "publicPath": "/",
    },

    "resolve": {
        "extensions": ['.ts', '.js'],
    },
    
    "module": {
        "rules": [
            {
                "test": /\.ts$/,
                "loaders": [
                    {
                        "loader": 'awesome-typescript-loader',
                        "options": {
                            "configFileName": helpers.root("./tsconfig.json")
                        }
                    },
                    "angular2-template-loader"
                ]
            },
        ],
    },

    "plugins": [
        
        // notify when build is complete
        new WebpackNotifierPlugin({title: "build complete"}),
        
        // get reference for shims
        new webpack.DllReferencePlugin({
            "context": helpers.root("src/app"),
            "manifest": helpers.root("config/polyfills-manifest.json")
        }),
        
        // get reference of vendor DLL
        new webpack.DllReferencePlugin({
            "context": helpers.root("src/app"),
            "manifest": helpers.root("config/vendor-manifest.json")
        }),
        
        // minify compiled js
        new webpack.optimize.UglifyJsPlugin(),
    ],
}

vendor.config.js

const webpack = require("webpack")
const helpers = require('./helpers')
const path = require("path")

module.exports = {
    // specify vendor file where all vendors are imported
    "entry": {
        // optionally add your shims as well
        "polyfills": [helpers.root("src/app/shims.ts")],
        "vendor": [helpers.root("src/app/vendor.ts")],
    },
    
    // output vendor to dist
    "output": {
        "filename": "[name].js",
        "path": helpers.root("dist"),
        "publicPath": "/",
        "library": "[name]"
    },

    "resolve": {
        "extensions": ['.ts', '.js'],
    },
    
    "module": {
        "rules": [
            {
                "test": /\.ts$/,
                "loaders": [
                    {
                        "loader": 'awesome-typescript-loader',
                        "options": {
                            "configFileName": helpers.root("./tsconfig.json")
                        }
                    },
                ]
            },
        ],
    },
    
    "plugins": [
        
        // create DLL for entries
        new webpack.DllPlugin({
            "name": "[name]",
            "context": helpers.root("src/app"),
            "path": helpers.root("config/[name]-manifest.json")
        }),
        
        // minify generated js
        new webpack.optimize.UglifyJsPlugin(),
    ],
}

helpers.js

var path = require('path');

var _root = path.resolve(__dirname, '..');

function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [_root].concat(args));
}

exports.root = root;

vendor.ts

import "@angular/platform-browser"
import "@angular/platform-browser-dynamic"
import "@angular/core"
import "@angular/common"
import "@angular/http"
import "@angular/router"
import "@angular/forms"
import "rxjs"

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Angular 2 webpack</title>
    
    <script src="/dist/vendor.js" type="text/javascript"></script>
    <script src="/dist/app.js" type="text/javascript"></script>
</head>
<body>
    <app>loading...</app>
</body>
</html>

package.json

{
  "name": "webpack example",
  "version": "0.0.0",
  "description": "webpack",
  "scripts": {
    "build:webpack": "webpack --config config/webpack.config.js",
    "build:vendor": "webpack --config config/vendor.config.js",
    "watch": "webpack --config config/webpack.config.js --watch"
  },
  "devDependencies": {
    "@angular/common": "2.4.7",
    "@angular/compiler": "2.4.7",
    "@angular/core": "2.4.7",
    "@angular/forms": "2.4.7",
    "@angular/http": "2.4.7",
    "@angular/platform-browser": "2.4.7",
    "@angular/platform-browser-dynamic": "2.4.7",
    "@angular/router": "3.4.7",
    "webpack": "^2.2.1",
    "awesome-typescript-loader": "^3.1.2",
  },
  "dependencies": {
  }
}

Contributors

Topic Id: 9554

Example Ids: 29519

This site is not affiliated with any of the contributors.