Как импортировать файлы ts и scss по не относительному пути в .net core 2.1 Шаблон Angular 6 - PullRequest
0 голосов
/ 07 июня 2018

Я создал новое приложение .net core 2.1, используя angular template, и после этого я обновил проект для использования Angular 6.

, заметьте, проект почти такой же, какпроект, который генерирует angular cli

В моем проекте будет много компонентов и сервисов, поэтому вместо использования относительных путей мне нравится использовать не относительные пути

TypeScript

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, bно когда я добавляю не относительный путь туда, импорт просто не работает, не знаю, почему это тоже происходит


Scss

Я установил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 Ответ

0 голосов
/ 16 октября 2018

попробуйте это:

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

вместо этого:

import { WeatherService } from '@app-services/weather.service'
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...