Я создал новое приложение .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';
Но .. но, он работает нормально после сборки