All geek questions in one place

The "ng-component" selector did not match the error elements

Error:

EXCEPTION: Error in :0:0 caused by: The selector "ng-component" did not match any elements

The application works fine when working with systemjs directly. When I tried to build globals.bundle.js and app.bundle.js using webpack and deploy, I get this error.

All files and dependencies load in order.

Here is my 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 configuration

 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 Although this only happens in the webpack assembly in my local environment, I can reproduce this via plnkr

+8
source share
3 answers

Thanks @ Günter Zöchbauer and @yurzui for your support

@yurzui now I understand that I need to have a selector for the boot component or use

 <body> <ng-component></ng-component> </body>

instead

 <body> <router-outlet></router-outlet> </body>

Be that as it may, why does this work if I use systemjs and don't work with plunkr or webpack.

+6
source

One more clarification, if you use Angular Cli to create your application and you change the selector for your root component, say, from " app-root " to " root ", you need to go to the html main page, which is index.html and change the template in the body tag too. If not, you will get a similar error as above. It's from

<body> <app-root></app-root> </body> to

<body> <root></root> </body>

+1
source

After I ran into this problem, it turned out to me that you cannot put <router-outlet></router-outlet> in index.html .

So instead, I had to create a SOLELY top-level module to host the router:

 import { Component } from "@angular/core"; @Component({ selector: "my-app", template: '<router-outlet></router-outlet>' }) export class AppComponent{}

In the future, I will most likely create a top-level application, but as soon as I find out, it burned an hour. Let me implement routing now, I thought to myself. "It should be as simple as ..."

0
source

Source: https://habr.com/ru/post/1014220/

More articles:


All Articles