Angular 2 Cli добавляет маршруты к существующему проекту

Ответ 1

Я нашел самый простой способ до сих пор. Я знаю, что это уже ответили и приняты, но он не работает в текущих сценариях, потому что ng init удаляется, поэтому, если вы забыли добавить маршрутизацию при создании нового проекта, вы можете добавить маршруты к существующему проекту в качестве следующих шагов. Надеюсь, это будет полезно.

Прежде всего добавьте файл app-routing.module.ts в папку src → app

Файл app-routing.module.ts будет таким:

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomeComponent } from './home/home.component';     // Add your component here
import { AboutComponent } from './about/about.component';  // Add your component here

//This is my case 
const routes: Routes = [
    {
        path: '',
        component: HomeComponent
    },
    {
        path: 'about',
        component: AboutComponent
    }
];

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

Затем импортировать app-routing.module.ts файл в app.module.ts файл как последуйте.

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

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

Теперь вы сможете выполнить задачу маршрутизации.

Ответ 2

ОБНОВЛЕНИЕ Оригинальный вопрос о Angular 2 CLI. Это не работает для текущей версии Angular!

1. Запустите ng init --routing

2. И не отвечайте ни на один вопрос из CLI. Таким образом, вы получите app-routing.module.ts.

3. Добавить import { AppRoutingModule } from './app-routing.module';

и imports: [AppRoutingModule] в ваш app.module.ts

4. Прибыль! Вы получаете ту же маршрутизацию, что и при создании маршрутизации с помощью Angular CLI с самого начала.

Ответ 3

ОБНОВЛЕНИЕ Оригинальный вопрос о Angular 2 CLI. Это не работает для текущей версии Angular!

Это зависит, но если вы хотите добавить маршрутизацию к существующему модулю, то добавьте следующий к вашему модулю.

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

const routes: Routes = [];
//in array you should have your routes like 
// { path: "path",  component: ComponentName },

Затем в NgModule, где у вас есть определение imports

RouterModule.forRoot(routes, { useHash: true })

Или для ребенка

RouterModule.forChild(routes)

Пример для чистого проекта

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



const routes: Routes = [{ path: "path",  component: ComponentName }];
@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule],
  providers: []
})

Ответ 4

это не объясняет, есть ли у вас в настоящее время какой-либо маршрутизатор, объявленный в вашем приложении, любым способом, которым вы можете добавить маршрутизацию в любой момент.

Это невозможно с помощью команды - ng int --routing, потому что она была устранена. и опция маршрутизации доступна только при запуске новой команды, создающей новое решение.

Но вы можете создать его вручную. если у вас есть какой-либо маршрутизатор в вашем приложении.module или none, вы можете выполнить описанный здесь шаг, чтобы сгенерировать его: Реализация маршрутизации в отдельном модуле в угловом

Ответ 5

В Angular 5/6 вы можете использовать эти команды для добавления маршрутизации в существующий проект.

1. ng generate module app-routing --flat --module=app

--flat помещает файл в src/app вместо своей собственной папки. --module = приложение говорит CLI зарегистрировать его в массиве импорта AppModule.

Это сгенерирует файл src/app/app-routing.module.ts для вас.

2. Теперь внутри src/app/app-routing.module.ts вы должны импортировать код маршрутизатора:

   import {RouterModule, Routes} из '@angular/router';

3. Кроме того, отредактируйте src/app/app-routing.module.ts чтобы он выглядел следующим образом:

    import { RouterModule, Routes, Router } from '@angular/router';
    import {class name} from 'address your component Component';
    const routes: Routes = [
      { path: '/home' , component : yourComponenetName}
    ];
    @NgModule({
      imports: [
        RouterModule.forRoot(routes)
      ],
      exports: [ RouterModule ]
    })
    export class AppRoutingModule { } 

4. Затем добавьте тег router-outlet в файл app.html чтобы сообщить маршрутизатору, где отображать маршрутизированные представления.

    <router-outlet></router-outlet>

5. Кроме того, вы должны проверить файл index.html с этим тегом вверху.

    <base href="/"> 

Он будет добавлен напрямую, если вы используете команду CLI, о которой я упоминал выше.

Ответ 6

обновление принятого ответа

следуйте приведенным ниже пунктам:

1> убедитесь, что <base href="/"> добавлен в index.html

    <html>
    <head>
    <base href="/" />
    <title>Angular Demo</title>

2> Добавьте розетку маршрутизатора в файл ur app.component.html <router-outlet></router-outlet>

    div style="text-align:center">
    <h1>
    Welcome to MyApp
    </h1>
    <img width="300" alt="Angular Logo" src="data:image/svg+xml;....">
    </div>
    <router-outlet></router-outlet>

• розетка маршрутизатора сообщает маршрутизатору, где отображать маршрутизированное представление.

3> Не забудьте добавить AppRoutingModule в раздел "import" вашего декоратора @NgModule и в app.module.ts.

        @NgModule({
      imports: [
       AppRoutingModule
      ],
      declarations: [
        AppComponent,
      ],
      bootstrap: [ AppComponent ]
    })
    export class AppModule { }