i using this template for using angular 2 and asp core in visual studio 2015 . Template
i Deleted Fetch Data and Counter Component,it not Problem and it's Work Fine , But When i Delete
Home Component it show Me This Error :
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\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
/***/ })
/******/ ])));
How can i solve This Problem ? Whats the Problem ?
