[英]Uncaught (in promise): TypeError: Cannot read property 'ɵcmp' of undefined in angular 10
I am getting this error Uncaught (in promise): TypeError: Cannot read property 'ɵcmp' of undefined in angular
when trying to load the app I just compiled with --prod flag with both optimization and buildOptimizer set as true, when I set both to false the issue disappear and application is loading without issues but the application size is bigger and performance isn't as expected, I need to build a production with both optimization and buildOptimizer set as true, anyone have a good solution to this issue?我收到此错误Uncaught (in promise): TypeError: Cannot read property 'ɵcmp' of undefined in angular
当我尝试加载我刚刚编译的应用程序时,优化和 buildOptimizer 都设置为 true,当我设置两者时为 false 问题消失,应用程序加载没有问题,但应用程序大小更大,性能不符合预期,我需要构建一个将优化和 buildOptimizer 都设置为 true 的产品,有人对这个问题有很好的解决方案吗?
angular.json file : angular.json 文件:
"staging": {
"fileReplacements": [
{
"replace": "src/environments/environment.ts",
"with": "src/environments/environment.staging.ts"
}
],
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"extractCss": true,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"buildOptimizer": true,
"budgets": [
{
"type": "initial",
"maximumWarning": "2mb",
"maximumError": "5mb"
},
{
"type": "anyComponentStyle",
"maximumWarning": "6kb",
"maximumError": "10kb"
}
]
}
My Code in .ts to load dynamic component and this part not work when production angular application and have pervious error :我在 .ts 中的代码加载动态组件,这部分在生产角度应用程序时不起作用并且有以前的错误:
//Directive created
@ViewChild(RequestsDirective) tabHost: RequestsDirective;
constructor(
private componentFactoryResolver: ComponentFactoryResolver,
private viewContainerRef: ViewContainerRef,
public requestsMainService: RequestsMainService,
private spinner: NgxSpinnerService) { }
ngOnInit(): void { }
// Load Component in ng template and set request name in services and hide category - request type part
async loadTabComponent(_requestid: number, _requestname: string) {
//debugger;
// to set request name dynamic in all requests
this.requestsMainService.RequestName = _requestname;
// Hide Category And Requests type
$('#div_main').hide('slow');
// Search in App Model about component name
const factories = Array.from(
this.componentFactoryResolver['ngModule']
.instance.constructor.ɵmod.declarations
);
const factoryClass = factories.find(
(x: any) => x.name === ('Request1Component')
) as Type<any>;
// clear any previous component
this.viewContainerRef.detach();
this.viewContainerRef.clear();
// get dynamic component by name
const componentFactory = this.componentFactoryResolver.resolveComponentFactory(factoryClass);
// load it in ng template
this.viewContainerRef = this.tabHost.viewContainerRef;
this.viewContainerRef.createComponent(componentFactory);
}
Note笔记
Request1Component
this name of component I want to load it dynamic Request1Component
这个组件的名称我想动态加载它
this issue happens when you try to create/add/attach an undefined component to an existing component ref当您尝试将未定义的组件创建/添加/附加到现有组件引用时会发生此问题
change this line:改变这一行:
this.viewContainerRef.createComponent(componentFactory);
to this:对此:
if (factoryClass != undefined) this.viewContainerRef.createComponent(factoryClass);
* note 1: *注1:
you don't need to use componentFactoryResolver.resolveComponentFactory()
for createComponent()
anymore it is deprecated, you should simply pass the class reference directly to createComponent()
您不再需要为createComponent()
使用componentFactoryResolver.resolveComponentFactory()
它已被弃用,您应该简单地将类引用直接传递给createComponent()
* note 2: *注2:
when passing a value to viewContainerRef.createComponent()
always check if it is undefined
if it is not (maybe the class was not registered or created yet) - then don't add it, or replace it with some place holder component将值传递给viewContainerRef.createComponent()
始终检查它是否undefined
如果undefined
(可能该类尚未注册或创建) - 然后不要添加它,或将其替换为某个占位符组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.