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 addednode
to thetypes
array ofclient/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 theangular.json
config to use it. - To have the Express server serve the
dist
folder statically, I've modified theangular.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.