Модулировать модуль маршрутов в Angular 2

Я пытаюсь разбить модуль маршрутизации на модули, как показано ниже:

app.modules.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './main/app.component';
import { MaterialModule } from '@angular/material';
import { RouterModule, Routes } from '@angular/router';

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

import { AppRoute } from './app.routes';

@NgModule({
  declarations: [
    AppComponent,
    PageNotFoundComponent
  ],
  imports: [
    MaterialModule,
    BrowserModule,
    FormsModule,
    HttpModule,
    AppRoute
  ],
  providers: [
    UserService
  ],
  bootstrap: [ AppComponent ],
})
export class AppModule { }

app.routes.ts

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

import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
]

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

export class AppRoute { }

Этот метод работает нормально, но я продолжаю думать, что указал импорт компонентов, таких как страница, не найденная в обоих файлах. Есть ли способ модульного импорта компонентов в отдельные файлы, чтобы я мог включать этот файл как в модули, так и в маршруты? Я экспериментировал с ними:

app.routes.ts

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

import { AppComponent } from './main/app.component';
import { PageNotFoundComponent } from './page-not-found/page-not-found.component';

const appRoutes: Routes = [
    { path: '', redirectTo: '/', pathMatch: 'full' },
    { path: '**', component: PageNotFoundComponent }
]

@NgModule({
    declarations: [
        AppComponent,
        PageNotFoundComponent
    ],
    imports: [
        MaterialModule,
        RouterModule.forRoot(appRoutes)
    ],
    exports: [
        RouterModule
    ]
})

export class AppRoute { }

и удалите избыточное объявление из app.modules.ts, но кажется, что angular не может найти ngIf и md-icon.

Моя цель здесь состоит в том, чтобы свести к минимуму количество файлов, которые пользователь должен редактировать в соответствии со своими потребностями при клонировании этого скелета. Я создаю скелет для своих будущих проектов, и я хочу свести к минимуму файлы, которые мне нужно редактировать. Если возможно, я не хочу трогать app.modules.ts, а редактирую только app.routes.ts и app.config.ts. Или еще лучше, отредактируйте только app.config.ts и поместите const appRoutes в app.config.ts. Это вообще возможно? Каков наилучший способ свести к минимуму редактирование, чтобы нам не приходилось много вмешиваться в ненужные файлы.

Спасибо за помощь


angular angular-material2 angular-routing angular-module
person Magician    schedule 26.02.2017    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Причина, по которой вы получаете ошибку о том, что Angular не находит NgIf, заключается в том, что NgIf объявлен в модуле Angular @angular/common, и вы не импортируете этот модуль в свой файл app.routes.ts. (Не знаю, почему у вас возникает проблема с md-icon — вы импортируете MaterialModule в app.routes.ts, поэтому он должен быть доступен....)

Но, возвращаясь к общей концепции, цель создания модуля маршрутизации app.routes состоит в том, чтобы отделить задачи маршрутизации от основного модуля app.module. Таким образом, ответственность распределяется там, где объявления различных компонентов происходят в AppModule, а определения маршрутизации — в AppRoutingModule. Из-за этого разделения (объявлять в одном модуле, применять к маршрутам в другом) вы почти по определению всегда будете иметь два импорта любого заданного маршрутизируемого компонента — один для объявления того, какому модулю он принадлежит, а другой — для определения того, как на него можно направить.

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

Однако в стороне — одним из больших преимуществ Typescript является поддержка инструментов, которые он предоставляет. Я сам использую WebStorm и, честно говоря, никогда не печатаю (и даже не вижу) эти операторы импорта. В WebStorm есть инструменты для автоматического добавления/удаления/настройки импорта по мере того, как вы ссылаетесь на различные классы, так что я вообще этим не занимаюсь. (WebStorm также сворачивает импорт по умолчанию, поэтому они даже не видны, если вы не развернете их явно).

Я подозреваю, что другие редакторы и IDE, поддерживающие Typescript, имеют аналогичные инструменты, поэтому управление этим импортом не является проблемой.

person snorkpete    schedule 26.02.2017
comment
Что ж, моя цель — свести к минимуму редактирование и вмешательство в основную подсистему. Я хочу, чтобы при клонировании этой системы пользователю нужно было изменить только один или два файла. В настоящее время мне нужно изменить 2 файла выше, а также 1 файл app.config.ts. Любое предложение сделать это? - person Magician; 26.02.2017