Bom dia, Estou com o seguinte erro em minha aplicação ANGULAR-2
EXCEPTION: Uncaught (in promise): 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
E não sei o que posso estar deixando de fazer ou colocar na aplicação para que funcione corretamente!
Segue estrutura de meus arquivos
app.module.ts
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.module.ts
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.module.ts
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);
}
}
Bom acredito que seja isso, o componente do módulo Welcome é apenas o original gerado pelo angular-cli!
Para fins informativos este é meu package.json com as dependencias do projeto e suas versões
"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"
}
Grato desde já por toda a ajuda!