angular 1.6 with webpack: controller is not registered

Viewed 991

I'm writing a small application using angular for frontend, my frontend module has the following structure:

enter image description here

In my app.js I'm defining main angular module:

angular.module('weatherApp', []);

My controller(weather.js) is registering WeatherCtrl:

angular.module('weatherApp')
.controller('WeatherCtrl', ['$scope', 'WeatherProvider', ($scope, WeatherProvider) => {
    $scope.location = {
        city: "",
        country: ""
    };

    $scope.options = [
        { label: "Weather", value: "weather" },
        { label: "Forecast", value: "forecast" }
    ];
    $scope.selected = $scope.options[0];

    $scope.result = "Empty";

    $scope.getWeather = function () {
        WeatherProvider.getWeatherFunc($scope.selected.value, $scope.location.city, $scope.location.country)
        .then((response) => {
            $scope.result = response.data;
        })
     }
}]);

While serevice(provider.js) is registering WeatherProvider:

angular.module('weatherApp')
.service('WeatherProvider', ['$http', function($http) {
    this.getWeatherFunc = (weatherMode, city, country) => {
        return $http({
            method: 'GET',
            url: "http://localhost:8080/" + weatherMode + "/" + city + "/" + country
        })
    }
}]);

My webpack config looks like:

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
   devServer: {
       disableHostCheck: true
   },
   target: 'web',
   context: path.join(__dirname, "src"),
   devtool: 'source-map',
   entry: {
       app: "./app.js",
   },
   resolve: {
       modules: [
           path.resolve(__dirname),
           "node_modules"
       ],
       extensions: ['.js', '.html']
   },

   module: {
       loaders: [
           {
               test: /\.js$/,
               exclude: /node_modules/,
               loader: 'babel-loader',
           }
       ]
   },

   output: {
       path: path.join(__dirname, 'src'),
       filename: "bundle.js",
       publicPath: "/"
   },

   plugins: [
       new HtmlWebpackPlugin({
           template: __dirname + "/src/index.tmpl.html"
       }),
       new webpack.DefinePlugin({
           'process.env': {
               'NODE_ENV': JSON.stringify(process.env.NODE_ENV ||"dev"),
           }
       })
   ],};

Here is index.tmpl.html:

enter image description here

Now I'm running npm run dev and http://localhost:8081/ gives me the following result:

enter image description here

An error says: Error: $controller:ctrlreg A controller with this name is not registered. In the same time http://localhost:8081/index.tmpl.html returns the expected result:

enter image description here

Do you have any idea why my controller and service are not in bundle.js? (I believe this is the main reason of a failure)

2 Answers

Try changing the order as

<script src="app.js"></script>
<script src="service/provider.js"</script>
<script src="controller/weather.js"></script>

I were using a wrong example of webpack config, the following line was not proper for my case:

target: 'web'

After replacing it with:

target: 'node'

everything started working as expected.

Related