Webpack, typescript and angularjs: issue while creating new project

Question

I am new to webpack and typings, i am trying to setup new project.

I have globally installed the webpack.

Issues are

Even it is not allowing me to put the code of entrypoint.ts in a module like

module taxCalculator{ [.....entrypoint.ts code.......] }
webpack build works fine when i avoid point 1 but i am not able to use the testClass in entrypoint.ts while creating mainPageController. when i load the application get following error in console:

taxCalculator.bundle.js:13307 ReferenceError: taxCalculator is not defined
In my entrypoint.ts vs 2013 shows the red error line below the 'require' text.

I have already referred a lot on internet but could not find anything and wasted 4-5 hours of mine, can someone please guide me what i am doing wrong.

Following are my files for reference.

Package.json

{
  "name": "taxcalculator",
  "version": "1.0.0",
  "description": "To Calculate Tax",
  "scripts": {
    "build": ""
  },
  "author": "temp",
  "license": "ISC",
  "devDependencies": {
    "ts-loader": "1.3.3",
    "typescript": "2.0.0",
    "typings": "2.1.0",
    "webpack": "1.14.0"
  },
  "dependencies": {
    "angular": "1.5.0"
  }
}

tsconfig.json

{
    "compilerOptions": {
        "target": "es5"
    }
}

typings.json

{
  "dependencies": {
    "angular": "registry:dt/angular#1.5.0+20170111164943"
  }
}

entrypoint.ts

/// <reference path="../../typings/index.d.ts"/>
/// <reference path="TestClass.ts"/>

    var angular = require('angular');
    var app = angular.module('taxCalculatorApp', []);

    app.controller("mainPageController", ["$scope", function(scope) {
        scope.testString = "My String Value";

        scope.myObj = new taxCalculator.TestClass("Constructor string");
    }])

index.html

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf8"/>
    <title>Tax Calculator</title>
</head>
<body>
<div ng-app="taxCalculatorApp">
    <div ng-controller="mainPageController">
        <div>{{testString}}</div>
        <div>{{myObj.myString}}</div>
    </div>
    Loading.....!!
</div>
    <script src="../dist/taxCalculator.bundle.js"></script>
</body>
</html>

testclass.ts

module taxCalculator {
    export class TestClass {
        constructor(public myString) {

        }
    }
}

Andrew Eisenberg · Accepted Answer · 2017-01-14 15:56:38Z

2

In the compilerOptions section of your tsConfig file, add the following:

"moduleResolution" : "node", // or "classic"
"module" : "amd",

The moduleResolution section determines how the tsc compiler looks for modules. A full description can be found on the typescript docs.

The module section describes how each of your modules will be written out. By default this will be CommonJS, which is not what you want. It should probably be amd, which is a front-end friendly module system.

It's a good idea to take a deeper look at all the compiler options and see if any more are relevant for your project. In general, starting off new projects with strict null checks and no implicit any will help you in the long run.

answered Jan 14, 2017 at 15:56

Andrew Eisenberg

28.9k9 gold badges100 silver badges156 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Magnum23 Over a year ago

thank you for the answer but did not work even after adding these two in tsconfig.json, still facing same problems at same places.

Magnum23 Over a year ago

Andrew did you get a chance to look again, i am still facing the problem.

Andrew Eisenberg Over a year ago

Apologies, I have not.

Collectives™ on Stack Overflow

Webpack, typescript and angularjs: issue while creating new project

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related