Angular 7 - Как разделять файлы в разных каталогах - PullRequest
Новая
       20

Angular 7 - Как разделять файлы в разных каталогах

8 голосов
/ 03 мая 2019

Я настраиваю свое приложение Angular 7 для производства и пытаюсь упорядочить файлы в разных каталогах.

angular.json 

            "architect": {
                "build": {
                    "builder": "@angular-devkit/build-angular:browser",
                    "options": {
                        "outputPath": "dist/samsara-ui",
                        "index": "src/index.html",
                        "main": "src/js/main.ts",
                        "polyfills": "src/js/polyfills.ts",
                        "tsConfig": "src/tsconfig.app.json",
                        "assets": [
                            "src/favicon.ico",
                            "src/assets"
                        ],
                        "styles": [
                            "src/styles.css",
                            "src/samsara-theme.scss"
                        ],
                        "scripts": []
                    },

В настоящее время мой каталог выглядит так: 

├── dist
|   ├── <appname>
|   |   ├── assets
|   |   |   ├── icons
|   |   |   ├── images

|   |   |   index.html
|   |   |   *.js (bundled files: runtime.js, polyfills.js, vendor.js, main.js)
|   |   |   *.map
|   |   |   style.css
|   |   |   *.woff, *.woff2, *.tff, *.eot

При компиляции в корневом каталоге генерируются связанные файлы javascript вместе с файлами шрифтов, которые также копируются в корневой каталог

Я бы хотел:

  1. Укажите другой каталог для связанных js-файлов
  2. Укажите другой каталог для файлов шрифтов. (если это должен быть один и тот же каталог файлов js, нет проблем, но приятно быть другим)

Структура будет выглядеть так: 

├── dist
|   ├── <appname>
|   |   ├── assets
|   |   |   ├── icons
|   |   |   ├── images

|   |   |   index.html
|   |   |   style.css

|   |   ├── libs
|   |   |   |   *.js
|   |   |   |   *.map

|   |   ├── fonts
|   |   |   *.woff, *.woff2, *.tff, *.eot

Возможно ли этого добиться? Если да, то как?

Большое спасибо за вашу помощь.

С наилучшими пожеланиями

Ответы [ 3 ]

4 голосов
/ 03 мая 2019

Официально не поддерживается, но вы можете использовать, 

--baseHref=baseHref      Base url for the application being built.

--deployUrl=deployUrl    URL where files will be deployed.

--outputPath=outputPath  path for the new output directory

Объединяя их, вы можете переместить файлы js / map / index.html в определенное место и обновить baseHref и url в index.html..

Подробнее,

https://github.com/angular/angular-cli/issues/10171

0 голосов
/ 03 мая 2019

Да, это так.

Все, что вам нужно сделать, это изменить записи в angular.json, 

"assets":   [
              "src/assets/icons",
              "src/assets/images",
              "src/fonts"
            ],
"styles":   [
              "src/styles.css"
            ]

"scripts":  [
              "src/libs"
            ]
0 голосов
/ 03 мая 2019

На основании документации здесь вам просто нужно обновить файл angular.json, чтобы сменить каталог ресурсов.

Что-то вроде: 

"assets": [{ "glob": "sitemap.xml", "input": "src/assets/", "output": "/" }],

И чтобы изменить путь пакета js, необходимо указать новый путь во время сборки, т. Е. ng build --prod --outputPath=NEW_PATH - документация - Ссылка в противном случае вам просто нужно обновить путь js в index.html

...