Open Closed

javascript isolation in modules #4041


User avatar
0
cala created

Javascript isolation works very well ( in main/base project ) - but we cant get it to work in modules. it looks like the file is not copied to wwwroot ( this works automaticly for main/base project ) ( ref microsoft )

  • ABP Framework version: v6.0.1
  • UI type: Blazor

2 Answer(s)
  • User Avatar
    0
    cala created

    main project - Pages/Test.razor

    @page "/test"
    
    <h3>Test</h3>
    
    @code {
    	private Lazy<IJSObjectReference> _module = new();
    	private Lazy<IJSObjectReference> _moduleInstance = new();
    	private DotNetObjectReference<Test>? _reference;
    	
    	[Inject]
    	private IJSRuntime _js { get; set; } = null!;
    
    	protected override async Task OnAfterRenderAsync( bool firstRender )
    	{
    		if( !firstRender )
    		{
    			return;
    		}
    		
    		IJSObjectReference jsModule = await _js.InvokeAsync<IJSObjectReference>( "import", "./Pages/Test.razor.js" );
    		_reference      = DotNetObjectReference.Create( this );
    		_module         = new Lazy<IJSObjectReference>( jsModule );
    		_moduleInstance = new Lazy<IJSObjectReference>( await _module.Value.InvokeAsync<IJSObjectReference>( "GetExample" ) );
    	}
    }
    

    main project - Pages/Test.razor.js

    class Example
    {
    	
    }
    
    let instance = new Example();
    
    export function GetExample()
    {
    	return instance;
    }
    

    module project - Pages/ModuleTest.razor

    @page "/module/test"
    
    @using Microsoft.JSInterop
    
    <h3>Test</h3>
    
    @code {
    	private Lazy<IJSObjectReference> _module = new();
    	private Lazy<IJSObjectReference> _moduleInstance = new();
    	private DotNetObjectReference<ModuleTest>? _reference;
    	
    	[Inject]
    	private IJSRuntime _js { get; set; } = null!;
    
    	protected override async Task OnAfterRenderAsync( bool firstRender )
    	{
    		if( !firstRender )
    		{
    			return;
    		}
    		
    		IJSObjectReference jsModule = await _js.InvokeAsync<IJSObjectReference>( "import", "./Pages/ModuleTest.razor.js" );
    		_reference      = DotNetObjectReference.Create( this );
    		_module         = new Lazy<IJSObjectReference>( jsModule );
    		_moduleInstance = new Lazy<IJSObjectReference>( await _module.Value.InvokeAsync<IJSObjectReference>( "GetExample" ) );
    	}
    }
    

    module project - Pages/ModuleTest.razor.js

    class Example
    {
    	
    }
    
    let instance = new Example();
    
    export function GetExample()
    {
    	return instance;
    }
    
  • User Avatar
    0
    cala created

    found out: its only copied if you use correct path, _content/{PackeId}/{Path}

    not sure why you dont need to specify _conent in main project but it works

Made with ❤️ on ABP v8.2.0-preview Updated on March 25, 2024, 15:11