Как добавить модуль маршрутизации в существующий модуль в angular CLI версии 1.1.1?

Я создал модуль с использованием angular CLI и забыл добавить -routing при его создании, теперь я хочу добавить к нему модуль маршрутизации.

ng init --routing не поможет в angular версии 1.1.1 CLI

Ответ 1

Это не проблема вообще.

Просто добавьте маршрутизацию вручную.

Все, что --routing флаг --routing, помимо добавления <router-outlet></router-outlet> в app.component.html, это добавление RouterModule.forRoot() q RouterModule.forRoot() в отдельный модуль под названием AppRoutingModule и включение этого модуль в imports AppModule.

Так, в app.module.ts, он добавляет AppRoutingModule к imports вашего AppModule.

AppRoutingModule определяется как app-routing.module.ts, который создается из этого шаблона.

Это очень мало, что я скопирую это здесь:

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

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

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

{path: '', children:[]} - это просто заполнитель, который вы должны заменить (я знаю, потому что я добавил его в исходный код). Он просто гарантирует, что маршрутизатор не будет жаловаться на <router-outlet> когда у вас нет маршрутов.

Итак, вернемся к вопросу, что делать? Либо скопируйте файл в свой проект, чтобы он выглядел точно так же, как исходный CLI, и добавьте AppRoutingModule в ваш imports AppModule...

Или просто добавьте RouterModule.forRoot([/* routes here */]) вместо imports вашего AppModule. Это все еще будет работать, со встроенной поддержкой отложенной загрузки, а все остальное работает просто отлично.

PS

Помните, что для добавления дочерних маршрутов вы всегда можете сгенерировать больше модулей с маршрутизацией и ng generate module Foo --routing независимо от того, использовали ли вы флаг --routing с ng new или нет. Никакой конфигурации или какой-либо магии, о которой стоит беспокоиться.

Ответ 2

  1. ng generate module app-routing-module --module app --flat
    • Замените app на имя вашего существующего модуля
    • Замените app-routing-module на имя, чтобы дать модулю маршрутизации
  2. В новом модуле добавьте appRoutes и RouterModule.forRoot или RouterModule.forChild.

    // import { ... } from '...';
    
    const appRoutes: Routes = [
        { path: 'some-path', component: SomeComponent }
    ];
    
    @NgModule({
        imports: [
            RouterModule.forRoot(appRoutes)
        ],
        exports: [
            RouterModule
        ]
    })
    export class AppRoutingModule {}
    
  3. При необходимости добавьте <router-outlet></router-outlet> к вашему компоненту (например, app.component.html)

Источник