This is the sample project for my workshop on using the Angular CLI during an ngUpgrade migration.

To get started, clone the repo:

git clone https://github.com/upgradingangularjs/cli-ngupgrade-workshop.git

Overview of the Project:

• Express API for example data and for serving the production build
• Hybrid setup with AngularJS 1.7.x & Angular using ngUpgrade
• AngularJS in TypeScript
• Angular CLI with tslint
• Prettier for formatting

A few notes on setting up a CLI project with ngUpgrade if you would like to recreate this:

• This project starts with the AngularJS files in TypeScript, using modules, and aligned with the same file structure as the CLI. This is often not the case in the real world, but I want to show a goal to attain to in your own legacy code.
• To use require in AngularJS templates, I've added node to the types array of client/src/tsconfig.app.json
• I've added the Bootstrap and FontAwesome styles in the angular.json styles array.
• To use the Express server, I've added a proxy.conf.json file and updated the angular.json config to use it.
• To have the Express server serve the dist folder statically, I've modified the angular.json output config to match what the server expects. You could also change the location in the Express config (server/expressConfig.js) to match the CLI default, but front end devs often don't have access to the back end.

To run the Express server:

cd server
npm install
npm start

By default, the Express server runs on port 9001. This can be changed in /server/server.js. Just be sure to update proxy.conf.json in the client. The Express server is for both the API and to serve the Angular production build.

The client was generated with Angular CLI version 7.3.0, so it has all of the same features as a normal CLI project.

To get started:

cd client
npm install
ng serve

Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.

Run ng generate component component-name to generate a new component. You can also use ng generate directive|pipe|service|class|guard|interface|enum|module.

After you generate a component or service in Angular, you can use ngUpgrade's downgradeComponent or downgradeInjectable in client/src/app/app.module.ajs.ts so the AngularJS code can interact with it.

Run ng build to build the project. The build artifacts will be stored in the dist directory at the root of the repository. Use the --prod flag for a production build. Navigate to the Express server at localhost:9001 to see this build.

Run ng test to execute the unit tests via Karma.

Run ng e2e to execute the end-to-end tests via Protractor.

To get more help on the Angular CLI use ng help or go check out the Angular CLI README.

For further help on ngUpgrade and Angular Migration in general, check out the ngMigration Forum & Wiki as well as my course UpgradingAngularJS.

Sam Julien