Angular материал: включает готовую тему

Question

Я хотел включить готовую тему для angular приложения. Я включил нижнюю строку в app.component. css.

@import "../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css";

Я был удивлен, что тема не применима к моему приложению. Затем из документов, которые я предположил, я должен включить, теперь это работает, но мне любопытно, почему?

@import "@angular/material/prebuilt-themes/indigo-pink.css";

Внутри общей таблицы стилей, стиль. css не app.component. css! и путь (../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css) имеет больше смысла, чем "~ @ angular / material / prebuilt-themes / indi go -pink. css "

У меня есть следующие вопросы,

1.Что нужно импортировать только в стиле. css почему не внутри appcomponent. css?

2. Хотя путь ~@angular/material/prebuilt-themes/indigo-pink.cs ни к чему не приводит, как angular -материал мог выбрать тему?

3.Что означает '~' в указанном выше пути?

Чтобы дать больше информации, я включил структуру проекта

Answer 1

Весь импорт здесь относительно. Может быть сложно вспомнить, сколько папок нужно перепрыгивать.

Если вы перемещаете файлы, вам придется обновить все пути импорта.

Давайте посмотрим, как мы можем ссылаться на импорт абсолютно, чтобы TypeScript всегда смотрел на папку root / sr c при поиске элементов.

Наша цель для этого будет ссылаться на такие вещи:

import { HeaderComponent } from '@app/components/header/header.component';
import { FooterComponent } from '@app/components/footer/footer.component';
import { GifService } from '@app/core/services/gif.service';

Это похоже на то, как ссылки Angular импортируются с помощью @ angular, как @ angular / core или @ angular / router.

Настройка абсолютных путей Поскольку TypeScript - это то, что отвечает за перенос наших Angular приложений, мы обязательно настроим наши пути в tsconfig. json.

В tsconfig. json мы будем сделайте две вещи, используя две опции компилятора:

baseUrl: установите базовую папку как / src paths: попросите TypeScript найти @app в папке / src / app, baseUrl будет базовым каталогом, который используется для разрешения не относительных имен модулей. paths - это массив отображаемых записей для имен модулей в расположениях, относящихся к baseUrl.

Вот оригинальный tsconfig. json, который поставляется с новой установкой CLI Angular. Мы добавим две наши строки в compilerOptions.

{
  "compileOnSave": false,
  "compilerOptions": {
   ...

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

С этим в нашем tsconfig. json теперь мы можем ссылаться на элементы абсолютно!

import { HeaderComponent } from '@app/components/header/header.component';
import { FooterComponent } from '@app/components/footer/footer.component';
import { GifService } from '@app/core/services/gif.service';

Это здорово, потому что мы теперь можно перемещать наши файлы и не беспокоиться об обновлении путей везде.

на основе это :

/ - Site root
~/ - Root directory of the application

это может быть тоже полезно;