J'ai utilisé ce modèle pour utiliser angular 2 et asp core dans Visual Studio 2015. TemplateLors de la suppression du composant principal: Une exception non gérée s'est produite lors du traitement de la demande.
J'ai supprimé Fetch Data and Counter Component, il ne problème et il est un travail bien, mais lorsque je supprime
Home Component il me montrer cette erreur:
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
/***/ })
/******/ ])));
Comment puis-je résoudre ce problème? Quel est le problème ?
Votre homecomponent contient-il la directive routerOutlet? Si c'est le cas, et que vous ne voulez plus le HomeComponent, vous devrez ajouter un routeurOutlet primaire ailleurs. – DeborahK
@DeborahK S'il vous plaît Guide-moi pour résoudre ce problème. – kianoush
@DeborahK app.component Avoir 'routerOutlet'. – kianoush