将主题的CSS和JS文件合并到Angular8项目中的完美正确方法是什么

时间:2019-12-10 13:35:41

标签: javascript css angular angular8 package.json

对不起,乍一看似乎微不足道。但是我很困!将主题中的各种CSS和JS文件添加到Angular8应用程序项目中的绝对正确和正确的方法是什么?

让我详细说明。我有这个目标,打算在我的Angular8应用中使用。我尝试通过各种方式合并相关的CSS js文件。

  • 在index.html文件中
  • 在app.component.html文件中
  • 在angular.json文件的样式和脚本数组中

都不起作用。 这就是我在package.json文件中所做的-

java.lang.NoSuchMethodError: com.twelvemonkeys.imageio.plugins.tiff.TIFFImageReaderSpi.canDecodeAs(Ljava/lang/Object;I)Z
    at com.twelvemonkeys.imageio.plugins.tiff.BigTIFFImageReaderSpi.canDecodeInput(BigTIFFImageReaderSpi.java:58)
    at javax.imageio.ImageIO$CanDecodeInputFilter.filter(ImageIO.java:567)
    at javax.imageio.spi.FilterIterator.advance(ServiceRegistry.java:834)
    at javax.imageio.spi.FilterIterator.<init>(ServiceRegistry.java:828)
    at javax.imageio.spi.ServiceRegistry.getServiceProviders(ServiceRegistry.java:519)
    at javax.imageio.ImageIO.getImageReaders(ImageIO.java:646)
    at com.intellij.ide.util.TipUIUtil.read(TipUIUtil.java:254)
    at com.intellij.ide.util.TipUIUtil.updateImages(TipUIUtil.java:210)
    at com.intellij.ide.util.TipUIUtil.getTipText(TipUIUtil.java:126)
    at com.intellij.ide.util.TipUIUtil.openTipInBrowser(TipUIUtil.java:150)
    at com.intellij.ide.util.TipPanel.setTip(TipPanel.java:84)
    at com.intellij.ide.util.TipPanel.nextTip(TipPanel.java:107)
    at com.intellij.ide.util.TipDialog.initialize(TipDialog.java:55)
    at com.intellij.ide.util.TipDialog.<init>(TipDialog.java:46)
    at com.intellij.ide.util.TipDialog.createForProject(TipDialog.java:108)
    at com.intellij.ide.util.TipDialog.showForProject(TipDialog.java:95)
    at com.intellij.ide.TipOfTheDayStartupActivity.runImpl(TipOfTheDayStartupActivity.java:50)
    at com.intellij.ide.TipOfTheDayStartupActivity.lambda$runImpl$0(TipOfTheDayStartupActivity.java:46)
    at com.intellij.openapi.wm.impl.commands.InvokeLaterCmd.lambda$run$0(InvokeLaterCmd.java:37)
    at java.awt.event.InvocationEvent.dispatch(InvocationEvent.java:311)
    at java.awt.EventQueue.dispatchEventImpl(EventQueue.java:764)
    at java.awt.EventQueue.access$500(EventQueue.java:98)
    at java.awt.EventQueue$3.run(EventQueue.java:715)
    at java.awt.EventQueue$3.run(EventQueue.java:709)
    at java.security.AccessController.doPrivileged(Native Method)
    at java.security.ProtectionDomain$JavaSecurityAccessImpl.doIntersectionPrivilege(ProtectionDomain.java:74)
    at java.awt.EventQueue.dispatchEvent(EventQueue.java:734)
    at com.intellij.ide.IdeEventQueue.defaultDispatchEvent(IdeEventQueue.java:757)
    at com.intellij.ide.IdeEventQueue._dispatchEvent(IdeEventQueue.java:706)
    at com.intellij.ide.IdeEventQueue.dispatchEvent(IdeEventQueue.java:375)
    at java.awt.EventDispatchThread.pumpOneEventForFilters(EventDispatchThread.java:205)
    at java.awt.EventDispatchThread.pumpEventsForFilter(EventDispatchThread.java:116)
    at java.awt.EventDispatchThread.pumpEventsForHierarchy(EventDispatchThread.java:105)
    at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:101)
    at java.awt.EventDispatchThread.pumpEvents(EventDispatchThread.java:93)
    at java.awt.EventDispatchThread.run(EventDispatchThread.java:82)

没有任何效果。如果我从控制台检查源,它不会显示任何已加载和已交付的css或js文件!我认为最后一种方法至少是在Angular8项目中添加CSS JS的正确方法。

如您所见,我尝试了3种方法,但均无济于事。您能告诉我 确切正确的方式 吗?或者,我的3种方法中的任何编辑/修改都足够吗?希望对此有明确的指导。

添加。我的整个angular.json。注意,我仅在“ build”部分下添加了样式和脚本src。你能找到麻烦的地方吗?

    blablablabla,
        "assets": [
          "src/favicon.ico",
          "src/assets"
        ],
        "styles": [
          "src/assets/css/style.css",
          "src/assets/css/bootstrap.min.css",
          "src/assets/css/font-awesome.min.css",
          "src/assets/css/ionicons.min.css",
          "src/assets/css/main.css",
          "src/assets/css/style.css",
          "src/assets/css/responsive.css",
          "src/assets/rs-plugin/css/settings.css"
        ],
        "scripts": [
         "src/assets/js/modernizr.js",
          "src/assets/js/jquery-1.11.3.min.js",
          "src/assets/js/bootstrap.min.js",
          "src/assets/js/own-menu.js",
          "src/assets/js/jquery.lighter.js",
          "src/assets/js/owl.carousel.min.js",
          "src/assets/rs-plugin/js/jquery.tp.t.min.js",
          "src/assets/rs-plugin/js/jquery.tp.min.js",
          "src/assets/js/main.js"
        ]

2 个答案:

答案 0 :(得分:0)

将主题放入angular.json文件是正确的。但是请注意,angular.json文件中有一些必须放置的位置。一种用于构建,另一种用于发球

{
  ....
  "projects": {
    "demo": {
      ...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
            ....
            "styles": [
              "src/styles.css"
            ],
            "scripts": []
          },
          ...
        },
        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "demo:build"
          },
          "configurations": {
            "production": {
              "browserTarget": "demo:build:production"
            }
          }
        },
        "extract-i18n": {
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": {
            "browserTarget": "demo:build"
          }
        },
        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {...
            "styles": [
              "styles.css"
            ],
            "scripts": [],
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ]
          }
        },
        ...
      }
    }
  },
  "defaultProject": "demo"
}

答案 1 :(得分:0)

在生成应用时,您的样式需要捆绑到常规style.css中。为此,您需要将它们添加到angular.json文件中。

以下是from angular8-example-app on github, by Ismaestro

的示例
{
  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": {
    "angularexampleapp": {
      "projectType": "application",
      "schematics": {
        "@schematics/angular:component": {
          "style": "scss"
        }
      },
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": {
        "build": {
          /* ... */
          "options": {
            "index": "src/index.html",
            "main": "src/main.browser.ts",
            "polyfills": "src/polyfills.ts",
            "styles": [
              "node_modules/@angular/material/prebuilt-themes/deeppurple-amber.css",
              "src/assets/css/reset.css",
              "src/assets/css/loading.css",
              "src/app/shared/styles/global.scss"
            ],
            "stylePreprocessorOptions": {
              "includePaths": [
                "src/app/shared/styles"
              ]
            }
            /* ... */
          }
        }
      }
    }
  },
  /* ... */
  "defaultProject": "angularexampleapp"
}

请参见stylesprojectsangularexampleapparchitectbuild下的options