我使用此模板在visual studio 2015中使用angular 2和asp core。 Template
我已删除Fetch Data and Counter Component，这不是问题而且工作正常，但当我删除时
Home Component它向我显示此错误：
An unhandled exception occurred while processing the request.
异常：调用节点模块失败并显示错误：错误：未捕获（在承诺中）：错误：找不到主插座加载'HomeComponent' 错误：无法找到加载'HomeComponent'的主要插座 at getOutlet（E：\ MyProject \ Angular2Application5 \ Angular2Application5 \ node_modules \ @angular \ router \ bundles \ router.umd.js：3018：23） 在ActivateRoutes.activateRoutes（E：\ MyProject \ Angular2Application5 \ Angular2Application5 \ node_modules \ @angular \ router \ bundles \ router.umd.js：2945：34） 在E：\ MyProject \ Angular2Application5 \ Angular2Application5 \ node_modules \ @angular \ router \ bundles \ router.umd.js：2909：23 at Array.forEach（native） 在ActivateRoutes.activateChildRoutes（E：\ MyProject \ Angular2Application5 \ Angular2Application5 \ node_modules \ @angular \ router \ bundles \ router.umd.js：2908：33） 在ActivateRoutes.activate（E：\ MyProject \ Angular2Application5 \ Angular2Application5 \ node_modules \ @angular \ router \ bundles \ router.umd.js：2903：18） 在E：\ MyProject \ Angular2Application5 \ Angular2Application5 \ node_modules \ @angular \ router \ bundles \ router.umd.js：2644：60 在SafeSubscriber._next（E：\ MyProject \ Angular2Application5 \ Angular2Application5 \ node_modules \ rxjs \ Observable.js：108：21） 在SafeSubscriber .__ tryOrSetError（E：\ MyProject \ Angular2Application5 \ Angular2Application5 \ node_modules \ rxjs \ Subscriber.js：232：16） 在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） 在E：\ MyProject \ Angular2Application5 \ Angular2Application5 \ node_modules \ zone.js \ dist \ zone-node.js：445：13 在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） 在ZoneDelegate.invoke（E：\ MyProject \ Angular2Application5 \ Angular2Application5 \ node_modules \ zone.js \ dist \ zone-node.js：231：32） 在Zone.run（E：\ MyProject \ Angular2Application5 \ Angular2Application5 \ node_modules \ zone.js \ dist \ zone-node.js：114：43） 在E：\ MyProject \ Angular2Application5 \ Angular2Application5 \ node_modules \ zone.js \ dist \ zone-node.js：502：57 在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） 在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\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
/***/ })
/******/ ])));
我该如何解决这个问题？问题是什么？
答案 0 :(得分：0)
在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 {
}