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 awesome-app.

• commit and push your existing changes.
• clean your folder from temporary files and ignored files using git clean -fdx.
• rename your project folder to old-awesome-app.

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: cd awesome-app.
• 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.
• Copy src/app/, src/index.html, src/styles.css and 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.ts and manually copy any extra code the old one has.
• Compare ../old-awesome-app/package.json to the new ./package.json and add in your third party libraries and @types/* packages, project descriptions and any other fields.
• Run npm install to 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. <img src='assets/my-image.jpg>.

There are a few adjustments you need to do to use the CLI build system.

• Change any absolute paths you have for templateUrl, styleUrls or lazy loaded NgModules to relative paths instead.
• Remove any module.id that you have in @Component metadata. They aren't needed in the CLI.
• Polyfills are listed in ./src/polyfills.ts so remove core-js and zone.js from index.html.
• SystemJS is not needed anymore, so remove it from index.html as well.
• Instead of using <script> and <link> tags directly in index.html, use .angular-cli.json instead.
  • Look for the styles array in .angular-cli.json and add in any CSS files you have in src/index.html. Use a relative path from ./src/.
  • Do the same for any remaining script tags as well, using the scripts array instead.

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.