#StackBounty: #javascript #angularjs #angular2 #webpack-2 AngularJS is not found in Hybrid app

Bounty: 50

I’m building a POC of Angular 1+2 Hybrid application. I have managed to run it and now I’m trying to introduce Webpack.

I get a Error: AngularJS v1.x is not loaded! error when bootstrapping the module. I’ve checked – the angular is loaded when initializing the module.

Any help would be appreciated.

Entry file:

import { downgradeInjectable, downgradeComponent } from '@angular/upgrade/static';
import { BrowserModule } from '@angular/platform-browser';
import {NgModule} from '@angular/core';
import {HelloAngular2} from './components/hello-angular2';
import {TimeZonesService} from './services/timezones';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { UpgradeModule } from '@angular/upgrade/static';
import * as angular from 'angular';

angular.module('scotchTodo', [/*'todoController', 'todoService'*/]);
angular.module('scotchTodo').directive('helloAngular2', downgradeComponent({ component: HelloAngular2}));
angular.module('scotchTodo').factory('timeZones', downgradeInjectable(TimeZonesService));   

@NgModule({
 declarations: [HelloAngular2],
 entryComponents: [HelloAngular2],
 imports: [BrowserModule, UpgradeModule],
 providers: [TimeZonesService]
})
class MyNg2Module {
    ngDoBootstrap() {};
}

platformBrowserDynamic().bootstrapModule(MyNg2Module).then(platformRef => {
  const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;
  upgrade.bootstrap(document.documentElement, ['scotchTodo']);
});

Webpack config:

var webpack = require('webpack'),
    path = require('path'),
    ExtractTextPlugin = require('extract-text-webpack-plugin');

var config = {
  entry: {
    app: __dirname + '/public/js/boot.js'
  },
  output: {
    path: __dirname + '/public/dist',
    filename: 'app-loader.js'
  },
  resolve:{
      extensions: ['.js'],
      alias: {
          'controllers/main.js': 'controllers/main.js',
          'services/todos.js':'services/todos.js'
      }
  }
};

module.exports = config;

tsconfig.json:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": false
  },
  "exclude": [
    "node_modules",
    "public/jslibs",
    "typings/main",
    "typings/main.d.ts"
  ]
}

Bootstrap generated part that has angular defined:

angular.module('scotchTodo', []);
angular.module('scotchTodo').directive('helloAngular2', static_1.downgradeComponent({ component: hello_angular2_1.HelloAngular2 }));
angular.module('scotchTodo').factory('timeZones', static_1.downgradeInjectable(timezones_1.TimeZonesService));
var MyNg2Module = (function () {
    function MyNg2Module() {
    }
    MyNg2Module.prototype.ngDoBootstrap = function () { };
    ;
    return MyNg2Module;
}());
MyNg2Module = __decorate([
    core_1.NgModule({
        declarations: [hello_angular2_1.HelloAngular2],
        entryComponents: [hello_angular2_1.HelloAngular2],
        imports: [platform_browser_1.BrowserModule, static_2.UpgradeModule],
        providers: [timezones_1.TimeZonesService]
    })
], MyNg2Module);
platform_browser_dynamic_1.platformBrowserDynamic().bootstrapModule(MyNg2Module).then(function (platformRef) {
    var upgrade = platformRef.injector.get(static_2.UpgradeModule);
    upgrade.bootstrap(document.documentElement, ['scotchTodo']);
});

–UPDATE–

After adding ProvidePlugin with this config:

new webpack.ProvidePlugin({
‘angular’: ‘angular’
})

the Error: AngularJS v1.x is not loaded! error which I presume came from Upgrade module has disappeared.
Now the angular is undefined in angular.module because angular is imported by __webpack_require__

–UPDATE 2–

It seems like the problem is that AngularJS doesn’t support CommonJS style module.exports. I’m trying to use exports-loader but it doesn’t work now. The config is:

loaders: [
      { test: /[/]angular.js$/, loader: "exports-loader?angular" }
    ]

–UPDATE 3–

After adding module.exports = windows.angular; to the bootstrap generated file there is no error. But application still doesn’t work because there is no resumeBootstrap function for angular available.

–UPDATE 4–

Here is the main page HTML:

<body ng-controller="mainController">

I'm a Todo-aholic {{ todos.length }}

<!-- TODO LIST -->
<p class="text-center" ng-show="loading"> <span class="fa fa-spinner fa-spin fa-3x"></span> </p> </div> </div> <!-- FORM TO CREATE TODOS -->
<!-- createToDo() WILL CREATE NEW TODOS --> <button type="submit" class="btn btn-primary btn-lg" ng-click="createTodo()">Add</button> </form> </div> </div>
A demo by Scotch. Read the tutorial.
</div>


Get this bounty!!!