如何从.net core 2.1 Angular 6模板中的非相对路径导入ts和scss文件

Question

我使用angular template创建了一个新的.net core 2.1应用程序，之后我将项目更新为使用Angular 6。

注意 该项目与 Angular CLI 生成的项目几乎相同

我的项目将有很多组件和服务，所以我希望能够使用非相对路径，而不是使用相对路径

打字稿

import { WeatherService } from '../../services/weather.service'

我希望能够使用非相对路径，例如：

import { WeatherService } from '@app-services/weather.service'

所以我添加了

"baseUrl": ".",
"paths": {
"@app-services/*": [ "src/app/services/*" ]
},

进入tsconfig.json

整个配置：

{
"compileOnSave": false,
"compilerOptions": {
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"baseUrl": ".",
"paths": {
"@app-services/*": [ "src/app/services/*" ]
},
"lib": [
"es2017",
"dom"
]
}
}

它按预期工作，我可以在每个组件中导入服务，例如：

import { WeatherService } from '@app-services/weather.service';

但是当我运行ng build时出现此错误：

应用程序/组件/

主页/家庭.组件.ts(3,32( 中的错误： 错误 TS2307： 找不到模块"@app-services/weather.service"。

如何解决这个问题？

注意：在ClientApp/src/内部，tsconfig文件还有另一个扩展名，即tsconfig.app.json，但是当我在那里添加非相对路径时，导入根本不起作用，不知道为什么也会发生这种情况

---

阎刀镰刀

我已经安装了node-sass，并且我已将所有.css文件更改为.scss，除此之外，我还添加了

"stylePreprocessorOptions": {
"includePaths": [ 
"./src/common/"
]

内部angular.json

在common文件夹中，我保留了所有全局 scss 文件：

common
|
- _images.scss
- _colors.scss

此外，将其添加到同一文件中：

"schematics": {
"@schematics/angular:component": {
"prefix": "app",
"styleext": "scss" // <<---
}
}

它适用于相对路径：

@import '../../../common/_images.scss';

不幸的是，我收到此错误：

未声明的变量

当我像这样导入时：

@import '_images'; 

但是..但是，构建后工作正常

Answer 1

试试这个：

import { WeatherService } from '~app-services/weather.service'

取而代之的是：

import { WeatherService } from '@app-services/weather.service'