Угловой 2 комплект как импорт/Импорт нескольких модулей

Question

Я не знал, как сформулировать вопрос ... Итак, в основном я пишу свое приложение, используя Angular 2 with Bookscript. Я хотел бы сделать возможным импортировать мои модули так, как мы делаем с Angular, где мы можем импортировать несколько связанных модулей в одну строку. Например, мы могли бы сделать это в angular2 бета:

import { Component, OnInit, Input } from 'angular2/core'; 

Я хотел бы сделать что-то подобное с моим приложением. Например:

import { UserService, RoleService } from 'my-project/services';

Кроме того, я хочу, чтобы иметь возможность делать то же самое для моделей, труб, деталей и т.д. ...

Еще одна вещь, структура папок будет что-то вроде этого :

SRC/приложения/услуги
SRC/приложения/компоненты
SRC/приложение/модели
SRC/приложение/трубы

То, что я пытался сделать: На пути Src/приложения, я создал на файл для каждого 'пучка', как services.d.ts, models.d.ts, pipes.d.ts ... А потом я попытался отобразить на SystemJS конфигурации, например, так:

(function(global) { 

    // map tells the System loader where to look for things 
    var map = { 
    'app':      'src/app', // 'dist', 
    'rxjs':      'node_modules/rxjs', 
     'my-project/components':     'src/app/components', 
     'my-project/services':    'src/app/services', 
     'my-project/models':      'src/app/models', 
     'my-project/pipes':       'src/app/pipes', 
    '@angular':     'node_modules/@angular' 
    }; 

    // packages tells the System loader how to load when no filename and/or no extension 
    var packages = { 
    'app':      { format: 'register', main: 'main.js', defaultExtension: 'js' }, 
    'rxjs':      { defaultExtension: 'js' }, 
    }; 

    var packageNames = [ 
    'my-project/components', 
    'my-project/services', 
    'my-project/models', 
    'my-project/pipes', 
    '@angular/common', 
    '@angular/compiler', 
    '@angular/core', 
    '@angular/http', 
    '@angular/platform-browser', 
    '@angular/platform-browser-dynamic', 
    '@angular/router-deprecated', 
    '@angular/testing', 
    '@angular/upgrade', 
    ]; 

    // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' } 
    packageNames.forEach(function(pkgName) { 
    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' }; 
    }); 

    var config = { 
    map: map, 
    packages: packages 
    }; 

    System.config(config); 

})(this); 

проблема заключается в Visual Studio код не признает импорт в моем .ts файлах. В нем говорится, что он не может найти модуль.

Answer 1

Вы хотите создать бочку внутри папки services (например), которая будет экспортировать все вложенные экспорт вручную, таким образом вы можете импортировать 2 (или более) модуля из ствола, где перед тем, как вам придется используйте 2 разных импорта.

Последнее, что я слышал, это по какой-то причине ломает дерево, но я могу ошибаться.

В любом случае, прочитайте еще here.

Answer 2

Edit: ближе к тому, что вы хотите

Вы могли бы генерировать декларации файлы вашего приложения и добавить их в папку @types (или создать свой собственный и добавить, что в typeRoots массиве TSconfig в).

Новый TSconfig

Вы можете использовать консоль, но я бы рекомендовал создать новый tsconfig_decl.json файл. К сожалению, я не нашел способ просто создавать объявления, поэтому вам нужно очистить папку dist.

Пример tsconfig_decl.json

важные свойства declaration, declarationDir и я думаю outDir знать, какие папки для удаления.

{ 
    "compilerOptions": { 
    "baseUrl": "", 
    "declaration": true, 
    "declarationDir": "../node_modules/@types/myproject", 
    "emitDecoratorMetadata": true, 
    "experimentalDecorators": true, 
    "lib": ["es6", "dom"], 
    "mapRoot": "./", 
    "module": "es6", 
    "moduleResolution": "node", 
    "outDir": "../dist/dec-del", 
    "sourceMap": true, 
    "target": "es5", 

    "typeRoots": [ 
     "../node_modules/@types" 
    ] 
    } 
} 

Генерировать декларации

tsc -p "src/tsconfig_decl.json" 

Предоставленные структуры папок/Бочки правильно, вы должны быть в состоянии использовать

import { AuthService, UserService } from 'myproject/services'; 

--------- ------ Старый ответ ---------------

Если у вас есть эта структура

SRC/приложения/услуги
SRC/приложения/компоненты
SRC/приложение/модели
SRC/приложение/трубы

вы можете создать index.ts файлы (баррелей) внутри этих папок, которые экспортируют все доступные сервисы/компоненты/.... Затем вы можете получить к ним доступ, используя app/services. Это не совсем то, что вы хотите, но вы можете переименовать папку приложения, чтобы получить название проекта там, или я думаю, что изменение процесса сборки может помочь в этом.

SRC/приложения/услуги/index.ts

export * from './auth.service'; 
export * from './user.service'; 
... 

Использование услуг

import { AuthService, UserService } from 'app/services'; 
... 

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

Answer 3

Для этого вам нужно 2 вещи. Во-первых, как указывал другой ответ, вам нужно создать «бочки» (index.ts) внутри src/app/services, src/app/models и другие подобные папки. Таким образом, вы папка структура выглядит следующим образом:

Где index.ts файлы содержат экспорт вещи, которые вы хотите импортировать в приложение:

export * from './service1'; 
export * from './service2'; 

До сих пор, это даст вам возможность сделать это:

import { Service1, Service2 } from '../../services'; 

Однако, это не является идеальным из-за относительных путей, как ../../. Чтобы исправить это, вам нужно сделать еще один шаг: укажите baseUrl и paths Параметры TypeScript в tsconfig.json (см. https://www.typescriptlang.org/docs/handbook/module-resolution.html).

Если вы только хотите, чтобы избавиться от относительных путей, вам просто нужно указать baseUrl вариант, как это:

TSconfig.JSON:

{ 
    "compilerOptions": { 
    ... 
    "baseUrl": "./src" 
    } 
} 

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

import { Service1, Service2 } from 'app/services'; 

Но если вы также должны иметь импорт как my-project/services (my-project вместо app), Вам также необходимо указать paths конфигурации, как в следующем:

{ 
    "compilerOptions": { 
    ... 
    "baseUrl": "./src", 
    "paths": { 
     "my-project/*": [ 
     "app/*" 
     ]  
    } 
    } 
} 

с помощью этой конфигурации Fo llowing должен работать:

import { Service1, Service2 } from 'my-project/services';