AngularJS с Babel и Webpack без загрузки контроллера компонентов - PullRequest
0 голосов
/ 12 февраля 2020

Я сейчас пытаюсь построить свой первый проект, используя AngularJS, Babel и Webpack.

У меня работает процесс связывания, и, кажется, все работает нормально, HTML моего партиала загружается без ошибок, однако контроллер не загружается,

Я могу видеть в связанном коде, что контроллер правильно связывается, но я не вижу, что мешает его выполнению.

Ниже представлено все, что у меня есть:

компонент

import practiceTemplate from './practice.template.html';
var practiceComponent = {
    angularName: "practiceComponent",
    template: practiceTemplate,
    controller: practiceController,
    controllerAs: "practice"
}
/* @ngInject */
class practiceController {
    constructor($http) {
        this.http = $http;
        this.test = "test";
    }
    $onInit() {
        console.log(this);
        console.log("test");
        this.testGet();
    }
    testGet() {
        this.http.get("https://webhook.site/88ea9ff5-a3f7-4c50-9b81-d732d4389d3c").then(response => { console.log(response); });
    }
}
export default practiceComponent; 

шаблон

<article>
    <h1>Hello!</h1>

    <p>{{practice.test}}</p>
</article>

приложение. js

import practiceComponent from './practice/practice.component';
import angular from 'angular';

angular.module("testModule", [])
    .component("practiceComponent", practiceComponent);

index. html

<div ng-app="testModule">
    <practice-component></practice-component>
</div>

webpack.config

var path = require('path');

module.exports = {
    entry: {
        'main': path.join(__dirname, 'Scripts/src/AngularJS/app.js')
    },
    output: {
        filename: '[name]-bundle.js',
        path: path.join(__dirname, '/Scripts/dist/')
    },
    module: {
        rules: [
           {
               test: /\.js$/,
               exclude: /node_modules/,
               use: {
                loader: 'babel-loader',
                options: {
                    presets: ["@babel/preset-env"],
                    plugins: ["angularjs-annotate"]
                }
               }
           },
            {
                test: /\.html$/,
                include: path.resolve(__dirname, 'Scripts/src/AngularJS'),
                loader: 'html-loader'
            },
            {
                test: /\.styl$/,
                loader: 'style!css!stylus'
            },
            {
                test: /\.css$/,
                loader: 'style!css'
            }
        ]
    },
    target: "node"
};
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...