1
resposta

Minha tela nao foi exibida.

Minha tela não apareceu apos criar as rotas. no console do navegador deu este erro.

core.js:6456 ERROR NullInjectorError: R3InjectorError(AppModule)[ChildrenOutletContexts -> ChildrenOutletContexts -> ChildrenOutletContexts]: 
  NullInjectorError: No provider for ChildrenOutletContexts!
    at NullInjector.get (http://localhost:4200/vendor.js:17259:27)
    at R3Injector.get (http://localhost:4200/vendor.js:17425:33)
    at R3Injector.get (http://localhost:4200/vendor.js:17425:33)
    at R3Injector.get (http://localhost:4200/vendor.js:17425:33)
    at NgModuleRef$1.get (http://localhost:4200/vendor.js:31507:33)
    at Object.get (http://localhost:4200/vendor.js:31221:35)
    at lookupTokenUsingModuleInjector (http://localhost:4200/vendor.js:9524:39)
    at getOrCreateInjectable (http://localhost:4200/vendor.js:9636:12)
    at Module.ɵɵdirectiveInject (http://localhost:4200/vendor.js:20886:12)
    at NodeInjectorFactory.RouterOutlet_Factory [as factory] (http://localhost:4200/vendor.js:47075:150)
1 resposta

Olá, Weuder! Tudo bem?

Desculpa a demora. Já conseguiu resolver seu problema?

Se não conseguiu, verifique as importações, principalmente no caso da AppRoutingModule no app.module.ts:

import { AppRoutingModule } from './app-routing.module';

// e na propriedade imports do @NgModule
imports: [BrowserModule, AppRoutingModule],

E também a HomeRoutingModule nohome.module.ts:

import { HomeRoutingModule } from './home-routing.module';

// e na propriedade imports do @NgModule
imports: [CommonModule, HomeRoutingModule],
`

Se tudo isso estiver correto, talvez seja algum problema nas próprias rotas de definição do home-routing.module.ts, que deveriam ser:

const routes: Routes = [
  {
    path: '',
    component: HomeComponent,
    children: [
      {
        path: '',
        component: LoginComponent,
      },
    ],
  },
];

Ou nas rotas de app-routing.module.ts, que devem estar assim:

const routes: Routes = [
  {
    path: '',
    pathMatch: 'full',
    redirectTo: 'home',
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then((m) => m.HomeModule),
  },
];

Além disso, na home-routing.module.ts, o imports deve conter:

imports: [RouterModule.forChild(routes)], // perceba que a propriedade é .forChild()

Enquanto no app-routing.module.ts, o imports deve conter:

imports: [RouterModule.forRoot(routes)], // perceba que a propriedade é .forRoot()

Se o problema persiste, também não hesite em compartilhar seu código aqui para que possamos dar uma olhada. E se encontrou outra solução, por favor, compartilhe aqui para que alunos com o mesmo problema possam encontrar!

Bons estudos!