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

Question

我使用此模板在 visual studio 2015 中使用 angular 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 {
}

主要-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\n@media (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


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

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

Answer 1

在 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 {
}

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

When i Delete Home Component :An unhandled exception occurred while processing the request

angular-template

asp.net-core-mvc

angular2-template

asp.net-core-1.0

angular