mirror of
https://github.com/angular/angular-cli.git
synced 2025-05-19 04:26:01 +08:00
8b7a6af9a7
CLI projects don't need it, and soon Quickstart projects won't need it either so we might as well remove it.
66 lines
3.5 KiB
Markdown
66 lines
3.5 KiB
Markdown
# 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](https://github.com/angular/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](https://github.com/angular/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](https://github.com/rangle/angular-2-aot-sandbox#aot-dos-and-donts)
|
|
if you get any unfamiliar errors.
|