Question

将ASP.Net Core MVC SPA项目的客户端应用程序从Angular 5.2更新到Angular 7之后，从index.html加载应用程序时，我收到以下运行时错误：

选择器“ app-root”与任何元素都不匹配

    at DefaultDomRenderer2.push../node_modules/@angular/platform-browser/fesm5/platform-browser.js.DefaultDomRenderer2.selectRootElement (VM147 vendor.js:76470)
    at DebugRenderer2.push../node_modules/@angular/core/fesm5/core.js.DebugRenderer2.selectRootElement (VM147 vendor.js:67815)
    at createElement (VM147 vendor.js:64501)
    at createViewNodes (VM147 vendor.js:66739)
    at createRootView (VM147 vendor.js:66692)
    at callWithDebugContext (VM147 vendor.js:67700)
    at Object.debugCreateRootView [as createRootView] (VM147 vendor.js:67210)
    at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (VM147 vendor.js:65031)
    at ComponentFactoryBoundToModule.push../node_modules/@angular/core/fesm5/core.js.ComponentFactoryBoundToModule.create (VM147 vendor.js:53458)
    at ApplicationRef.push../node_modules/@angular/core/fesm5/core.js.ApplicationRef.bootstrap (VM147 vendor.js:61611)

问题似乎在于，脚本是在DOM初始化之前执行的，因此找不到元素。 “已编译” index.html源代码如下：

<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script><!doctype html>
<html lang="en">

<head>
  <base href="/">
  <meta charset="utf-8">
  <title>capatrello</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<app-root>Loading...</app-root>

</html>

脚本文件会自动插入文件的开头。如果我在文件末尾手动插入脚本，则该应用程序将启动并按预期运行。但是，然后将脚本插入并执行两次，但在第一次尝试时仍会引发错误。编译后的index.html：

<script type="text/javascript" src="runtime.js"></script><script type="text/javascript" src="polyfills.js"></script><script type="text/javascript" src="styles.js"></script><script type="text/javascript" src="vendor.js"></script><script type="text/javascript" src="main.js"></script><!doctype html>
<html lang="en">

<head>
  <base href="/">
  <meta charset="utf-8">
  <title>capatrello</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<app-root>Loading...</app-root>

</html>
<script type="text/javascript" src="runtime.js"></script>
<script type="text/javascript" src="polyfills.js"></script>
<script type="text/javascript" src="styles.js"></script>
<script type="text/javascript" src="vendor.js"></script>
<script type="text/javascript" src="main.js"></script>

通过什么机制将脚本文件插入index.html？
是否可以将其配置为在index.html的末尾插入脚本文件？
这是正确的解决方法还是其他地方的根本原因？

更新到Angular 7后，选择器“ app-root”与任何元素都不匹配

0 个答案: