angularjs – 选择器“ng-component”与任何元素错误都不匹配

前端之家收集整理的这篇文章主要介绍了angularjs – 选择器“ng-component”与任何元素错误都不匹配前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
错误
  1. EXCEPTION: Error in :0:0 caused by: The selector "ng-component" did not match any elements

使用systemjs直接运行应用程序正常.
当我尝试使用webpack和部署构建globals.bundle.js和app.bundle.js时,我得到了这个错误.

所有文件和依赖项都可以正常加载.

这是我的HTML

  1. <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
  2. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
  3. <!DOCTYPE html>
  4. <html lang="en">
  5. <head>
  6. <title>Maven + Spring MVC</title>
  7. <base href="/survey-web/">
  8. <spring:url value="/resources/core/css/hello.css" var="coreCss" />
  9. <spring:url value="/resources/core/css/bootstrap.min.css" var="bootstrapCss" />
  10. <link href="${bootstrapCss}" rel="stylesheet" />
  11. <link href="${coreCss}" rel="stylesheet" />
  12. <%--<script src="resources/node_modules/zone.js/dist/zone.min.js"></script>
  13. <script src="resources/node_modules/reflect-Metadata/Reflect.js"></script>
  14. <script src="resources/js/system.src.js"></script>
  15. <script src="resources/systemjs.config.js"></script>--%>
  16. <script src="resources/dist/globals.bundle.js"></script>
  17. <script src="resources/dist/app.bundle.js"></script>
  18.  
  19. <script>
  20. //System.import('app').catch(function(err){ console.error(err); });
  21. </script>
  22. </head>
  23. <body>
  24. <router-outlet></router-outlet>
  25. </body>
  26. </html>

Webpack配置

  1. module.exports = {
  2. entry: {
  3. globals: [
  4. 'zone.js','reflect-Metadata'
  5. ],app: './app/main.ts',},module: {
  6. loaders: [
  7. {test: /.ts$/,loader: 'awesome-typescript-loader'},]
  8. },output: {
  9. filename: '[name].bundle.js',path: './dist'
  10. }
  11. };

Plunkr

https://plnkr.co/edit/AfYGsdHpIVnVnuF7BCUJ?p=preview
虽然它只发生在我本地环境中的webpack构建中,但我可以通过plnkr重现这一点

感谢@GünterZöchbauer和@yurzui的支持

@yurzui现在我明白我需要一个引导程序组件或使用的选择器

  1. <body>
  2. <ng-component></ng-component>
  3. </body>

代替

  1. <body>
  2. <router-outlet></router-outlet>
  3. </body>

如果我使用systemjs并且不能使用plunkr或webpack,那么它是如何工作的呢?

猜你在找的Angularjs相关文章