0

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!

1
  • O problema foi resolvido atualizando as versões do projeto para o angular-cli 1.0. Commented 5/04/2017 às 19:29

1 Resposta 1

0

O problema foi resolvido atualizando as versões do projeto para o angular-cli 1.0. as novas dependências no package.json ficaram:

     "dependencies": {
        "@angular/common": "^4.0.0",
        "@angular/compiler": "^4.0.0",
        "@angular/core": "^4.0.0",
        "@angular/forms": "^4.0.0",
        "@angular/http": "^4.0.0",
        "@angular/platform-browser": "^4.0.0",
        "@angular/platform-browser-dynamic": "^4.0.0",
        "@angular/router": "^4.0.0",
        "core-js": "^2.4.1",
        "rxjs": "^5.1.0",
        "zone.js": "^0.8.4"
    },
    "devDependencies": {
        "@angular/cli": "1.0.0",
        "@angular/compiler-cli": "^4.0.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-jasmine": "~1.1.0",
        "karma-jasmine-html-reporter": "^0.2.2",
        "karma-coverage-istanbul-reporter": "^0.2.0",
        "protractor": "~5.1.0",
        "ts-node": "~2.0.0",
        "tslint": "~4.5.0",
        "typescript": "~2.2.0"
    }

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .