CODEWITHSUNDEEP
angularwebpack
mcktimo
mcktimo

Reputation: 1460

getting a super simple webpack ng2 starter to work

I appreciate all the work that has gone into webpack-starter but my mind needs something simpler. This was how I got started with webpack using react and redux. I want to build slowly from the basics.

-simple
    -dist
        index.html
    -src
        app.component.ts
        main.ts
    package.json
    webpack.config.js

where webpack.config.js is

const path = require('path');
module.exports = {
  entry: './src/main.ts',
  output: {
    path: path.join(__dirname, 'dist'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.ts', '.js']
  },
  module: {
    loaders: [
      {
        test: /.*ts$/,
        loader: 'ts-loader',
        exclude: [
          'node_modules'
        ]
      }
    ]
  }  
}

main.ts

import { bootstrap }    from '@angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);

app.component.ts 

import { Component } from '@angular/core';
@Component({
    selector: 'my-app',
    template: '<h1>My First Angular 2 App</h1>'
})
export class AppComponent { }

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>sto</title>
    <link rel="stylesheet" href="">
</head>
<body>
    <my-app>Loading...</my-app>
    <script src="./bundle.js"></script> 
</body>
</html>

package.json

{
  "name": "sto",
  "version": "1.0.0",
  "description": "",
  "main": "main.ts",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "Timothy S. McKenna <[email protected]> (http://mckennatim.github.io/mckennatim/)",
  "license": "MIT",
  "dependencies": {
      "@angular/common": "2.0.0-rc.1",
      "@angular/compiler": "2.0.0-rc.1",
      "@angular/core": "2.0.0-rc.1",      
      "@angular/platform-browser": "2.0.0-rc.1",
      "@angular/platform-browser-dynamic": "2.0.0-rc.1",
      "es6-promise": "3.1.2",
      "es6-shim": "0.35.0",
      "reflect-metadata": "0.1.2",
      "rxjs": "5.0.0-beta.6",
      "systemjs": "0.19.27",
      "typescript": "1.8.10",
      "typings": "0.8.1",
      "zone.js": "0.6.12"
  }
}

but I don't have it right yet

ERROR in ./src/main.ts
Module build failed: TypeError: Path must be a string. Received undefined
  at assertPath (path.js:7:11)
  at Object.dirname (path.js:697:5)
  at ensureTypeScriptInstance (c:\wamp\www\ng2\node_modules\ts-loader\index.js:156:103)
  at Object.loader (c:\wamp\www\ng2\node_modules\ts-loader\index.js:403:14)

using windows 7

Upvotes: 0

Views: 888

Answers (2)

Roberto Marte
Roberto Marte

Reputation: 34

This normally happens when the configuration file path is undefined. meaning ts-loader is trying to load a file but the path is not defined. If you do the following it might resolve it.

here the ts-loader sourcecode: https://github.com/TypeStrong/ts-loader/blob/master/index.ts#L129

  1. First create tsconfig.json file and paste the code below

    { "compilerOptions": { "target": "es5", "sourceMap": true }, "exclude": [ "node_modules" ] }

  2. Update you webpack configuration

    { test: /.ts(x?)$/, loader: 'ts-loader?configFileName=tsconfig.json' }

If that doesn't work, here a simple webpack implementation of typescript && mocha: https://github.com/thinkeloquent/webpack-es6-builder

Upvotes: 1

mcktimo
mcktimo

Reputation: 1460

A simple app needs some polyfills bundled in. Here in app/vendor.ts 

// Polyfills
import 'es6-shim';
import 'es6-promise';
import 'zone.js/dist/zone';
import 'reflect-metadata';

webpack.config.js bundles them with the help of a plugin

var webpack = require("webpack");
module.exports = {
  entry: {
    "vendor": "./app/vendor",
    "app": "./app/boot"
  },
  output: {
    path: __dirname,
    filename: "./dist/[name].bundle.js"
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  devtool: 'source-map',
  module: {
    loaders: [
      {
        test: /\.ts/,
        loaders: ['ts-loader'],
        exclude: /node_modules/
      }
    ]
  },
  plugins: [
    new webpack.optimize.CommonsChunkPlugin(/* chunkName= */"vendor", /* filename= */"./dist/vendor.bundle.js")
  ]
}

note: I generally don't do a npm install huge install for every little app I am playing with. I do that further up the directory tree so they can be shared by all my ng2 apps and explorations. However when you do that exclude:['node_modules'] won't exclude them and you get an error.

I moved index.html and added the vendor bundle

<html>
  <head>
    <title>ng2-ts-webpack-0</title>
    </head>
  <body>
    <my-app>Loading...</my-app>
  </body>
  <script src="dist/vendor.bundle.js"></script>
  <script src="dist/app.bundle.js"></script>
</html>

the modified directory structure looks like this...

-simple
    -dist
    -src
        app.component.ts
        main.ts
        vendor.ts
    index.html    
    package.json
    webpack.config.js

Now both package.json scripts works. (0.0.0.0 lets me see it on my phone)

  "scripts": {
    "build": "webpack",
    "start": "webpack-dev-server --host 0.0.0.0 --port 6100"
  },

Upvotes: 1

Related Questions