Angular 4+: элемент RouterLink в ‹a› элемент не работает должным образом

Вам нужно больше, чтобы маршрутизация заработала. Вот как должен выглядеть ваш AppRoutingModule файл

import { RouterModule, Routes } from '@angular/router';
import { NgModule } from '@angular/core';
import { HomeComponent, LessonOffersComponent } from somewhere;

const APP_ROUTES : Routes = [
    { 
        path: '', 
        redirectTo: 'home', 
        pathMatch: 'full',
    },
    {
        path: 'home', 
        component: HomeComponent
    },
    {
        path: 'lesson-offers', 
        component: LessonOffersComponent
    },

    { path: '**', redirectTo: 'home' }
]

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

Для всех, у кого есть эта проблема, попробуйте следующее:

<a [routerLink]="['/home']" ... ><img ... /></a>

вместо этого:

<a [routerLink]="home" ... ><img ... /></a>

Хорошо, я действительно нашел ошибку, и она была в том месте, о котором я никогда не предположу. Были также другие варианты поведения, такие как неработающие привязки событий (щелчок). Итак, я просматриваю конфигурации своего веб-проекта, основанного на этом примере универсального спа-центра angular 4 из github: https://github.com/MarkPieszak/aspnetcore-angular2-universal

1. Я выполнил обновление с ASP NET Core SPA, созданного с помощью инструмента yeoman.

npm install -g yo generator-aspnetcore-spa

Затем перейдите в пустой каталог, в который вы хотите поместить свой проект, а затем запустите Yeoman следующим образом:

yo aspnetcore-spa

2. Затем я заметил, что невозможно легко использовать Leaflet Open Street Maps при использовании предварительного рендеринга на стороне сервера.

3. Итак, сделайте это обновление с Angular 2+ -> Angular 4+, купите изменение каждого файла конфигурации, модуля, загрузки, веб-пакета, tsconfig и т. Д. Файла. Я действительно был под большим впечатлением от этого начального проекта на github:
   https://github.com/MarkPieszak/aspnetcore-angular2-universal

4. В конце дня я заметил, что у меня остался старый код, который, как я полагаю, будет работать правильно:

// boot.client.ts 
platform.destroy();
    });
} else {
    enableProdMode();
}

// Boot the application, either now or when the DOM content is loaded
const platform = platformUniversalDynamic();
const bootApplication = () => { platform.bootstrapModule(AppModule); };
if (document.readyState === 'complete') {
    bootApplication();
} else {
    document.addEventListener('DOMContentLoaded', bootApplication);
}

И в новой версии углового универсального проекта, который выглядит примерно так, должен быть правильный:

 modulePromise.then(appModule => appModule.destroy());
    });
} else {
    enableProdMode();
}

const modulePromise = 
 platformBrowserDynamic().bootstrapModule(BrowserAppModule);

PS. Раньше тоже делал замену platformUniversalDynamic => platformBrowserDynamic.

По прошествии многих лет с момента последнего ответа мне было нелегко найти правильный ответ. Также я заметил несколько ошибочных ответов. Поэтому я хочу добавить четкое описание использования ссылки на маршрутизатор в HTML-файл компонента для Angular 8 ++. После добавления путей маршрутизатора в routingmodule, чтобы использовать эти маршруты в компоненте angular:

1. Импортируйте RouterModule, для которого были объявлены компоненты модуля
2. Установите маршрут к routerLink в HTML. Из-за чувствительности к регистру routerLink будьте осторожны, чтобы не использовать routerlink.

не нужно добавлять класс nav-link или импортировать маршрутизатор к вашему компоненту.

Чтобы решить эту проблему, необходимо импортировать модуль RouterModule в импортированный модуль header.Component.ts. Это означает этот компонент родительского модуля. Затем запустите команду CLI ng serve

Например:

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';

import { HeadComponent } from './head/head.component';


@NgModule({
  declarations: [HeadComponent],
  imports: [
    CommonModule,
    RouterModule,

  ],
  exports: [
    CommonModule,
    HeadComponent
  ]
})
export class LayoutModule { }

Это решение работало для моего приложения Angular 10