简单的角度组件不显示任何内容
Posted
技术标签:
【中文标题】简单的角度组件不显示任何内容【英文标题】：Simple angular component doesn't show anything 【发布时间】：2016-08-19 00:02:53 【问题描述】：我正在尝试实现一个非常简单的 Angular 组件。我希望它为main-windows 标签输出“Hello World”。不幸的是，它没有显示任何内容。
我可以确认，webpack 工作正常。我可以看到我所有的文件都打包在bundle.js 中并且没有错误。
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', []);
主窗口.js： 从“角度”导入角度；
angular.module('prj', []).component('mainWindow',
template: '<h1>Hello World</h1>'
);
【问题讨论】：
我看到的第一件事是，您两次声明了 prj 模块。 angular.module('prj',[]) 创建模块，如果你想加载它使用 angular.module('prj') angular 已经定义了，所以你不应该再次创建它。做angular.module('prj').component('mainWindow', template: '<h1>Hello World</h1>' );
【参考方案1】：
请尝试如下所示。
index.js
var ngModule = angular.module('prj', []);
mainWindow.js
ngModule.component('mainWindow',
template: '<h1>Hello World</h1>'
);
【讨论】：
mainWindow.js 中的模块可以使用angular.module('prj') 获取。这将消除对全局变量ngModule的依赖。
@musically_ut 希望不是那样，不是吗？因此 OP 接受了答案。以上是关于简单的角度组件不显示任何内容的主要内容，如果未能解决你的问题，请参考以下文章
将角度/材质包更新到最新版本后，角度材质自动完成组件不显示项目