错误:
- 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
- <%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
- <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <title>Maven + Spring MVC</title>
- <base href="/survey-web/">
- <spring:url value="/resources/core/css/hello.css" var="coreCss" />
- <spring:url value="/resources/core/css/bootstrap.min.css" var="bootstrapCss" />
- <link href="${bootstrapCss}" rel="stylesheet" />
- <link href="${coreCss}" rel="stylesheet" />
- <%--<script src="resources/node_modules/zone.js/dist/zone.min.js"></script>
- <script src="resources/node_modules/reflect-Metadata/Reflect.js"></script>
- <script src="resources/js/system.src.js"></script>
- <script src="resources/systemjs.config.js"></script>--%>
- <script src="resources/dist/globals.bundle.js"></script>
- <script src="resources/dist/app.bundle.js"></script>
- <script>
- //System.import('app').catch(function(err){ console.error(err); });
- </script>
- </head>
- <body>
- <router-outlet></router-outlet>
- </body>
- </html>
Webpack配置
- module.exports = {
- entry: {
- globals: [
- 'zone.js','reflect-Metadata'
- ],app: './app/main.ts',},module: {
- loaders: [
- {test: /.ts$/,loader: 'awesome-typescript-loader'},]
- },output: {
- filename: '[name].bundle.js',path: './dist'
- }
- };
Plunkr
https://plnkr.co/edit/AfYGsdHpIVnVnuF7BCUJ?p=preview
虽然它只发生在我本地环境中的webpack构建中,但我可以通过plnkr重现这一点
感谢@GünterZöchbauer和@yurzui的支持
@yurzui现在我明白我需要一个引导程序组件或使用的选择器
- <body>
- <ng-component></ng-component>
- </body>
代替
- <body>
- <router-outlet></router-outlet>
- </body>
如果我使用systemjs并且不能使用plunkr或webpack,那么它是如何工作的呢?