Converting Visual Studio Solutions to Angular CLI

On this page...Set up a new CLI solution Import/generate providers, services, classes and components Finalize any additional assets

Set up a new CLI solution

• Download the latest Responsive UI Starter Template from the Current Release page.
• Unzip and open the root folder in Visual Studio Code or your editor of choice.
• Open a command prompt (Ctrl+~ in VS Code) and execute npm install.
• Once installation is complete, execute ’ng serve’ and open your new application at http://localhost:4200 to confirm it builds and runs.
• Do a global search for the following terms and replace them with your application’s name:
  • responsive-controls-template
  • responsivecontrolstemplate
• Remove any unneeded components from the solution. For instance, if you don’t have an About component in your existing solution:
  • Delete the /src/app/components/about folder.
  • Remove import { AboutComponent } from './components/about/about.component'; from the /src/app/app.module.ts file.
  • Remove AboutComponent from the declarations section of /src/app/app.module.ts.
  • Remove the associated route.
  • Do this for all unneeded components.

Import/generate providers, services, classes and components

• Copy in any required providers and services from the existing solution’s app.module.ts to the new app.module.ts.
• Copy in any required providers and services from the existing solution’s app.component.ts to the new app.component.ts.
• Generate new components in applications. This can be done one of two ways:
  • Copy over component folders manually and add associated import statements and declarations in the new app.module.ts
  • Alternatively, you can use CLI to generate the components using the ’ng g c newComponentName’ syntax. This will create the required files and add the needed import and declarations to the app.module.ts file.
• Copy over your route information from your existing solution to the app.module.ts file.
• Copy over existing classes folder to /src/app.
• Copy over existing services folder to /src/app.
• If you used CLI to generate the new components in step 9, open your existing components and copy in the html, ts and css in to each respective file.

Finalize any additional assets

• Copy over images and other assets to the new /src/assets folder. Execute a global search to find paths in code and update the path to match new folder structure.
• Copy in any additional entries from the existing index.html file (css, meta, etc).
• Copy over favicon.ico to the /src folder.