Angular2導入絕對路徑或自定義路徑（typescript 2）

Question

在我們的angular2項目中，我們將所有模型的ts文件放在特定的文件夾中：/ app / common / model / *。 我可以用親戚路徑在我的組件中調用它們，但它非常費力。 所以2個解決方案，最好的是自定義路徑： StackOverflow：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]無法找到模塊....我在路徑中嘗試使用或不使用*

第二種解決方案： Stackoverflow：Angular 2，在不同文件夾之間導入

IDE和編譯都可以，組件中有完整路徑： import { Address } from 'common/model/address.model';

和tsconfig：

{
  "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 Angular：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目錄），編譯器可以正確地解析模塊。

我希望這有助於人們解決這類問題。