对不起,乍一看似乎微不足道。但是我很困!将主题中的各种CSS和JS文件添加到Angular8应用程序项目中的绝对正确和正确的方法是什么?
让我详细说明。我有这个目标,打算在我的Angular8应用中使用。我尝试通过各种方式合并相关的CSS js文件。
都不起作用。 这就是我在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"
]
答案 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"
}
请参见styles
→projects
→angularexampleapp
→architect
→build
下的options