Question

当我的Angular2应用中第一次加载页面时，有谁知道为什么会出现此错误？当我浏览我的应用程序时，它会消失并且不会回来。如果我按下CTRL + F5，它往往会回来（虽然不是每一次！）。此应用的此路由如下所示：

AppComponent.ts
  LoginComponent.ts
  DashboardComponent(Parent route with its own child routes)
    MainDashboardComponent
    EmployeesComponent

顶级index.html文件中包含<my-app></my-app>标记，错误会定期抱怨，所以我很困惑，它不会在页面上看到该标记！

错误详情：

EXCEPTION：选择器＆＃34; my-app＆＃34;不匹配任何elementsBrowserDomAdapter.logError @ angular2.dev.js：22823BrowserDomAdapter.logGroup @ angular2.dev.js：22834ExceptionHandler.call @ angular2.dev.js：1163（匿名函数）@ angular2.dev.js：12481NgZone._notifyOnError @ angular2.dev.js:13405collection_1.StringMapWrapper.merge.onError @ angular2.dev.js:13309run @ angular2-polyfills.js：141（匿名函数）@ angular2.dev.js：13328zoneBoundFn @ angular2-polyfills.js：111lib $ es6 $ promise $$ internal $$ tryCatch @ angular2-polyfills.js：1511lib $ es6 $ promise $$ internal $$ invokeCallback @ angular2-polyfills.js：1523lib $ es6 $ promise $$ internal $$ publish @ angular2-polyfills。 js：1494（匿名函数）@ angular2-polyfills.js：243microtask @ angular2.dev.js：13360run @ angular2-polyfills.js：138（匿名函数）@ angular2.dev.js：13328zoneBoundFn @ angular2-polyfills.js： 111lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js：1305   angular2.dev.js：22823 STACKTRACE：BrowserDomAdapter.logError @ angular2.dev.js：22823ExceptionHandler.call @ angular2.dev.js：1165（匿名函数）@ angular2.dev.js：12481NgZone._notifyOnError @ angular2.dev.js ：13405collection_1.StringMapWrapper.merge.onError @ angular2.dev.js：13309run @ angular2-polyfills.js：141（匿名函数）@ angular2.dev.js：13328zoneBoundFn @ angular2-polyfills.js：111lib $ es6 $ promise $$ internal $$ tryCatch @ angular2-polyfills.js：1511lib $ es6 $ promise $$ internal $$ invokeCallback @ angular2-polyfills.js：1523lib $ es6 $ promise $$ internal $$ publish @ angular2-polyfills.js：1494（匿名函数）@ angular2-polyfills.js：243microtask @ angular2.dev.js：13360run @ angular2-polyfills.js：138（匿名函数）@ angular2.dev.js：13328zoneBoundFn @ angular2-polyfills.js：111lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js：1305   angular2.dev.js：22823错误：选择器＆＃34; my-app＆＃34;与任何元素都不匹配       在新的BaseException（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:7104:21）       在DomRenderer.selectRootElement（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13724:15）       在HostViewFactory.viewFactory_HostAppComponent0 [as viewFactory]（viewFactory_HostAppComponent：72：18）       在AppViewManager_.createRootHostView（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:9226:34）       在http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12246:46       在Zone.run（http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:138:17）       在Zone.run（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13328:32）       在zoneBoundFn（http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:111:19）       在lib $ es6 $ promise $$ internal $$ tryCatch（http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1511:16）       在lib $ es6 $ promise $$ internal $$ invokeCallback（http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1523:17）

-----异步缺口-----   错误       at _getStacktraceWithUncaughtError（http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26）       在Zone.fork（http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40）       在Zone.bind（http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:109:48）       在bindArguments（http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:980:29）       在lib $ es6 $ promise $ promise $$ Promise.obj。（匿名函数）[当时]（http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:1000:37）       在DynamicComponentLoader_.loadAsRoot（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12245:49）       at di_1.provide.useFactory（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12343:39）       在Injector._instantiate（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11354:19）       在Injector._instantiateProvider（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11287:21）       在Injector._new（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:11277:19）

-----异步缺口-----   错误       at _getStacktraceWithUncaughtError（http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2195:26）       在Zone.fork（http://localhost:3000/node_modules/angular2/bundles/angular2-polyfills.js:2253:40）       在NgZone._createInnerZone（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13316:39）       在新的NgZone（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:13182:32）       在createNgZone（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12365:12）       在PlatformRef_.application（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:12440:31）       at Object.bootstrap（http://localhost:3000/node_modules/angular2/bundles/angular2.dev.js:24543:64）       执行时（http://localhost:3000/app/main.js:15:23）       在ensureEvaluated（http://localhost:3000/node_modules/systemjs/dist/system.src.js:3202:26）       at Object.execute（http://localhost:3000/node_modules/systemjs/dist/system.src.js:3323:13)BrowserDomAdapter.logError @ angular2.dev.js：22823ExceptionHandler.call @ angular2.dev.js：1166（匿名函数）@ angular2.dev.js：12481NgZone._notifyOnError @ angular2.dev.js：13405collection_1 .StringMapWrapper.merge.onError @ angular2.dev.js：13309run @ angular2-polyfills.js：141（匿名函数）@ angular2.dev.js：13328zoneBoundFn @ angular2-polyfills.js：111lib $ es6 $ promise $$ internal $ $ tryCatch @ angular2-polyfills.js：1511lib $ es6 $ promise $$ internal $$ invokeCallback @ angular2-polyfills.js：1523lib $ es6 $ promise $$ internal $$ publish @ angular2-polyfills.js：1494（匿名函数） @ angular2-polyfills.js：243microtask @ angular2.dev.js：13360run @ angular2-polyfills.js：138（匿名函数）@ angular2.dev.js：13328zoneBoundFn @ angular2-polyfills.js：111lib $ es6 $ promise $ asap $$ flush @ angular2-polyfills.js：1305

Answer 1

您可能应在<script>代码后的index.html文件中添加</body>代码。

你的脚本应该在DOM准备就绪后运行。

<强>更新

<body>
  <my-app>Loading...</my-app>
  <script>
    //Your scripts
  </script>
</body>

Answer 2

我猜index.html中没有与AppComponent中的选择器匹配的元素。

Answer 3

在index.html中应与路由器

的app.ts组件选择器匹配

@Component({
  selector: 'my-app',
  directives: [ROUTER_DIRECTIVES],
  template: `

///////////////////

<body>
    <script>
        System.config({
            packages: {
                appScripts: {
                    defaultExtension: 'js'
                }
            }
        });
        System.import('appScripts/app')
              .then(null, console.error.bind(console));
    </script>
       <my-app></my-app> <!--  -->
</body>

Answer 4

我认为每个人都需要澄清由于以下原因导致的错误：

最初，当angular-cli创建应用程序时，它将加载“ app-root”组件（您可以在app.module.ts中进行检查）

引导程序：[MainComponent]

当您需要根据我们提供的组件启动应用程序时，需要将该组件导入app.module.ts并将该组件添加到“ bootstrap”数组中。

bootstrap：[LoginComponent]

另一件事要记住，angular-cli创建应用程序时，它将使用“ app-root”组件在localhost：4200上重定向，这意味着当您运行应用程序时，您最初会看到app.component.html（查看）
这将在index.html文件中完成，如下所示
```
<body>
<app-root></app-root> 
</body>
```
要在我们提供的首字母上运行应用，您需要更改此二手组件选择器
```
<body> 
<app-login></app-login> 
</body>`
```

Answer 5

确保在LoginComponent.ts文件的@Component部分中指定的选择器已链接到正确的templateUrl和styleUrls值。
将LoginComponent添加到您的引导程序数组中（在app.module.ts文件中）以使其成为引导程序：[LoginComponent]。

Answer 6

我遇到了同样的问题，如果您将选择器添加到角度应用程序的index.html中，它将起作用。

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Pcms</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-login></app-login>
</body>
</html>

希望有帮助！。

Answer 7

确定您使用了应用路由并且必须将选择器更改为：'my-app' 到 'app-root'

  @Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
  })

Answer 8

我遇到了同样的问题。我检查index.html和app标签丢失了。如果你有选择器作为my-app而不是我的-app标签应该存在

<html>
<head>
  <meta charset="utf-8">
  <title>InvoiceAngularUIFinal</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app>Loading...</app>
</body>
</html>

Angular2 - 选择器＆＃34; my-app＆＃34;与任何元素都不匹配（仅在第一次加载时）

8 个答案: