0
Good morning, I have the following error in my ANGULAR-2 application
EXCEPTION: Uncaught (in Omise): Error: Cannot find Primary outlet to load 'Welcomecomponent' getOutlet@http://localhost:4200/vendor.bundle.js:24337:19 [angular] ActivateRoutes.prototype.activateRoutes@http://localhost:4200/vendor.bundle.js:24170:47 [angular] ActivateRoutes.prototype.activateChildRoutes/<@http://localhost:4200/vendor.bundle.js:24115:52 [angular] ActivateRoutes.prototype.activateChildRoutes@http://localhost:4200/vendor.bundle.js:24115:9 [angular] Activateroutes.prototype.Activate@http://localhost:4200/vendor.bundle.js:24089:9 [angular] Router.prototype.runNavigate/http://localhost:4200/vendor.bundle.js:23648:17 [angular] Observable.prototype.foreach/http://localhost:4200/vendor.bundle.js:5597:21 [angular] SafeSubscriber.prototype. __tryOrSetError@http://localhost:4200/vendor.bundle.js:6448:13 [angular] Safesubscriber.prototype.next@http://localhost:4200/vendor.bundle.js:6390:22 [angular] Subscriber.prototype..next@http://localhost:4200/vendor.Bundle.[...] vendor.bundle.js:58317:9 Errorhandler.prototype.handleError http://localhost:4200/vendor.bundle.js:58317:9 Platformref.prototype. _bootstrapModuleFactoryWithZone/http://localhost:4200/vendor.bundle.js:40404:65 Eventemitter.prototype.subscribe/schedulerFn< http://localhost:4200/vendor.bundle.js:42460:36 SafeSubscriber.prototype. __tryOrUnsub http://localhost:4200/vendor.bundle.js:6439:13 Safesubscriber.prototype.next http://localhost:4200/vendor.bundle.js:6388:17 Subscriber.prototype. _next http://localhost:4200/vendor.bundle.js:6330:9 Subscriber.prototype.next http://localhost:4200/vendor.bundle.js:6294:13 Subject.prototype.next http://localhost:4200/vendor.bundle.js:12778:17 Eventemitter.prototype.Emit http://localhost:4200/vendor.bundle.js:42446:54 Ngzone.prototype.triggerError http://localhost:4200/vendor.bundle.js:30750:56 Ngzone.prototype.forkInnerZoneWithAngularBehavior/this.Inner<. onHandleError http://localhost:4200/vendor.bundle.js:30711:17 [623]/http://localhost:4200/polyfills.bundle.js:2616:17 [623]/http://localhost:4200/polyfills.bundle.js:2420:25 drainMicroTaskQueue/_loop_1 http://localhost:4200/polyfills.bundle.js:2835:25 drainMicroTaskQueue http://localhost:4200/polyfills.bundle.js:2844:21
And I don’t know what I might be failing to do or putting in the app to make it work properly!
Follows structure of my files
app.modulets.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './app.component';
/**
* Import Application Modules
*/
import { HeaderModule } from './modules/header/header.module';
import { AppRoutesModule } from './modules/routes/routes.module';
@NgModule({
declarations: [
AppComponent,
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
// Aplication Modules
HeaderModule,
AppRoutesModule
],
schemas: [ CUSTOM_ELEMENTS_SCHEMA ],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
./modules/Routes/Routes.modulets.
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { WelcomeModule } from '../welcome/welcome.module';
const appRoutes: Routes = [
{ path: 'welcome' , loadChildren: '../welcome/welcome.module#WelcomeModule' }
];
@NgModule({
imports: [
RouterModule.forRoot(appRoutes),
WelcomeModule
],
declarations: [],
})
export class AppRoutesModule {}
app.component.html
<app-header></app-header>
<router-outlet></router-outlet>
./modules/Welcome/Welcome.modulets.
import { NgModule } from '@angular/core';
import { WelcomeRouterModule } from './welcome.router';
import { WelcomeComponent } from './components';
@NgModule({
imports: [
WelcomeRouterModule
],
exports: [
WelcomeRouterModule
],
declarations: [
WelcomeComponent
]
})
export class WelcomeModule { }
./modules/Welcome/Welcome.router.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes, Router, ActivatedRoute } from '@angular/router';
import { WelcomeComponent } from './components';
const WELCOME_ROUTING: Routes = [
{ path: '', component: WelcomeComponent }
];
@NgModule({
imports: [
RouterModule.forChild(WELCOME_ROUTING)
],
exports: [
RouterModule
]
})
export class WelcomeRouterModule {
constructor() {
console.log('Loading WELCOME_ROUTING: ', WELCOME_ROUTING);
}
}
Well I believe that is it, the component of the Welcome module is only the original generated by the angular-cli!
For informational purposes this is my package.json with the project dependencies and their versions
"dependencies": {
"@angular/common": "^2.4.0",
"@angular/compiler": "^2.4.0",
"@angular/core": "^2.4.0",
"@angular/forms": "^2.4.0",
"@angular/http": "^2.4.0",
"@angular/platform-browser": "^2.4.0",
"@angular/platform-browser-dynamic": "^2.4.0",
"@angular/router": "^3.4.0",
"core-js": "^2.4.1",
"rxjs": "^5.1.0",
"zone.js": "^0.7.6"
},
"devDependencies": {
"@angular/cli": "1.0.0-rc.1",
"@angular/compiler-cli": "^2.4.0",
"@types/jasmine": "2.5.38",
"@types/node": "~6.0.60",
"codelyzer": "~2.0.0",
"jasmine-core": "~2.5.2",
"jasmine-spec-reporter": "~3.2.0",
"karma": "~1.4.1",
"karma-chrome-launcher": "~2.0.0",
"karma-cli": "~1.0.1",
"karma-coverage-istanbul-reporter": "^0.2.0",
"karma-jasmine": "~1.1.0",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.1.0",
"ts-node": "~2.0.0",
"tslint": "~4.4.2",
"typescript": "~2.0.0"
}
Thanks in advance for all the help!
The problem was solved by upgrading the design versions to angular-cli 1.0.
– Rogério Yokoi