当我删除家庭组件：处理请求时发生未处理的异常

我使用此模板在visual studio 2015中使用角2和asp核心。 Template 当我删除家庭组件：处理请求时发生未处理的异常

我删除Fetch Data and Counter Component，它没有问题，它的做工精细，但当我删除

Home Component它表明我这个错误：

An unhandled exception occurred while processing the request.

Exception: Call to Node module failed with error: Error: Uncaught (in promise): Error: Cannot find primary outlet to load 'HomeComponent' Error: Cannot find primary outlet to load 'HomeComponent' at getOutlet (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\@angular\router\bundles\router.umd.js:3018:23) at ActivateRoutes.activateRoutes (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\@angular\router\bundles\router.umd.js:2945:34) at E:\MyProject\Angular2Application5\Angular2Application5\node_modules\@angular\router\bundles\router.umd.js:2909:23 at Array.forEach (native) at ActivateRoutes.activateChildRoutes (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\@angular\router\bundles\router.umd.js:2908:33) at ActivateRoutes.activate (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\@angular\router\bundles\router.umd.js:2903:18) at E:\MyProject\Angular2Application5\Angular2Application5\node_modules\@angular\router\bundles\router.umd.js:2644:60 at SafeSubscriber._next (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\rxjs\Observable.js:108:21) at SafeSubscriber.__tryOrSetError (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\rxjs\Subscriber.js:232:16) at SafeSubscriber.next (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\rxjs\Subscriber.js:174:27) at resolvePromise (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\zone.js\dist\zone-node.js:468:31) at E:\MyProject\Angular2Application5\Angular2Application5\node_modules\zone.js\dist\zone-node.js:445:13 at ZoneDelegate.invoke (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\zone.js\dist\zone-node.js:232:26) at Object.onInvoke (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\@angular\core\bundles\core.umd.js:6242:41) at ZoneDelegate.invoke (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\zone.js\dist\zone-node.js:231:32) at Zone.run (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\zone.js\dist\zone-node.js:114:43) at E:\MyProject\Angular2Application5\Angular2Application5\node_modules\zone.js\dist\zone-node.js:502:57 at ZoneDelegate.invokeTask (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\zone.js\dist\zone-node.js:265:35) at Object.onInvokeTask (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\@angular\core\bundles\core.umd.js:6233:41) at ZoneDelegate.invokeTask (E:\MyProject\Angular2Application5\Angular2Application5\node_modules\zone.js\dist\zone-node.js:264:40)

app.module：

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 
import { AppComponent } from './components/app/app.component' 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 

@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
    ], 
    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
     RouterModule.forRoot([ 
      { path: '', redirectTo: 'home', pathMatch: 'full' }, 
      { path: '**', redirectTo: 'home' } 
     ]) 
    ] 
}) 
export class AppModule { 
}

Main-Server.js：

(function(e, a) { for(var i in a) e[i] = a[i]; }(exports, /******/ (function(modules) { // webpackBootstrap 
/******/ // The module cache 
/******/ var installedModules = {}; 
/******/ 
/******/ // The require function 
/******/ function __webpack_require__(moduleId) { 
/******/ 
/******/  // Check if module is in cache 
/******/  if(installedModules[moduleId]) 
/******/   return installedModules[moduleId].exports; 
/******/ 
/******/  // Create a new module (and put it into the cache) 
/******/  var module = installedModules[moduleId] = { 
/******/   exports: {}, 
/******/   id: moduleId, 
/******/   loaded: false 
/******/  }; 
/******/ 
/******/  // Execute the module function 
/******/  modules[moduleId].call(module.exports, module, module.exports, __webpack_require__); 
/******/ 
/******/  // Flag the module as loaded 
/******/  module.loaded = true; 
/******/ 
/******/  // Return the exports of the module 
/******/  return module.exports; 
/******/ } 
/******/ 
/******/ 
/******/ // expose the modules object (__webpack_modules__) 
/******/ __webpack_require__.m = modules; 
/******/ 
/******/ // expose the module cache 
/******/ __webpack_require__.c = installedModules; 
/******/ 
/******/ // __webpack_public_path__ 
/******/ __webpack_require__.p = "/dist/"; 
/******/ 
/******/ // Load entry module and return exports 
/******/ return __webpack_require__(0); 
/******/ }) 
/************************************************************************/ 
/******/ ([ 
/* 0 */ 
/***/ (function(module, exports, __webpack_require__) { 

    "use strict"; 
    Object.defineProperty(exports, "__esModule", { value: true }); 
    __webpack_require__(1); 
    __webpack_require__(2); 
    var core_1 = __webpack_require__(3); 
    var angular2_universal_1 = __webpack_require__(4); 
    var app_module_1 = __webpack_require__(5); 
    core_1.enableProdMode(); 
    var platform = angular2_universal_1.platformNodeDynamic(); 
    function default_1(params) { 
     return new Promise(function (resolve, reject) { 
      var requestZone = Zone.current.fork({ 
       name: 'angular-universal request', 
       properties: { 
        baseUrl: '/', 
        requestUrl: params.url, 
        originUrl: params.origin, 
        preboot: false, 
        // TODO: Render just the <app> component instead of wrapping it inside an extra HTML document 
        // Waiting on https://github.com/angular/universal/issues/347 
        document: '<!DOCTYPE html><html><head></head><body><app></app></body></html>' 
       }, 
       onHandleError: function (parentZone, currentZone, targetZone, error) { 
        // If any error occurs while rendering the module, reject the whole operation 
        reject(error); 
        return true; 
       } 
      }); 
      return requestZone.run(function() { return platform.serializeModule(app_module_1.AppModule); }).then(function (html) { 
       resolve({ html: html }); 
      }, reject); 
     }); 
    } 
    exports.default = default_1; 


/***/ }), 
/* 1 */ 
/***/ (function(module, exports) { 

    module.exports = require("angular2-universal-polyfills"); 

/***/ }), 
/* 2 */ 
/***/ (function(module, exports) { 

    module.exports = require("zone.js"); 

/***/ }), 
/* 3 */ 
/***/ (function(module, exports) { 

    module.exports = require("@angular/core"); 

/***/ }), 
/* 4 */ 
/***/ (function(module, exports) { 

    module.exports = require("angular2-universal"); 

/***/ }), 
/* 5 */ 
/***/ (function(module, exports, __webpack_require__) { 

    "use strict"; 
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 
     return c > 3 && r && Object.defineProperty(target, key, r), r; 
    }; 
    Object.defineProperty(exports, "__esModule", { value: true }); 
    var core_1 = __webpack_require__(3); 
    var router_1 = __webpack_require__(6); 
    var angular2_universal_1 = __webpack_require__(4); 
    var app_component_1 = __webpack_require__(7); 
    var navmenu_component_1 = __webpack_require__(12); 
    var AppModule = (function() { 
     function AppModule() { 
     } 
     return AppModule; 
    }()); 
    AppModule = __decorate([ 
     core_1.NgModule({ 
      bootstrap: [app_component_1.AppComponent], 
      declarations: [ 
       app_component_1.AppComponent, 
       navmenu_component_1.NavMenuComponent, 
      ], 
      imports: [ 
       angular2_universal_1.UniversalModule, 
       router_1.RouterModule.forRoot([ 
        { path: '', redirectTo: 'home', pathMatch: 'full' }, 
        { path: '**', redirectTo: 'home' } 
       ]) 
      ] 
     }) 
    ], AppModule); 
    exports.AppModule = AppModule; 


/***/ }), 
/* 6 */ 
/***/ (function(module, exports) { 

    module.exports = require("@angular/router"); 

/***/ }), 
/* 7 */ 
/***/ (function(module, exports, __webpack_require__) { 

    "use strict"; 
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 
     return c > 3 && r && Object.defineProperty(target, key, r), r; 
    }; 
    Object.defineProperty(exports, "__esModule", { value: true }); 
    var core_1 = __webpack_require__(3); 
    var AppComponent = (function() { 
     function AppComponent() { 
     } 
     return AppComponent; 
    }()); 
    AppComponent = __decorate([ 
     core_1.Component({ 
      selector: 'app', 
      template: __webpack_require__(8), 
      styles: [__webpack_require__(9)] 
     }) 
    ], AppComponent); 
    exports.AppComponent = AppComponent; 


/***/ }), 
/* 8 */ 
/***/ (function(module, exports) { 

    module.exports = "<div class='container-fluid'>\n <div class='row'>\n  <div class='col-sm-3'>\n  </div>\n  <div class='col-sm-9 body-content'>\n   \n  </div>\n </div>\n</div>\n" 

/***/ }), 
/* 9 */ 
/***/ (function(module, exports, __webpack_require__) { 


      var result = __webpack_require__(10); 

      if (typeof result === "string") { 
       module.exports = result; 
      } else { 
       module.exports = result.toString(); 
      } 


/***/ }), 
/* 10 */ 
/***/ (function(module, exports, __webpack_require__) { 

    exports = module.exports = __webpack_require__(11)(); 
    // imports 


    // module 
    exports.push([module.id, "@media (max-width: 767px) {\n /* On small screens, the nav menu spans the full width of the screen. Leave a space for it. */\n .body-content {\n  padding-top: 50px;\n }\n}\n", ""]); 

    // exports 


/***/ }), 
/* 11 */ 
/***/ (function(module, exports) { 

    /* 
     MIT License http://www.opensource.org/licenses/mit-license.php 
     Author Tobias Koppers @sokra 
    */ 
    // css base code, injected by the css-loader 
    module.exports = function() { 
     var list = []; 

     // return the list of modules as css string 
     list.toString = function toString() { 
      var result = []; 
      for(var i = 0; i < this.length; i++) { 
       var item = this[i]; 
       if(item[2]) { 
        result.push("@media " + item[2] + "{" + item[1] + "}"); 
       } else { 
        result.push(item[1]); 
       } 
      } 
      return result.join(""); 
     }; 

     // import a list of modules into the list 
     list.i = function(modules, mediaQuery) { 
      if(typeof modules === "string") 
       modules = [[null, modules, ""]]; 
      var alreadyImportedModules = {}; 
      for(var i = 0; i < this.length; i++) { 
       var id = this[i][0]; 
       if(typeof id === "number") 
        alreadyImportedModules[id] = true; 
      } 
      for(i = 0; i < modules.length; i++) { 
       var item = modules[i]; 
       // skip already imported module 
       // this implementation is not 100% perfect for weird media query combinations 
       // when a module is imported multiple times with different media queries. 
       // I hope this will never occur (Hey this way we have smaller bundles) 
       if(typeof item[0] !== "number" || !alreadyImportedModules[item[0]]) { 
        if(mediaQuery && !item[2]) { 
         item[2] = mediaQuery; 
        } else if(mediaQuery) { 
         item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"; 
        } 
        list.push(item); 
       } 
      } 
     }; 
     return list; 
    }; 


/***/ }), 
/* 12 */ 
/***/ (function(module, exports, __webpack_require__) { 

    "use strict"; 
    var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) { 
     var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d; 
     if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc); 
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r; 
     return c > 3 && r && Object.defineProperty(target, key, r), r; 
    }; 
    Object.defineProperty(exports, "__esModule", { value: true }); 
    var core_1 = __webpack_require__(3); 
    var NavMenuComponent = (function() { 
     function NavMenuComponent() { 
     } 
     return NavMenuComponent; 
    }()); 
    NavMenuComponent = __decorate([ 
     core_1.Component({ 
      selector: 'nav-menu', 
      template: __webpack_require__(13), 
      styles: [__webpack_require__(14)] 
     }) 
    ], NavMenuComponent); 
    exports.NavMenuComponent = NavMenuComponent; 


/***/ }), 
/* 13 */ 
/***/ (function(module, exports) { 

    module.exports = "\r\n" 

/***/ }), 
/* 14 */ 
/***/ (function(module, exports, __webpack_require__) { 


      var result = __webpack_require__(15); 

      if (typeof result === "string") { 
       module.exports = result; 
      } else { 
       module.exports = result.toString(); 
      } 


/***/ }), 
/* 15 */ 
/***/ (function(module, exports, __webpack_require__) { 

    exports = module.exports = __webpack_require__(11)(); 
    // imports 


    // module 
    exports.push([module.id, "li .glyphicon {\n margin-right: 10px;\n}\n\n/* Highlighting rules for nav menu items */\nli.link-active a,\nli.link-active a:hover,\nli.link-active a:focus {\n background-color: #4189C7;\n color: white;\n}\n\n/* Keep the nav menu independent of scrolling and on top of other items */\n.main-nav {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n z-index: 1;\n}\n\[email protected] (min-width: 768px) {\n /* On small screens, convert the nav menu to a vertical sidebar */\n .main-nav {\n  height: 100%;\n  width: calc(25% - 20px);\n }\n .navbar {\n  border-radius: 0px;\n  border-width: 0px;\n  height: 100%;\n }\n .navbar-header {\n  float: none;\n }\n .navbar-collapse {\n  border-top: 1px solid #444;\n  padding: 0px;\n }\n .navbar ul {\n  float: none;\n }\n .navbar li {\n  float: none;\n  font-size: 15px;\n  margin: 6px;\n }\n .navbar li a {\n  padding: 10px 16px;\n  border-radius: 4px;\n }\n .navbar a {\n  /* If a menu item's text is too long, truncate it */\n  width: 100%;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n }\n}\n", ""]); 

    // exports 


/***/ }) 
/******/ ])));

我该如何解决这个问题？有什么问题？

来源

2017-04-20 kianoush

您的homecomponent是否包含routerOutlet指令？如果是这样，并且不再需要HomeComponent，则需要在其他地方添加主要routerOutlet。 – DeborahK

@DeborahK请指导我解决这个问题。 – kianoush

@DeborahK app.component有'routerOutlet'。 – kianoush

在appmodule.ts根被定义为'home'相当于homeComponent.ts，现在homeComponent.ts不存在，您将需要的东西做来取代它......

例子：

import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { UniversalModule } from 'angular2-universal'; 
import { AppComponent } from './components/app/app.component' 
import { NavMenuComponent } from './components/navmenu/navmenu.component'; 
import { HeroComponent } from './components/hero.component'; 

@NgModule({ 
    bootstrap: [ AppComponent ], 
    declarations: [ 
     AppComponent, 
     NavMenuComponent, 
     HeroComponent 
    ], 
    imports: [ 
     UniversalModule, // Must be first import. This automatically imports BrowserModule, HttpModule, and JsonpModule too. 
     RouterModule.forRoot([ 
      { path: '', component: HeroComponent, pathMatch: 'full' }, 
      { path: '**', redirectTo: 'hero' } 
     ]) 
    ] 
}) 
export class AppModule { 
}

来源

2017-04-24 19:36:17

我添加新的ts文件的名称'文件'，我用家取代，但仍然显示我的错误 – kianoush

我已经更新了答案与应该工作的示例。 –

知道它告诉我这个在Visual Studio中：'在System.Private.CoreLib.ni.dll中发生类型'System.AggregateException'的异常，但没有在用户代码中处理' – kianoush

当我删除家庭组件：处理请求时发生未处理的异常

回答

相关问题