“Exception：Error during instantiation of t！主出口已经注册“。在cordova angular2应用程序 [英] "Exception: Error during instantiation of t! Primary outlet already registered." in cordova angular2 app
本文介绍了“Exception：Error during instantiation of t！主出口已经注册“。在cordova angular2应用程序的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在使用我的项目建立一个简单的cordova应用程式。它有2层嵌套（主路由） - >子路由 - >（另一个子路由）。 当试图浏览到第二级（另一个子路由）我得到一个错误说异常：错误在实例化t！主出口已经注册。第一级工程罚款。我没有在任何模板中使用路由器插座两次。问题是在浏览器和Android的仿真是一样的。
在下面附加chrome检查。
我的HTML档案
code>< html>
< head>
< base href =./>
< meta http-equiv =Content-Security-Policycontent =default-src'self'data：gap：https://ssl.gstatic.com'unsafe-eval'; style-src' self''unsafe-inline'; media-src *>
< meta name =format-detectioncontent =telephone = no>
< meta name =msapplication-tap-highlightcontent =no>
< meta name =viewportcontent =user-scalable = no，initial-scale = 1，maximum-scale = 1，minimum-scale = 1，width = device-width>
< link rel =stylesheettype =text / csshref =css / index.css>
< link href =assets / css / bootstrap.min.css =stylesheettype =text / css/>
< link href =assets / css / style.css =stylesheettype =text / css/>
< link href =assets / css / skins / skin-white.css =stylesheettype =text / css/>
< title> Hello World< / title>
< / head>
< body>
< main-app>
< div class =app>
< h1> Apache Cordova< / h1>
< div id =devicereadyclass =blink>
< p class =event listening>正在连接到设备< / p>
< / div>
< / div>
< / main-app>
< head>
<！ - 1.加载库 - >
<！ - IE必需的polyfills，在这个确切的顺序 - >
< script src =js / angulardeps / 2.0.0-beta.9 / shims_for_IE.js>< / script>
< script src =js / angulardeps / 2.0.0-beta.9 / es6-shim.min.js>< / script>
< script src =js / angulardeps / 2.0.0-beta.9 / system-polyfills.js>< / script>
< script src =js / angulardeps / 2.0.0-beta.9 / angular2-polyfills.js>< / script>
< script src =js / angulardeps / 2.0.0-beta.9 / system.js>< / script>
< script src =js / angulardeps / 2.0.0-beta.9 / Rx.js>< / script>
< script src =js / angulardeps / 2.0.0-beta.9 / angular2.dev.js>< / script>
< script src =js / angulardeps / 2.0.0-beta.9 / router.min.js>< / script>
< script src =js / angulardeps / 2.0.0-beta.9 / http.min.js>< / script>
< script src =assets / plugins / jQuery / jQuery-2.1.4.min.jstype =text / javascript>< / script>
< script src =assets / js / bootstrap.min.jstype =text / javascript>< / script>
< script type =text / javascriptsrc =cordova.js>< / script>
< script type =text / javascriptsrc =js / index.js>< / script>
< / body>
我的构建源结构：
我的主要组件：
import {component} from'angular2 /核心';
import {ApproutesComponent} from'../app/approutes';
import'ROUTER_DIRECTIVES，ROUTER_PROVIDERS，RouteConfig} from'angular2 / router';
@RouteConfig（[
{path：'/ d / ...'，component：ApproutesComponent，name：'ApproutesCmp'，useAsDefault：true}
]）
@Component（{
selector：'main-app'，
templateUrl：'app / r / main / rmain.html'，
指令：[ROUTER_DIRECTIVES]
} ）
export class RroutesComponent {
constructor（）{}
}
根据一个帖子 https://github.com/auth0/angular2-authentication-sample/issues/58\">在这里 您应该使用未精简版本的router.js 。
听起来很奇怪，但它对我有用。
I am building an simple cordova app with my project. It has 2 levels of nesting (main route) -> child route -> (another child route). When trying to browse to the 2nd level (another child route) I get an error saying Exception: Error during instantiation of t! Primary outlet already registered. First level works fine. I have not used router outlet twice in any template. The issue is the same in the emulation of browser as well as android.
Attached the chrome inspect below.
My HTML File
<html>
<head>
<base href="./">
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="stylesheet" type="text/css" href="css/index.css">
<link href="assets/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/style.css" rel="stylesheet" type="text/css" />
<link href="assets/css/skins/skin-white.css" rel="stylesheet" type="text/css" />
<title>Hello World</title>
</head>
<body>
<main-app>
<div class="app">
<h1>Apache Cordova</h1>
<div id="deviceready" class="blink">
<p class="event listening">Connecting to Device</p>
</div>
</div>
</main-app>
<head>
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="js/angulardeps/2.0.0-beta.9/shims_for_IE.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/es6-shim.min.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/system-polyfills.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/angular2-polyfills.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/system.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/Rx.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/angular2.dev.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/router.min.js"></script>
<script src="js/angulardeps/2.0.0-beta.9/http.min.js"></script>
<script src="assets/plugins/jQuery/jQuery-2.1.4.min.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
</body>
My build source structure:
My main component:
import {Component} from 'angular2/core';
import {ApproutesComponent} from '../app/approutes';
import {ROUTER_DIRECTIVES, ROUTER_PROVIDERS, RouteConfig} from 'angular2/router';
@RouteConfig([
{path: '/d/...', component: ApproutesComponent, name: 'ApproutesCmp', useAsDefault:true}
])
@Component({
selector: 'main-app',
templateUrl: 'app/r/main/rmain.html',
directives:[ROUTER_DIRECTIVES]
})
export class RroutesComponent {
constructor(){}
}
解决方案
I had the same problem with angular2 beta11, just not using cordova.
According to a post here you should use the non-minified version of router.js. Sounds strange, but it worked for me.
这篇关于“Exception：Error during instantiation of t！主出口已经注册“。在cordova angular2应用程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
