Angular code
Migration process
When you migrate, the code using any tool (UI tool, visual studio project, CMD) you need to pass some arguments, like input (-i), output(-o) and for a project with PRISM and modules, you require the extension (-e). This file is used to specify which projects of Silvelight, must be migrated as Angular library and be included to be loaded through the ExternalModelConfig. To see more information, see:
In the .zip you can file the file for the -e option. The file is configuration.yml.
This file specifies that module A should be converted to an Angular library and include it in the ExternalModelConfig.
Migrated project
In the migrated project, you will find the same project from Silverlight. There is an Angular project (PrismSample), the rest of them are an Angular library type (HelloWorldModule, ModuleA, ModuleB, stubs).
PrismSample project
This project will contain the same files from Silverlight, but some of them will change the extension.
Shell.cs => Shell.ts
Bootstrapper.cs => Bootstrapper.ts
ModuleCatalog.xaml => ModuleCatalog.ts
App.xaml.cs => App.ts
ExternalModelConfig.ts
Also, there is a new file: ExternalModelConfig.ts this file is generated because you pass the -e specifying which projects should be handled as a Library.
Thanks to this file, you can load a module OnDemand, and request the server for it. Any module that you define in the configuration.yml file and if it located in a different .xap file, will be added in this ExternalModelConfig.ts file.
If the module is defined in the same .xap file as the main project, (for example added as reference in Silverlight) it will not be added in the ExternalModelConfig, but it added in the Angular workspace.
Bootstrapper file
As in Silverlight, Shell is created, RootVisual is set it, and the modules are registered in the ModuleCatalog.
Please note that this class extends now from DIBootstrapper. This is a framework class to support the Dependency Injection provided by unity in Silverlight.
Shell file
This class contains the same event handler for the click event. Also, it will try to load module A from the server using the ModuleManager.
Module projects
Each project contains the main class to initialize the module.
The initialize method registers the view into the region as Silverlight.
Compilation stage
After migrating the solution, you need to run the npm install to get the node_modules.
In Silverlight there is a build order to respect the dependencies. The migration process doesn't know how to replicate the same order. For that reason, you need to build each project manually. The first one should always be the stubs project; you need to calculate the dependencies and do it in that order.
For this demo, you must build:
ng build stubs && ng build ModuleA && ng build ModuleB && ng build HelloWorldModule && ng build ModuleB && ng build PrismSample
If you check the chunks generated by Angular, you can see the ModuleA is generated in a different chunck dist_ModuleA_fesm2015_moduleA_js, that's because the code registered the module in a different ref:
Run
When the compilation process is done, you can start the application using: ng serve. Open the browser in your localhost and default port: (localhost:4200).
If you check the traffic for the first load (filtered by javascript files) you will see the three first file, that includes the modules module, HelloWorldModule and the PrismSample.
To get the ModuleA, you need to click the button to load the module, the framework will request the new code and be added into the application.
You can download the Angular project here:
Last updated
Was this helpful?