angularjs路由未加载angular--prod标志(angular cli)

Question

上下文：我正在从ngJs迁移到ng10，当我不使用--prod标志时，应用程序正常运行

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

第二。奇怪的是：当我按照应该的方式更改URL栏上的URL时，会触发$routeChangeStart，因为每次更改URL 时都会打印$routeChangeStart

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

请帮忙。

Angular CLI 10.0.5

Angular 1.7.6在Angular 10.0.6 上引导

Answer 1

好吧，我设法更深入地理解了这种行为的原因，并设法制定了一个解决方案，将在这里记录下来：

1. 这是AngularJS(1.7.x(中的一个应用程序，在Angular 10.0.5 上引导

2. 使用ng serve --configuration=dev部署应用程序可以使其在配置不同的index.ts并将所有内容从*.js转换为*.ts的正常长过程之后按预期工作

3. 问题的原因位于angular.json:

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

优化标志有效地使捆绑包变得非常轻量级，并且ng build --prod能够正常编译。但正如我在问题中提到的，问题发生在运行时：；负载"；但是HTML从不为任何配置的路由呈现，因此任何控制器都会运行。

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

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

1. 在项目基本文件夹中创建一个新文件，比如命名为custom-webpack.config.js
2. 在angular.json构建中引用此文件：

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

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

const TerserPlugin = require('terser-webpack-plugin');
module.exports = {
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({
extractComments: true,
terserOptions: {
mangle: false,
ie8:false,
safari10:false
}
}),
],
}
}

瞧！发生了缩小，但没有发生损坏，应用程序将按预期(大部分(减小其束大小，并且角度路由将正常工作。