为生产构建 Angular 应用程序

Question

您好，我在构建用于生产的 Angular 应用程序时遇到了很大的困难。

我正在运行 'ng build --prod' 命令，但是当我打开 'dist' 文件夹时，我没有在那里看到我的所有组件。 我还需要更改或配置其他内容吗？ 打开“dist”文件夹时，我看到了一些组件。

angular.json

{
   "$schema":"./node_modules/@angular/cli/lib/config/schema.json",
   "version":1,
   "newProjectRoot":"projects",
   "projects":{
      "app":{
         "projectType":"application",
         "schematics":{
            "@schematics/angular:component":{
               "style":"scss"
            }
         },
         "root":"",
         "sourceRoot":"src",
         "prefix":"app",
         "architect":{
            "build":{
               "builder":"@angular-devkit/build-angular:browser",
               "options":{
                  "outputPath":"dist/app",
                  "index":"src/index.html",
                  "main":"src/main.ts",
                  "polyfills":"src/polyfills.ts",
                  "tsConfig":"tsconfig.app.json",
                  "aot":false,
                  "assets":[
                     "src/favicon.ico",
                     "src/assets",
                     "src/images"
                  ],
                  "styles":[
                     "src/styles.scss"
                  ],
                  "scripts":[

                  ]
               },
               "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":"app:build"
               },
               "configurations":{
                  "production":{
                     "browserTarget":"app:build:production"
                  }
               }
            },
            "extract-i18n":{
               "builder":"@angular-devkit/build-angular:extract-i18n",
               "options":{
                  "browserTarget":"app: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/styles.scss"
                  ],
                  "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":"app:serve"
               },
               "configurations":{
                  "production":{
                     "devServerTarget":"app:serve:production"
                  }
               }
            }
         }
      }
   },
   "defaultProject":"app"
}

配置文件

{
   "compileOnSave":false,
   "compilerOptions":{
      "baseUrl":"./",
      "outDir":"./dist/out-tsc",
      "sourceMap":true,
      "declaration":false,
      "downlevelIteration":true,
      "experimentalDecorators":true,
      "module":"esnext",
      "moduleResolution":"node",
      "importHelpers":true,
      "target":"es2015",
      "typeRoots":[
         "node_modules/@types"
      ],
      "lib":[
         "es2018",
         "dom"
      ]
   },
   "angularCompilerOptions":{
      "fullTemplateTypeCheck":true,
      "strictInjectionParameters":true
   }
}

运行新构建时的输出：

我现在在本地控制台中运行时收到此错误：

无法加载资源：net::ERR_FILE_NOT_FOUND index.html:1 从源“null”访问“file:///C:/polyfills-es2015.0fe6949bc5ff4b784062.js”的脚本已被 CORS 策略阻止：跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。

Answer 1

是的，这就是它的外观，你有 index.html、favicon.ico、一个 css 文件和一堆 .js 文件。 它们的名字很奇怪，因为 Angular 以这种方式“编译”它们。 如果您访问您的网站，它将正常工作

Answer 2

当您运行ng build --prod ，Angular 将执行一些操作（粗略描述）：

• 运行模块打包器（例如 WebPack）。
• WebPack 将查看所有模块并创建一个依赖树。 然后基于依赖树的 WebPack 将仅包含最终文件（包）中使用的组件。 它被称为摇树。
• 然后丑化发生。 Uglify意味着所有不必要的空格将被删除，变量名将被缩短

所以这就是您看不到任何组件以及无法调试捆绑文件的原因。