CODEWITHSUNDEEP
angular
alex
alex

Reputation: 414

Cannot resolve symbol 'router-outlet'

The project is based on Angular 13.

Added routing to the project. app-routing.module.ts

import { NgModule } from '@angular/core';
import {RouterModule, Routes} from "@angular/router";
import {HomePageComponent} from "./home-page/home-page.component";

const appRoutes: Routes =[
  { path: '', component: HomePageComponent}
];

@NgModule({
  imports: [RouterModule.forRoot(appRoutes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

added AppRoutingModule to the file app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import {ModalModule} from "ngb-modal";
import {FormsModule} from "@angular/forms";
import { HomePageComponent } from './home-page/home-page.component';
import {AppRoutingModule} from "./app-routing.module";

@NgModule({
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule
  ],
  declarations: [
    AppComponent,
    HomePageComponent
  ],

  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

but if I try to add to the file app.component.html

<router-outlet></router-outlet>

IDEA throws an error

Cannot resolve symbol 'router-outlet'

But if I open another project with routing in the same IDE, there is no such error.

Upvotes: 6

Views: 4373

Answers (2)

EtienneU
EtienneU

Reputation: 11

Hello =) I had the same problem today. I solved it like that:

  • I closed my IDE (IntelliJ)
  • I opened JetBrains ToolBox to update the IDE
  • The "node_modules" repository of my project is excluded from index, expect "node_modules/@angular" repo (right click on it, 'Mark Directory as' --> 'Not Excluded')
  • Rebuild or reopen the project

Now it works, on my side : with IntelliJ, all router elements and all native pipes are properly detected. Hope it could help ^^

Upvotes: 1

Dannom
Dannom

Reputation: 307

I guess you are using WebStorm as an IDE, since i also ran into that warning when i upgraded my project to Angular 13, yet i didn't it on VSC.

Apparently in order to solve it you need to upgrade WebStorm to 2021.3. I recommend using JetBrains's toolbox app, which makes it easy to update.

Upvotes: 8

Related Questions