我在我的Angular 应用程序中有一个导航服务,它在开发模式下工作得很好,但是一旦完成了生产构建,它就停止工作了.

该服务很简单;它返回当前活动的组件,但在生产中,它只返回‘a’.

以下是服务代码:

@Injectable({
  providedIn: 'root'
})
export class NavigationService {
  private activeComponentSubject: BehaviorSubject<string> = new BehaviorSubject<string>('');

  constructor(private router: Router, private route: ActivatedRoute) {
    this.subscribeToNavigationEnd(this.route);
  }

  private subscribeToNavigationEnd(route: ActivatedRoute): void {
    this.router.events.pipe(
      filter(event => event instanceof NavigationEnd)
    ).subscribe((event: NavigationEnd) => {
      const activeComponent = this.getActiveComponent(route);
      this.activeComponentSubject.next(activeComponent);
    });
  }

  private getActiveComponent(route: ActivatedRoute): string {
    const childRoute = route.firstChild;

    if (childRoute) {
      return this.getActiveComponent(childRoute);
    } else {
      const componentName = route.outlet === PRIMARY_OUTLET ? route.component?.['name'] : '';
      return componentName || '';
    }
  }

  getComponent(): BehaviorSubject<string> {
    return this.activeComponentSubject;
  }
}

在组件中,它的名称是这样的:

ngOnInit(): void {
  this.navigationSubscription = this.navigation.getComponent().subscribe(component => {
    this.setPath(component);
    console.log(component);
  });
}

如果我在开发中打开组件,我会得到ShopComponent、CheckoutComponent等值.

而在制作过程中,我只得到了‘a’.

以下是angular.json配置:

  "configurations": {
    "production": {
      "fileReplacements": [
        {
          "replace": "src/environments/environment.ts",
          "with": "src/environments/environment.prod.ts"
        }
      ],
      "optimization": true,
      "outputHashing": "all",
      "sourceMap": false,
      "namedChunks": false,
      "extractLicenses": true,
      "vendorChunk": false,
      "buildOptimizer": true,
      "budgets": [
        {
          "type": "initial",
          "maximumWarning": "2mb",
          "maximumError": "5mb"
        },
        {
          "type": "anyComponentStyle",
          "maximumWarning": "6kb",
          "maximumError": "10kb"
        }
      ],
      "serviceWorker": true,
      "ngswConfigPath": "ngsw-config.json"
    },
    "development": {
      "buildOptimizer": false,
      "optimization": false,
      "vendorChunk": true,
      "extractLicenses": false,
      "sourceMap": true,
      "namedChunks": true
    }
  }

推荐答案

这是意料之中的.所有的类都被重命名为短文本.这个过程被命名为缩小化,其目的是使Bundle 包(JavaScript文件大小)更小.您得到的组件是正确的;只是它们的类名不再是长的、可读的,而是短的.

Angular相关问答推荐

以17角表示的自定义元素

向Anguar 17项目添加服务以启动和停止Loader-NGX-UI-Loader

在Drective Composure API中使用指令输出

如何在独立组件中导入Angular innerHTML

ng 生成组件不会创建 ngOnInit 和构造函数

带有数据的 Angular 模板

过滤 ngfor Angular 的计数

如何从父路由的组件访问激活的子路由的数据?

*ngIf 和 *ngFor 在 元素上使用

如何将服务变量传递到 Angular Material 对话框?

URL 清理导致嵌入式 YouTube 视频的刷新

ngx-toastr,Toast 未在 Angular 7 中显示

Angular 2 Material - 如何居中进度微调器

angular 5 material - 表单字段停留在 180px

Angular 2 可用的 yeoman 生成器

从 Angular 中的自定义表单组件访问 FormControl

如何对 *ngFor 应用数量限制?

如何将日期转换为Angular 2 中的yyyy-MM-dd格式

无需订阅即可从 Observable 获取当前值

Angular2 测试:ComponentFixture 中的 DebugElement 和 NativeElement 对象有什么区别?