CODEWITHSUNDEEP
angularwebpack
Lijin Durairaj
Lijin Durairaj

Reputation: 3501

Unable to implement webpack in angular2

I am new to angular2 and webpack, i have installed webpack and want to minimize the size of the file using webpack, here is the webpack.config.js placed in the root folder

var HtmlWebpackPlugin = require('html-webpack-plugin');


module.exports = {
   entry: {
  app: './src/main.ts'
},
   output: {
  filename: 'bundle.js'
},
    module: {
    rules: [
      {
        test: /\.ts$/,
        loaders: [
          {
            loader: 'awesome-typescript-loader',
            options: { configFileName: helpers.root('src', 'tsconfig.json') }
          } , 'angular2-template-loader'
        ]
      }      
    ]
  },
 plugins: [
     new HtmlWebpackPlugin({
      template: 'src/index.html'
    })
  ]
};

and here is my package.json file also placed in the root folder

{
  "name": "angular-quickstart",
  "version": "1.0.0",
  "description": "QuickStart package.json from the documentation, supplemented with testing support",
  "scripts": {
    "build": "webpack --progress",
    "build:watch": "tsc -p src/ -w",
    "build:e2e": "tsc -p e2e/",
    "serve": "lite-server -c=bs-config.json",
    "serve:e2e": "lite-server -c=bs-config.e2e.json",
    "prestart": "npm run build",
    "start": "concurrently \"npm run build:watch\" \"npm run serve\"",
    "pree2e": "npm run build:e2e",
    "e2e": "concurrently \"npm run serve:e2e\" \"npm run protractor\" --kill-others --success first",
    "preprotractor": "webdriver-manager update",
    "protractor": "protractor protractor.config.js",
    "pretest": "npm run build",
    "test": "concurrently \"npm run build:watch\" \"karma start karma.conf.js\"",
    "pretest:once": "npm run build",
    "test:once": "karma start karma.conf.js --single-run",
    "lint": "tslint ./src/**/*.ts -t verbose"
  },
  "keywords": [],
  "author": "",
  "license": "MIT",
  "dependencies": {
    "@angular/common": "~2.4.0",
    "@angular/compiler": "~2.4.0",
    "@angular/core": "~2.4.0",
    "@angular/forms": "~2.4.0",
    "@angular/http": "~2.4.0",
    "@angular/platform-browser": "~2.4.0",
    "@angular/platform-browser-dynamic": "~2.4.0",
    "@angular/router": "~3.4.0",
    "angular-in-memory-web-api": "~0.2.4",
    "systemjs": "0.19.40",
    "core-js": "^2.4.1",
    "rxjs": "5.0.1",
    "zone.js": "^0.7.4"
  },
  "devDependencies": {
    "@types/jasmine": "2.5.36",
    "@types/node": "^6.0.46",
    "awesome-typescript-loader": "^3.1.2",
    "canonical-path": "0.0.2",
    "concurrently": "^3.2.0",
    "jasmine-core": "~2.4.1",
    "karma": "^1.3.0",
    "karma-chrome-launcher": "^2.0.0",
    "karma-cli": "^1.0.1",
    "karma-jasmine": "^1.0.2",
    "karma-jasmine-html-reporter": "^0.2.2",
    "lite-server": "^2.2.2",
    "lodash": "^4.16.4",
    "protractor": "~4.0.14",
    "rimraf": "^2.5.4",
    "tslint": "^3.15.1",
    "typescript": "~2.0.10",
    "webpack": "^2.2.1"
  },
  "repository": {}
}

according to the documentation all we have to do is include the command in the script property of the package.json to run the command, so i have included the script property like this

"scripts": {
    "build": "webpack --progress",
---
--
}

so that when i run the command like this npm run build it should build the project starting from the file main.ts recursively and give me an output as mentioned in the webpack.config.js but i am getting an error like this enter image description here not sure what is going wrong, if anyone can provide me at least with a proper documentation material would be of great help, i am referring this documentation and it is of no help, thanks

Upvotes: 1

Views: 110

Answers (2)

tyehia
tyehia

Reputation: 267

Your issue could be upgrading your npm and node.js

Here is a good start for angular 2 application using webpack It has a great support for aot, tree shaking, production server and development server Here you go

Upvotes: 1

CountZero
CountZero

Reputation: 6379

Setting up Angular 2 applications with the full stack of tooling is complex and error prone.

My suggestion would be to use the Angular CLI to setup and run your project,it uses webpack by default now.

https://cli.angular.io/

https://github.com/angular/angular-cli

Upvotes: 2

Related Questions