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

在我们的angular2项目中，我们将所有模型的ts文件放在特定文件夹中：/ app/common/model/*。我可以在带有亲属路径的组件中调用它们，但这非常费力。所以2解决方案，最好是自定义路径：StackOverflow: Relative Paths for SystemJS & ES module imports。但我的IDE找不到路径。这里是我的tsconfig：Angular2导入绝对路径或自定义路径（typescript 2）

{ 
    "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和编译都OK，以饱满的路径组件： 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”参数是问题，我们错过了一些东西。

非常感谢您的帮助！

问候，

打字稿：2.0.6 角：2.0.0

来源

2016-10-31 lginlap

您正在使用哪种IDE？在我的（IntelliJ/Webstorm）中，我几乎从不输入import：IDE为我添加它。 –

Visual Studio代码。在你的是绝对路径？ – lginlap

第一个解决方案与其他IDE一起工作很好......对不起，这是一个虚假问题 – lginlap

通过搜索在因特网N试图了解究竟是什么问题，并尝试不同的故障排除选项挣扎后，我才知道的baseUrl和路径如何一起工作的

注意：此方法是角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目录），编译器可以正确地解析模块。

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

来源

2017-07-27 10:28:25 Viraj

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

回答

相关问题