useBabel causes issues with undefined on import angular from 'angular'

[iangregsondev]

Hi,

I wonder if anyone can help ?

I had a loader set up, its a mixed project of ts and js files, and I am using the allowJS tsconfig. When I used it with the useBabel set to true, js complained when I used angular.module, said module was not found on undefined. The import is a simple .

import angular from 'angular'

I couldn't get it to work, I had to remove the useBabel and use an extra bable-loader. Here were my original awesome loader settings which caused problems. (no separate babel loader)

   {
                test: /(\.js|\.ts|\.tsx)?$/,
                exclude: [
                    helpers.root('node_modules'),
                    helpers.root('resources','vendor'),
                    helpers.root('src', 'index.html')
                ],
                loaders: [
                    {
                        loader: 'awesome-typescript-loader',
                        options: {
                            'useTranspileModule': true,
                            'useCache': true,
                            'useBabel': true,
                            'babelOptions': {
                                'plugins': ['angularjs-annotate'],
                                'presets': ['env']
                            },
                            configFileName: helpers.root('src', 'tsconfig.json')
                        }
                    }
                ]
            },

So I finally ended up with the following (notice 2 x loaders) which does seem to work, but is there any way to streamline this a little? Or am I am missing something with regards to the useBabel ?

   {
              test: /(\.js|\.ts|\.tsx)?$/,
              exclude: [
                  helpers.root('node_modules'),
                  helpers.root('resources','vendor'),
                  helpers.root('src', 'index.html')
              ],
              loaders: [
                  {
                      loader: 'awesome-typescript-loader',
                      options: {
                          'useTranspileModule': true,
                          'useCache': true,
                           configFileName: helpers.root('src', 'tsconfig.json')
                      }
                  }
              ]
          },
          {
              test: /\.js$/,
              exclude: [
                  helpers.root('node_modules'),
                  helpers.root('resources','vendor'),
              ],
              use: {
                  loader: 'babel-loader',
                  options: {
                      'plugins': ['angularjs-annotate'],
                      'presets': ['env']
                  }
              }
          },

[hrgui]

Note for anyone still looking at this issue

My setup

• Webpack 3.8.1
• TypeScript 2.7.2

I had the same problem too; and eventually it just magically worked (not sure what the combination was). I found that ts-loader supports import angular from 'angular' and import * as angular from 'angular'

While awesome-typescript-loader supports import * as angular from 'angular'.

The goal is we want Webpack 3 to handle the imports, and TypeScript / Babel to do the rest. I don't know the exact combo, but this is what my current setup looks like:

Config:

{
        loader: require.resolve('awesome-typescript-loader'),
        options: {
          useBabel: true,
          useCache: true,
          instance: 'at-loader-ui-enterprise',
          configFileName : path.join(paths.appPath, 'template', 'tsconfig.json'),
          useTranspileModule: true,
          transpileOnly: true,
          // note since we dont have a babelrc, this is what we need to do
          babelOptions: {
            babelrc: false,
            presets: [require.resolve('babel-preset-react-app')],
          }
        }
      }

Not sure what differed here...

In

// ts-loader is 
import angular from 'angular';
//awesome-typescript-loader needs as *
// why?
//import * as angular from 'angular';
console.log(angular);

angular.module('myApp', []).component('myApp', {
  template: 'Welcome to Angular.js {{$ctrl.version}}',
  controller: function controller() {
    this.version = angular.version.full;
  }
});

angular.bootstrap(document.getElementById('rootAngular'), ['myApp']);


// WEBPACK FOOTER //
// ../../node_modules/babel-loader/lib??ref--0-oneOf-3-1!./template/src/indexAngular.ts

Out awesome-typescript-loader

var angular_1 = __webpack_require__(/*! angular */ "../../node_modules/angular/index.js");
//awesome-typescript-loader needs as *
// why?
//import * as angular from 'angular';
console.log(angular_1["default"]);
angular_1["default"].module('myApp', []).component('myApp', {
    template: 'Welcome to Angular.js {{$ctrl.version}}',
    controller: function controller() {
        this.version = angular_1["default"].version.full;
    }
});
angular_1["default"].bootstrap(document.getElementById('rootAngular'), ['myApp']);

Out ts-loader w/ es6

"use strict";
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular__ = __webpack_require__(/*! angular */ "../../node_modules/angular/index.js");
/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_angular___default = __webpack_require__.n(__WEBPACK_IMPORTED_MODULE_0_angular__);
// ts-loader is 

//awesome-typescript-loader needs as *
// why?
//import * as angular from 'angular';
console.log(__WEBPACK_IMPORTED_MODULE_0_angular___default.a);
__WEBPACK_IMPORTED_MODULE_0_angular___default.a.module('myApp', []).component('myApp', {
    template: `Welcome to Angular.js {{$ctrl.version}}`,
    controller: function () {
        this.version = __WEBPACK_IMPORTED_MODULE_0_angular___default.a.version.full;
    },
});
__WEBPACK_IMPORTED_MODULE_0_angular___default.a.bootstrap(document.getElementById('rootAngular'), ['myApp']);