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

Posted 2023-03-07

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

【英文标题】：How to import ts and scss files from non-relative path in .net core 2.1 Angular 6 template

【发布时间】：2018-11-17 18:57:49

【问题描述】：

我使用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 时出现此错误：

app/components/home/home.component.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'; 

但是..但是，构建后它可以正常工作

【参考方案1】：

试试这个：

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

而不是这个：

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