Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Simple angular component doesn't show anything

I'm trying to implement a very simple Angular component. I expect it to output "Hello World" for the main-windows tag. Unfortunately it's not showing anything.

I can confirm, that webpack is working fine. I can see all my files packed in bundle.js and there are not errors.

index.html:

<!DOCTYPE html>
<html>
<head lang="en">
    <title>Test Page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app="prj">

<main-window></main-window>

<script src="bundle.js"></script>

</body>
</html>

index.js:

import 'expose?$!expose?jQuery!jquery';
import angular from 'angular';
import 'bootstrap-webpack';
import './mystyle.css';
import './mainWindow.js'

var ngModule = angular.module('prj', []);

mainWindow.js: import angular from 'angular';

angular.module('prj', []).component('mainWindow', {
        template: '<h1>Hello World</h1>'
    }
);
like image 638
BetaRide Avatar asked Dec 14 '25 03:12

BetaRide


1 Answers

Please try as shown below.

index.js

var ngModule = angular.module('prj', []);

mainWindow.js

ngModule.component('mainWindow', {
        template: '<h1>Hello World</h1>'
    }
);
like image 130
Sampath Avatar answered Dec 16 '25 17:12

Sampath



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!