Javascript 为生产构建角度应用程序

您好，我很难构建用于生产的angular应用程序

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

angular.json

ts.config.json

运行新生成时的输出：

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

未能加载资源：net:：ERR\u文件\u未找到

---

html:1对脚本的访问权限'file:///C:/polyfills-es2015.0fe6949bc5ff4b784062.js“源”的“null”已被CORS策略阻止：跨源请求仅支持协议方案：http、数据、chrome、chrome extension、https。

是的，这就是它的外观，您有index.html、favicon.ico、，一个css文件和一堆.js文件。他们的名字很奇怪，因为他们是这样“编译”的。如果您访问您的网站，当您运行

ng build--prod

时，它将工作，那么Angular将执行一些操作（粗略描述）：

• 运行模块绑定器（例如网页包）
• WebPack将看到所有模块，并将创建一个依赖关系树。然后，基于依赖树的网页包将只在最终文件（捆绑包）中包含使用过的组件。这叫摇树
• 然后丑恶发生了。丑陋意味着所有不必要的空白将被删除，变量名将被缩短

---

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

在ng->build->outputPath下检查angular.json文件中的路径。另外，检查相关位置。我已经检查了输出路径，所有内容看起来都是正确的，因为它显示为“dist/app”。您可以使用示例应用程序和angular.json为您的应用程序创建stackblitz吗？您正在查看

out tsc

文件夹，这是TypeScript在WebPack打包包之前使用的临时文件夹。请使用

angular.json

和

tsconfig

文件的内容更新您的问题。另外，在运行生成之前删除

/dist

，并使用

ng build--prod

命令的输出更新问题。不要发布这些图片！我删除了文件夹，运行了一个新版本，并用结果更新了我的原始帖子上传到iis后，我只看到一个空白页面。您可以先通过浏览器访问index.html在本地进行尝试吗？对于IIS，您需要一些额外的步骤（创建网站、安装URL重写模块、创建web.config文件等…我在本文中找到了一些步骤）是的，我在本地运行时得到了相同的结果，因此编译过程中出现了问题。在这种情况下，在浏览器上打开控制台，您可能会收到一些消息（F12可以在大多数浏览器上打开开发人员工具并查看控制台）我用收到的控制台上的错误更新了我的原始帖子

{
   "$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
   }
}