Question

在我们的angular2项目中，我们将所有模型的ts文件放在特定的文件夹中：/ app / common / model / *。我可以用亲戚路径在我的组件中调用它们，但它非常费力。所以2个解决方案，最好的是自定义路径：StackOverflow: Relative Paths for SystemJS & ES module imports。但我的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, imports between different folders

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文件中的配置？

在这两种情况下，我认为＆＃34; outdir＆＃34;参数是问题，我们遗漏了一些东西。

非常感谢您的帮助！

此致

TypeScript：2.0.6 Angular：2.0.0

Answer 1

通过搜索互联网努力了解究竟是什么问题并尝试不同的故障排除选项后，我开始认识 baseUrl 和路径如何协同工作

注意：此解决方案适用于Angular Cli 1.x 。不确定其他工具，

如果您使用 baseUrl：＆＃34;。＆＃34; ，如下所示，它适用于VScode但不适用于编译

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

就我的理解和我的工作应用程序以及 angular aio 代码进行检查，我建议使用 baseUrl：＆＃34;＆＃34; src ，如下所示< / p>

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

通过将基本URL作为源（src目录），编译器可以正确解析模块。

我希望这有助于人们解决这类问题。

Angular2导入绝对路径或自定义路径（typescript 2）

1 个答案: