Angular2 импорт абсолютного или пользовательского пути (машинопись 2)

Question

В нашем проекте angular2 мы помещаем все файлы моделей в определенную папку: /app/common/model/*. Я могу назвать их в моих компонентах с родственными путями, но это очень трудоемко. Итак, 2 решения, лучшее - это пользовательский путь: Stackru: Относительные пути для импорта модулей SystemJS & ES. Но моя IDE не может найти путь. Вот мой tsconfig:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "built",
    "baseUrl": ".",
    "paths": {
      "mymodel/*": [
        "app/common/model/*"
      ]
    }
  }
}

В моем компоненте:import { Address } from 'mymodel/address.model';

IDE: [ts] Не удается найти модуль.... Я пытался с или без * в пути

Второе решение: Stackru: Angular 2, импорт между разными папками

IDE и компиляция в порядке, с полным путем в компоненте:import { Address } from 'common/model/address.model';

И цконфиг:

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": false,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true,
    "outDir": "built",
    "baseUrl": ".",
    "paths": {
      "*": [
        "app/*",
        "node_modules/*"
      ]
    }
  }
}

Но у нас 404 на странице загрузки для всех моделей. Может быть, конфиг в файле systemjs?

В обоих случаях я думаю, что проблема в параметре outdir, и мы что-то упустили.

Большое спасибо за помощь!

С Уважением,

TypeScript: 2.0.6 Угловой: 2.0.0

Answer 1

После поисков в интернете, пытаясь понять, в чем именно проблема, и попробовав различные варианты устранения неполадок, я узнал, как baseUrl и Path работают вместе.

Примечание: это решение для Angular Cli 1.x. Не уверен насчет другого инструмента,

Если вы используете baseUrl:"." как показано ниже, он работает в VScode, но не во время компиляции

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": ".",
    "paths": {
      "@myproject/*": ["src/app/*"]
    }    
}

Что касается моего понимания, моего рабочего приложения и проверки углового кода aio, я предлагаю использовать в качестве baseUrl:""src, как показано ниже

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "baseUrl": "src",
    "paths": {
      "@myproject/*": ["app/*"],
      "testing/*": ["testing/*"]
    }    
}

Имея базовый URL в качестве источника (каталог src), компилятор правильно разрешает модули.

Я надеюсь, что это помогает людям решить эту проблему.