TemplateCache of NPM Modules not loading (AngularJS 1.X and Webpack)

[LuisUrrutia]

Description

I'm using AngularJS 1.X with Webpack2 and i'm trying to use angularjs-toaster but when i run gulp serve it fails because failed to load template: angularjs-toaster/toast.html I know that this library is using $templateCache to inject the view, but for some reason the app doesn't recognize the template path.

Error Message & Stack Trace

angular.js:14525 Error: [$compile:tpload] Failed to load template: angularjs-toaster/toast.html (HTTP status: undefined undefined)
http://errors.angularjs.org/1.6.4/$compile/tpload?p0=angularjs-toaster%2Ftoast.html&p1=undefined&p2=undefined
    at angular.js:66
    at handleError (angular.js:19992)
    at processQueue (angular.js:16832)
    at angular.js:16876
    at Scope.$digest (angular.js:17971)
    at Scope.$apply (angular.js:18269)
    at bootstrapApply (angular.js:1917)
    at Object.invoke (angular.js:5003)
    at doBootstrap (angular.js:1915)
    at bootstrap (angular.js:1935)

Config

{
  "generator-fountain-angular1": {
    "version": "1.0.0",
    "props": {
      "framework": "angular1",
      "modules": "webpack",
      "js": "babel",
      "ci": "travis",
      "css": "scss",
      "resolved": "/usr/lib/node_modules/generator-fountain-webapp/node_modules/generator-fountain-angular1/generators/app/index.js",
      "namespace": "fountain-angular1:app",
      "_": [],
      "sample": "techs",
      "router": "uirouter"
    }
  }
}

Code

index.js

import angular from 'angular';

import {coreModule} from './app/core/core.module';
import {mainModule} from './app/main/main.module';
import {adminModule} from './app/admin/admin.module';

import 'angular-jwt';
import 'angular-tooltips';
import 'angular-ui-router';
import 'angular-local-storage';
import 'angular-animate';
import 'angularjs-toaster';

import routesConfig from './routes';

import './index.scss';

angular
  .module('app', [
    coreModule,
    mainModule,
    adminModule,
    'ui.router',
    'angular-jwt',
    'LocalStorageModule',
    'ngAnimate',
    'toaster',
    '720kb.tooltips'
  ])
  .config(routesConfig);

index.scss

@import "assets/vendor/bourbon/bourbon";
@import "assets/vendor/neat/neat";
$fa-font-path: "~font-awesome/fonts";
@import "~font-awesome/scss/font-awesome";
@import "~angular-tooltips/lib/angular-tooltips";
@import "~angularjs-toaster/toaster";

newForm.component.js

class NewFormController {
  constructor(toaster) {
    this.toaster = toaster;

    this.sections = [];
    this.title = '';
    this.description = '';
  }

  addSection() {
    if (this.title === '') {
      this.toaster.error('Title missing.');
      return;
    }
    this.sections.push({
      title: 'Untitled section'
    });
  }
}

export const newForm = {
  template: require('./newForm.component.html'),
  controller: NewFormController
};

newForm.component.html

<toaster-container></toaster-container>

<core-header></core-header>

Environment

Node.js v7.10.0
darwin 16.5.0
yo 1.8.5
npm 4.2.0
yarn 0.23.4

[BalachanderJ]

@LuisUrrutia - Am facing similar issue. Did you get a chance to fix this?

[LuisUrrutia]

Honestly, I don't remember. But in that project I switched from AngularJS to Angular.