Join GitHub today
GitHub is home to over 28 million developers working together to host and review code, manage projects, and build software together.Sign up
stories moving into the cli
Moving your project to Angular CLI
The easiest way to move an existing project to Angular CLI is to copy your application files into a new, empty CLI project.
Let's see how to do it step by step. Here we use a project made with the official QuickStart as an example, but you should be able to adjust these instructions to other setups.
Note for Windows users: we show unix commands here like
cp -r to copy and
rm -rf to delete files.
Windows does not have these commands so use Explorer instead.
Start with preparing your existing project folder. We'll refer to it as
- commit and push your existing changes.
- clean your folder from temporary files and ignored files using
git clean -fdx.
- rename your project folder to
Now make a new project on the same parent folder as
old-awesome-app using Angular CLI.
- Verify you have the Angular CLI prerequisites.
- Install the CLI globally:
npm install -g @angular/cli.
- Make a new app:
ng new awesome-app.
- Move into the folder:
- Test your app works:
ng serve --open.
Copy over your app files.
- Remove the existing app:
rm -rf src/app src/styles.css src/index.html e2e.
e2e/from your old app. If you don't have a
src/folder then these files and folders should be at the root of the old project instead.
cp -r ../old-awesome-app/src/app ./src/app cp ../old-awesome-app/src/index.html ./src/index.html cp ../old-awesome-app/src/styles.css ./src/styles.css cp -r ../old-awesome-app/e2e ./e2e/
- Don't copy
../old-awesome-app/src/main.ts. Instead compare it to the new
./src/main.tsand manually copy any extra code the old one has.
../old-awesome-app/package.jsonto the new
./package.jsonand add in your third party libraries and
@types/*packages, project descriptions and any other fields.
npm installto install any packages you added.
- Copy over any other files your app needs like images into
src/assets. Adjust paths on your app to use this folder e.g.
There are a few adjustments you need to do to use the CLI build system.
- Change any absolute paths you have for
styleUrlsor lazy loaded NgModules to relative paths instead.
- Remove any
module.idthat you have in
@Componentmetadata. They aren't needed in the CLI.
- Polyfills are listed in
- SystemJS is not needed anymore, so remove it from
- Instead of using
<link>tags directly in
- Look for the
.angular-cli.jsonand add in any CSS files you have in
src/index.html. Use a relative path from
- Do the same for any remaining script tags as well, using the
- Look for the
The final step is to copy your git history so you can continue working without losing anything:
- Copy over the git folder:
cp -r ../old-awesome-app/.git .git
- Commit and push your changes as normal.
You can now delete
../old-awesome-app, and you're done!
The CLI runs static analysis on your code to ensure it's AOT ready, so you might run into a few new compilation errors that weren't there before. Check out this handy list of AOT Do's and Dont's if you get any unfamiliar errors.