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

Posted 2023-03-07

技术标签:

【中文标题】将主题中的 CSS 和 JS 文件合并到 Angular8 项目中的完美正确方法是啥【英文标题】：What is the perfect correct way to incorporate CSS and JS files from a theme into Angular8 project将主题中的 CSS 和 JS 文件合并到 Angular8 项目中的完美正确方法是什么 【发布时间】：2020-04-03 17:06:30 【问题描述】：

对不起，如果这乍一看似乎微不足道。但我很卡住！将主题中的各种 CSS 和 JS 文件添加到 Angular8 应用项目中的绝对正确和正确的方法是什么？

让我详细说明。我有这个主题，我打算在我的 Angular8 应用程序中使用。我尝试通过各种方式合并相关的 css js 文件。

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

都没有用。这就是我在 package.json 文件中所做的 -

    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"
        ]

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

如您所见，我尝试了 3 种方法，但均未奏效。你能告诉我完全正确的方式我应该这样做吗？或者，我的 3 种方法中的任何编辑/修改应该足够了吗？期待一些明确的指导。

加法。我的整个 angular.json。请注意，我仅在“构建”部分下添加了样式和脚本 src。你能找出问题所在吗？


  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
  "version": 1,
  "newProjectRoot": "projects",
  "projects": 
    "MyShop": 
      "projectType": "application",
      "schematics": ,
      "root": "",
      "sourceRoot": "src",
      "prefix": "app",
      "architect": 
        "build": 
          "builder": "@angular-devkit/build-angular:browser",
          "options": 
            "outputPath": "dist/MyShop",
            "index": "src/index.html",
            "main": "src/main.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.app.json",
            "aot": false,
            "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"
            ]
          ,
          "configurations": 
            "production": 
              "fileReplacements": [
                
                  "replace": "src/environments/environment.ts",
                  "with": "src/environments/environment.prod.ts"
                
              ],
              "optimization": true,
              "outputHashing": "all",
              "sourceMap": false,
              "extractCss": true,
              "namedChunks": false,
              "aot": true,
              "extractLicenses": true,
              "vendorChunk": false,
              "buildOptimizer": true,
              "budgets": [
                
                  "type": "initial",
                  "maximumWarning": "2mb",
                  "maximumError": "5mb"
                ,
                
                  "type": "anyComponentStyle",
                  "maximumWarning": "6kb",
                  "maximumError": "10kb"
                
              ]
            
          
        ,
        "serve": 
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": 
            "browserTarget": "MyShop:build"
          ,
          "configurations": 
            "production": 
              "browserTarget": "MyShop:build:production"
            
          
        ,
        "extract-i18n": 
          "builder": "@angular-devkit/build-angular:extract-i18n",
          "options": 
            "browserTarget": "MyShop:build"
          
        ,
        "test": 
          "builder": "@angular-devkit/build-angular:karma",
          "options": 
            "main": "src/test.ts",
            "polyfills": "src/polyfills.ts",
            "tsConfig": "tsconfig.spec.json",
            "karmaConfig": "karma.conf.js",
            "assets": [
              "src/favicon.ico",
              "src/assets"
            ],
            "styles": [
              "src/assets/css/style.css"
            ],
            "scripts": [

            ]
          
        ,
        "lint": 
          "builder": "@angular-devkit/build-angular:tslint",
          "options": 
            "tsConfig": [
              "tsconfig.app.json",
              "tsconfig.spec.json",
              "e2e/tsconfig.json"
            ],
            "exclude": [
              "**/node_modules/**"
            ]
          
        ,
        "e2e": 
          "builder": "@angular-devkit/build-angular:protractor",
          "options": 
            "protractorConfig": "e2e/protractor.conf.js",
            "devServerTarget": "MyShop:serve"
          ,
          "configurations": 
            "production": 
              "devServerTarget": "MyShop:serve:production"
            
          
        
      
    ,
  "defaultProject": "MyShop"

【问题讨论】：

根据经验，Angular 和 Jquery 永远不会一起工作。我确实这样做了，@MaihanNijat 停止了它，并使用 ng serve --open 再次提供新鲜。为什么您的assets 文件夹中有所有这些文件？您可以将它们（例如引导程序）留在node_modules 中。阅读：Angular Docs - Adding a library to the runtime global scope 嘿，如果我执行 jquery 和 types/jquery 的 npm i 并将 import 语句添加到我的 app.component.ts 中的 2 以制作我的角度项目，该怎么办？使用和解析jquery？ @ling-vu 【参考方案1】：

将您的主题放入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"

【讨论】：

是的，我放了上面那个。我理解的文件中有 2 个这样的样式 [] 和脚本 [] 区域。但这不起作用是主要问题！ @ling-vu【参考方案2】：

当您生成您的应用程序时，您的样式需要捆绑到一般的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"

查看projects下的styles数组→angularexampleapp→architect→build→options

【讨论】：

等一下。我在 mo 有多个输入。让我一个一个地跟随。事实上，如果这有助于识别，我会发布我的 angular.json 文件！ @尼古拉斯它不在package.json 中，它在angular.json 中。 @PrabirChoudhury @PrabirChoudhury 您在使用任何其他捆绑生成器吗？因为这是唯一的方法。也许删除dist 文件夹再试一次？不，只有 webpack @Nicolas。好的，注意，删除整个dist。做一个新的 ng build --prod 并尝试。

以上是关于将主题中的 CSS 和 JS 文件合并到 Angular8 项目中的完美正确方法是啥的主要内容，如果未能解决你的问题，请参考以下文章

我们可以将 CSS 和 JS 文件合并为一个文件吗？

如何将自定义 css 和 js 文件添加到 wordpress 的管理区域 [关闭]

将js文件和css文件添加到wordpress

如何使用 webpack 将 html、js 和 css 捆绑在一个 html 文件中？ [关闭]

合并和缩小多个 CSS / JS 文件

什么时候应该合并我的 JS 和 CSS 文件？