angularjs-route 未加载 angular --prod 标志（angular-cli）答案

【问题标题】：angularjs-route not loading with angular --prod flag (angular-cli)angularjs-route 未加载 angular --prod 标志（angular-cli）
【发布时间】：2020-12-04 15:59:37
【问题描述】：

上下文：我正在从 ngJs 迁移到 ng10，当 我不使用 --prod 标志

时应用程序运行正常

问题是：当我使用 --prod 标志时，路线不会加载，我非常不知道为什么不加载。我看到在$routeChangeStart 上打印"next" 属性的唯一区别是--prod 模式下的"next" 对象没有名为"locals" 的属性

第二。奇怪的事情：$routeChangeStart 在我更改 URL 栏上的 URL 时触发，因为每次更改 URL 时都会打印 $routeChangeStart

第三。奇怪的事情：出于测试目的，我将配置中的templateUrl 更改为template:'<div>Arcade PvP silly text</div>'，但它也没有加载，据我所知，任何视图的控制器都不会触发。

请帮忙。

Angular-CLI 10.0.5

Angular 1.7.6 在 Angular 10.0.6 上引导

【问题讨论】：

标签： angularjs angular angular-cli

【解决方案1】：

好的，我设法更深入地了解了这种行为的原因并设法解决了问题，将在此处记录：

这是在 Angular 10.0.5 上引导的 AngularJS (1.7.x) 应用程序
使用ng serve --configuration=dev 部署应用程序使其在配置不同 index.ts 并将所有内容从 *.js 转换为 *.ts 的正常漫长过程后按预期工作
问题的原因位于angular.json中：

{
    "projects":{
        [project_name]:{
            "architect":{
                "build":{
                    "configurations":{
                        "production":{
                            ...
                            "optimization":true <------- THIS
                        }
           ...
}}}}}}

优化标志有效地使包非常轻量级，ng build --prod 可以正常编译。但正如我在问题中提到的，问题发生在运行时：路由“加载”但 HTML 永远不会为任何配置的路由呈现，因此任何控制器都运行。

在深入调查中，optimization 标志告诉 angular-cli webpack 在 JS 上运行缩小，根据过去的经验，由于 mangle，AngularJS 似乎很难接收缩小/丑化处理。过程中，我的问题是原因之一。

Angular-CLI 的 Webpack 运行 TerserPlugin 进行缩小，我需要对其进行配置以避免使用 mangle，Angular 现在允许使用自定义 webpack 配置文件添加规则，这是这样实现的：

在项目基础文件夹中创建一个新文件，假设命名为custom-webpack.config.js
在 angular.json 构建中引用此文件：

{
    "projects":{
        [project_name]:{
            "architect":{
                "build":{
                    "builder":"@angular-builders/custom-webpack:browser",
                    "options":{
                        "customWebpackConfig": {
                            "path": "./custom-webpack.config.js"
                        },
               ...
          }
}}}}}}

在文件中，让我们这样做：

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                extractComments: true,
                terserOptions: {
                    mangle: false,
                    ie8:false,
                    safari10:false
                }
            }),
        ],
    }
}

瞧！会发生缩小，但不会发生 mangle，应用程序将按预期（大部分）减小它的包大小，并且 angular-route 将正常工作。

【讨论】：