[英]Angular2 import absolute path or custom path (typescript 2)
In our angular2 project, we put all our models ts files in a specific folder : /app/common/model/*. 在我们的angular2项目中,我们将所有模型的ts文件放在特定的文件夹中:/ app / common / model / *。 I can call them in my components with relatives paths, but it's very laborious. 我可以用亲戚路径在我的组件中调用它们,但它非常费力。 So 2 solutions, best is a custom path: StackOverflow: Relative Paths for SystemJS & ES module imports . 所以2个解决方案,最好的是自定义路径: StackOverflow:SystemJS和ES模块导入的相对路径 。 But my IDE can not find the path. 但我的IDE无法找到路径。 Here is my tsconfig : 这是我的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/*"
]
}
}
}
In my component: import { Address } from 'mymodel/address.model';
在我的组件中: import { Address } from 'mymodel/address.model';
IDE: [ts] Cannot find module.... I tried with or without * in path IDE:[ts]无法找到模块....我在路径中尝试使用或不使用*
Second solution : Stackoverflow: Angular 2, imports between different folders 第二种解决方案: Stackoverflow:Angular 2,在不同文件夹之间导入
IDE and compilation are ok, with full path in component : import { Address } from 'common/model/address.model';
IDE和编译都可以,组件中有完整路径: import { Address } from 'common/model/address.model';
And the tsconfig: 和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/*"
]
}
}
}
But we have 404 on page load for all models. 但是我们对所有型号的页面加载都有404。 Maybe a config in systemjs file ? 也许是systemjs文件中的配置?
In both cases, I think that "outdir" parameter is the problem, and we are missing something. 在这两种情况下,我认为“outdir”参数是问题,我们错过了一些东西。
Many thanks for help! 非常感谢您的帮助!
Regards, 问候,
TypeScript: 2.0.6 Angular: 2.0.0 TypeScript:2.0.6 Angular:2.0.0
After struggling by searching over internet n trying to understand what exactly problem and trying different troubleshooting option, I came to know baseUrl and Path how works together 在通过互联网搜索努力了解究竟是什么问题并尝试不同的故障排除选项后,我开始了解baseUrl和Path如何一起工作
Note: This solution is for Angular Cli 1.x . 注意:此解决方案适用于Angular Cli 1.x. Not sure about other tool, 不确定其他工具,
If you use baseUrl:"." 如果你使用baseUrl:“。” like below it works in VScode but not while compiling 如下所示,它适用于VScode,但不适用于编译
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": ".",
"paths": {
"@myproject/*": ["src/app/*"]
}
}
As far my understanding and my working app and checked in angular aio code, I suggest use as baseUrl:""src like below 至于我的理解和我的工作应用程序并检查角度aio代码,我建议使用baseUrl:“”src如下
{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"baseUrl": "src",
"paths": {
"@myproject/*": ["app/*"],
"testing/*": ["testing/*"]
}
}
By having base URL as source(src directory), compiler properly resolves modules. 通过将基本URL作为源(src目录),编译器可以正确地解析模块。
I hope this helps to people resolve this kind of issue. 我希望这有助于人们解决这类问题。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.