"例外:T已实例化时出错!已经注册的主要出口&QUOT。科尔多瓦angular2应用 [英] "Exception: Error during instantiation of t! Primary outlet already registered." in cordova angular2 app

查看:193
本文介绍了"例外:T已实例化时出错!已经注册的主要出口&QUOT。科尔多瓦angular2应用的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我建立我的项目的一个简单的科尔多瓦应用程序。它有2层嵌套(主路)的 - >子路径 - >(另一个孩子的路线)。 当试图浏览到第2级(另一个孩子的路线)我得到一个错误说异常:T已实例化时出错!主要的出口已注册。第一级工作正常。我没有任何模板中使用的路由器出口的两倍。问题是在浏览器的仿真相同,以及机器人。

附铬以下检查。

在这里输入的形象描述

我的HTML文件

 < HTML和GT;
< HEAD>
    <基地HREF =./>
    < META HTTP-EQUIV =内容安全性政策的内容=默认-src的自我的数据:差距:https://ssl.gstatic.com不安全-EVAL';风格-src的'自我''不安全-inline;媒体SRC *>
    < META NAME =格式检测CONTENT =电话=无>
    < META NAME =msapplication抽头高亮CONTENT =NO>
    < META NAME =视CONTENT =用户可扩展性=无,初始规模= 1,最大规模= 1,最低规模= 1,宽度=设备宽度>
    <链接rel =stylesheet属性类型=文/ CSS的href =CSS / index.css>
    <链接HREF =资产/ CSS / bootstrap.min.css的rel =stylesheet属性类型=文/ CSS/>
    <链接HREF =资产/ CSS / style.css中相对=样式类型=文/ CSS/>
    <链接HREF =资产/ CSS /皮肤/皮肤white.css的rel =stylesheet属性类型=文/ CSS/>
    <标题>的Hello World< /标题>
< /头>
<身体GT;
    <主应用>
      < D​​IV CLASS =应用程序>
          < H1>的Apache科尔多瓦< / H1>
          < D​​IV ID =deviceready级=眨眼>
              < p =班事件侦听>连接到设备< / P>
          < / DIV>
      < / DIV>
    < /主应用>
    < HEAD>    <! - 1.装入库 - >
    <! - IE需要polyfills,在此准确顺序 - >
    <脚本SRC =JS / angulardeps / 2.0.0-beta.9 / shims_for_IE.js>< / SCRIPT>
    <脚本SRC =JS / angulardeps / 2.0.0-beta.9 / ES6-shim.min.js>< / SCRIPT>
    <脚本SRC =JS / angulardeps / 2.0.0-beta.9 /系统polyfills.js>< / SCRIPT>
    <脚本SRC =JS / angulardeps / 2.0.0-beta.9 / angular2-polyfills.js>< / SCRIPT>
    <脚本SRC =JS / angulardeps / 2.0.0-beta.9 / system.js>< / SCRIPT>
    <脚本SRC =JS / angulardeps / 2.0.0-beta.9 / Rx.js>< / SCRIPT>
    <脚本SRC =JS / angulardeps / 2.0.0-beta.9 / angular2.dev.js>< / SCRIPT>
    <脚本SRC =JS / angulardeps / 2.0.0-beta.9 / router.min.js>< / SCRIPT>
    <脚本SRC =JS / angulardeps / 2.0.0-beta.9 / http.min.js>< / SCRIPT>
    <脚本SRC =资产/插件/ jQuery的/ jQuery的-2.1.4.min.js类型=文/ JavaScript的>< / SCRIPT>
    <脚本SRC =资产/ JS / bootstrap.min.js类型=文/ JavaScript的>< / SCRIPT>    <脚本类型=文/ JavaScript的SRC =cordova.js>< / SCRIPT>
    <脚本类型=文/ JavaScript的SRC =JS / index.js>< / SCRIPT>
< /身体GT;

我的生成源结构:

我的主要成分:

 进口{}组件从angular2 /核心;
进口{} ApproutesComponent从'../app/approutes';
进口{ROUTER_DIRECTIVES,ROUTER_PROVIDERS,RouteConfig}从'angular2 /路由器;@RouteConfig([
  {路径:'/ D / ...',分量:ApproutesComponent,名称:ApproutesCmp',useAsDefault:真正}
])
@零件({
  选择:主应用程序,
  templateUrl:应用程序/ R /主/ rmain.html',
  指令:[ROUTER_DIRECTIVES]
})
出口类RroutesComponent {
  构造函数(){}
}


解决方案

我有angular2 beta11同样的问题,只是没有使用科尔多瓦。

据帖子这里 您应该使用非缩小的版本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.

这篇关于&QUOT;例外:T已实例化时出错!已经注册的主要出口&QUOT。科尔多瓦angular2应用的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆