Накладные угловые выступы с веб-пакетом - PullRequest
Новая
       23

Накладные угловые выступы с веб-пакетом

0 голосов
/ 07 июня 2019

Привет, я изо всех сил пытаюсь заставить мои вкладки начальной загрузки / угловой маршрутизатор работать через веб-пакет.Без использования веб-пакета он работает нормально.

Я получаю ошибку Error: Argument 'TabsDesktopCtrl' is not a function, got undefined

Нужно знать, как заставить его работать правильно?

  1. Вывести папку маршрутовв каталог сборки?
  2. Загрузка угловых сценариев?

Впервые в веб-пакете, любая помощь очень ценится!

Структура 

build
src
/images
/js
--/angular_routing.js
--/...
/scss
/routes
--/settings.html
...
/index.js
/template.html
webpack.common.js
webpack.dev.js
webpack.prod.js

Вот мои файлы

/ src / js / angular_routing.js 

var app = angular.module('profile-page', []);
app.config(['$routeProvider', '$locationProvider', function ($routeProvider, $locationProvider) {

  $routeProvider.
    when('/titanfx-account', { templateUrl: './routes/account.html', controller: MainCtrl }).
    when('/trader-client-cabinet', { templateUrl: './routes/trader.html', controller: MainCtrl }).
    when('/intro-broker-ib', { templateUrl: './routes/broker', controller: MainCtrl }).
    when('/history-notes', { templateUrl: './routes/history-notes.html', controller: MainCtrl }).
    when('/settings', { templateUrl: './routes/settings.html', controller: MainCtrl }).
    otherwise({ redirectTo: '/account.html' });
}]);
function TabsDesktopCtrl($scope, $location) {
  $scope.tabs = [
    { link: '#/account', label: 'Account' },
    { link: '#/trader', label: 'Trader' },
    { link: '#/broker', label: 'Broker' },
    { link: '#/history-notes', label: 'History / Notes' },
    { link: '#/settings', label: 'Settings' }
  ];
  $scope.selectedTab = $scope.tabs[0];
  $scope.setSelectedTab = function (tab) {
    $scope.selectedTab = tab;
  }
  $scope.tabClass = function (tab) {
    if ($scope.selectedTab == tab) {
      return "active";
    } else {
      return "";
    }
  }
}

/ src / template.html (с использованием HtmlWebpackPlugin) 

<html ng-app="profile-page">
...
<script data-require="angular.js@1.0.x" src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<script>
<!--Tab View Desktop -->
<ul class="nav nav-tabs nav-tabs-desktop" ng-controller="TabsDesktopCtrl">
<li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab"><a href="{{tab.link}}" data-target="#"
                ng-click="setSelectedTab(tab)">{{tab.label}}</a></li>
</ul>

<!--Main View -->
<div ng-view></div>

webpack.common.js 

const path = require("path");

module.exports = {
entry: {
  main: "./src/index.js",
  angular_routing: "./src/js/angular_routing.js",
  angular_tabs: "./src/js/angular_tabs.js",
  inline: "./src/js/inline.js",
  user_profile_js: "./src/js/user_profile_js.js"
},
module: {
    rules: [
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        use: {
            loader: "file-loader",
            options: {
              name: "[name].[hash].[ext]",
              outputPath: "images"
            }
        }
      },
      {
        test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
        use: {
            loader: "url-loader",
            options: {
              name: "[name].[hash].[ext]",
              outputPath: "images"
            }
        }
      },
      {
        test: /\.html$/,
        use: [
            "html-loader"
        ]
      }

    ]
}
};

webpack.prod.js 

const path = require("path");
const common = require("./webpack.common");
const merge = require("webpack-merge");
const {CleanWebpackPlugin} = require("clean-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin"); 
var HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = merge(common, {
mode: "production",
output: {
    filename: "[name].[contentHash].bundle.js",
    path: path.resolve(__dirname, "build")
},
optimization: {
    minimizer: [
        new OptimizeCssAssetsPlugin(),
        new TerserPlugin()
    ]
},
plugins: [
    new MiniCssExtractPlugin(
        {
            filename: "[name].[contentHash].css"
        }
    ), 
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin(
        {
            template: "./src/template.html"
        }
    )
],
module:{
    rules: [
        {
            test: /\.scss$/,
            use: [
                MiniCssExtractPlugin.loader,
                "css-loader",
                "sass-loader"
            ]
        },
    ]
}
});

1 Ответ

0 голосов
/ 07 июня 2019

Ошибка, которую вы получаете, заключается в том, что функция TabsDesktopCtrl находится вне области действия. В предположении я скажу, что без веб-пакета Angular просто разрешит глобальную функцию.

Очень хакерский способ, который я никоим образом не рекомендую. Было бы объявить функцию глобально следующим образом:

window.TabsDesktopCtrl = function ($scope, $location) { //etc... }

Вышесказанное не решит большую проблему, которая связана с веб-пакетом и как это реализовано. Хотя есть гораздо лучшие руководства по этому вопросу.

https://webpack.js.org/concepts https://www.robinwieruch.de/minimal-react-webpack-babel-setup/

...