docs: add move in/out docs #4400

filipesilva · 2017-02-03T12:29:24Z

filipesilva · 2017-02-03T12:30:25Z

@johnpapa @wardbell @Foxandxss can you have a look as well please?

Brocco

One thing I don't care for is since they'd be creating new and moving into the new folder structure they lose their git history which would be VERY useful for some projects. Thoughts?

Brocco · 2017-02-03T17:50:57Z

docs/documentation/stories/moving-into-the-cli.md

+- 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 folder as `old-awesome-app` using Angular-CLI.


Angular CLI (no dash)

Not loving "...-awesome-...". Too cute. Takes up mental space I need for other things. Can we get rid of it?

Brocco · 2017-02-03T17:51:14Z

docs/documentation/stories/moving-into-the-cli.md

+- rename your project folder to `old-awesome-app`.
+
+Now make a new project on the same folder as `old-awesome-app` using Angular-CLI.
+- Read up on [Angular-CLI prerequisites](https://github.com/angular/angular-cli#prerequisites).


Angular CLI (no dash)

filipesilva · 2017-02-03T17:58:06Z

@Brocco there are instructions in the last step to copy over .git, thus preserving history.

johnpapa · 2017-02-03T18:06:56Z

docs/documentation/stories/moving-into-the-cli.md

@@ -0,0 +1,63 @@
+# Moving your project to Angular-CLI


I think we are now saying "Angular CLI" (i saw a PR for this)

We must follow the Google docs standards and switch from "we" to "you".

I'm not sure it's such a great idea to have the new and old in the same folder. Are you sure?

Fixed.

@wardbell I don't see where 'we' is misused here. Can you point me in the right direction?

Regarding folder, they shouldn't be in the same folder. I'll clarify.

johnpapa · 2017-02-03T18:07:26Z

docs/documentation/stories/moving-into-the-cli.md

+# Moving your project to Angular-CLI
+
+It's easy to move your existing project to use Angular-CLI.
+The most straightforward way is to to make a new CLI project and copy over your app files.


to to --> to

Simplify. No need to sell.

The easiest way to move an existing project to Angular CLI is to copy your application files into a new, empty CLI project.

johnpapa · 2017-02-03T18:08:13Z

docs/documentation/stories/moving-into-the-cli.md

+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.
+


to other setups --> to your app

Can you clarify how this edit would help? If an app is using the quickstart setup, these are the instructions they should follow and would need no adjustment. You only need to adjust if you're not using the quickstart boilerplate.

johnpapa · 2017-02-03T18:09:07Z

docs/documentation/stories/moving-into-the-cli.md

+- 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 folder as `old-awesome-app` using Angular-CLI.


This could be un desirable if the person wants to keep their existing git integrations. Just keep that in mind.

Git integration in the editor? I don't understand what you mean here.

johnpapa · 2017-02-03T18:09:32Z

docs/documentation/stories/moving-into-the-cli.md

+- rename your project folder to `old-awesome-app`.
+
+Now make a new project on the same folder as `old-awesome-app` using Angular-CLI.
+- Read up on [Angular-CLI prerequisites](https://github.com/angular/angular-cli#prerequisites).


I'd say "Verify you have ..." ... not "read up"

johnpapa · 2017-02-03T18:10:29Z

docs/documentation/stories/moving-into-the-cli.md

+Now make a new project on the same folder as `old-awesome-app` using Angular-CLI.
+- Read up on [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`.


It is not clear that they have to go up a level before doing this. Someone might confuse it and think they are doing this inside their old app. We should make it clear they are doing this at same level as the old app.

Fixed via

Now make a new project on the same parent folder as old-awesome-app using Angular CLI.

johnpapa · 2017-02-03T18:11:32Z

docs/documentation/stories/moving-into-the-cli.md

+- Compare `../old-awesome-project/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, icons, etc.


Copy these assets where?

Fixed via

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

johnpapa · 2017-02-03T18:14:06Z

docs/documentation/stories/moving-into-the-cli.md

@@ -0,0 +1,63 @@
+# Moving your project to Angular-CLI


Overall I think we could benefit from dividing this into 2 focus areas. This is targeted at moving any app. That's great and it should do that ... but maybe we should have a walk through do it exactly for the QuickStart. Showing step by step what they do. This will give folks something to try, before doing their own. What do you think?

moving any app

You mean any Angular app, right?

I think a tutorial exercise that moved a QuickStart into CLI land would be great. It might need to be a little heftier than that if there are complications around routing. But if not, then that's perfect.

Similarly, nice to have an example for moving out of CLI-land.

I'm a bit confused here... this example specifically shows moving a from and to quickstart app and that is said clearly on the second paragraph:

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.

What makes you say this example isn't showing the quickstart details?

wardbell

This is a great start.

wardbell · 2017-02-03T18:46:12Z

docs/documentation/stories/moving-into-the-cli.md

@@ -0,0 +1,63 @@
+# Moving your project to Angular-CLI


moving any app

You mean any Angular app, right?

I think a tutorial exercise that moved a QuickStart into CLI land would be great. It might need to be a little heftier than that if there are complications around routing. But if not, then that's perfect.

Similarly, nice to have an example for moving out of CLI-land.

wardbell · 2017-02-03T18:48:18Z

docs/documentation/stories/moving-into-the-cli.md

+# Moving your project to Angular-CLI
+
+It's easy to move your existing project to use Angular-CLI.
+The most straightforward way is to to make a new CLI project and copy over your app files.


Simplify. No need to sell.

The easiest way to move an existing project to Angular CLI is to copy your application files into a new, empty CLI project.

wardbell · 2017-02-03T18:48:54Z

docs/documentation/stories/moving-into-the-cli.md

@@ -0,0 +1,63 @@
+# Moving your project to Angular-CLI


We must follow the Google docs standards and switch from "we" to "you".

wardbell · 2017-02-03T18:52:42Z

docs/documentation/stories/moving-into-the-cli.md

+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/`.
+If you don't have a `src/` folder then these files and folders should be


Maybe we should teach the src/ folder? I think we have some verbiage around that.

This example is showing everything assuming the src/ folder already.

There is only one line talking about the older structure, which I think is needed because every quickstart project made in the last year will still have the old structure.

wardbell · 2017-02-03T18:53:45Z

docs/documentation/stories/moving-into-the-cli.md

+- 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 folder as `old-awesome-app` using Angular-CLI.


Not loving "...-awesome-...". Too cute. Takes up mental space I need for other things. Can we get rid of it?

wardbell · 2017-02-03T18:54:52Z

docs/documentation/stories/moving-into-the-cli.md

+- Copy over the git folder: `cp ../old-awesome-project/.git .git`
+- Commit and push your changes as normal.
+
+You can now delete `../old-existing-project`, and you're done!


old-existing? or old-awesome?

it is not awesome anymore, just old. J/K, is a typo

wardbell · 2017-02-03T18:55:55Z

docs/documentation/stories/moving-into-the-cli.md

+
+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)


Let's get that "Handy list" into our docs NOW. Shouldn't have to go to rangle. @filipesilva, would you mind getting that underway?

wardbell · 2017-02-03T18:58:29Z

docs/documentation/stories/moving-out-of-the-cli.md

+You'll have to make a brand new project using your new project seed, move your app files and
+cater to any changes in the build process.
+
+Start with preparing your existing project folder, let's call it `awesome-app`.


Let's not. The name of the app isn't going to change. The new app and all of its project names should retain as much as possible of the old app. Rename the top level of the old project in a folder on your machine.

Do as separate clones maybe? Instead of trying to jack stuff around inside the same folder?

The name of the app isn't going to change, but I don't know it's original name so I need to call it something.

quickstart-app isn't a good name because the new app isn't going to be quickstart one. your-app isn't very good either because old-your-app sounds weird. Can you offer an alternative suggestion?

Meanwhile I reworded to not imply you should change the app itself, rather that we're just using a name for your existing app.

Start with preparing your existing project folder. We'll refer to it as awesome-app.

Also adjusted text to clarify you're not supposed to do it inside the same folder.

wardbell · 2017-02-03T19:06:08Z

docs/documentation/stories/moving-into-the-cli.md

@@ -0,0 +1,63 @@
+# Moving your project to Angular-CLI


I'm not sure it's such a great idea to have the new and old in the same folder. Are you sure?

filipesilva · 2017-02-03T19:44:54Z

@StephenFluin I believe you also wanted to review this.

Foxandxss

From the move out, I would comment that you may need to translate all the environment changes you could have under environments/

Foxandxss · 2017-02-03T21:06:57Z

docs/documentation/stories/moving-into-the-cli.md

+cp ../old-awesome-project/src/app ./src/app
+cp ../old-awesome-project/src/index.html ./src/index.html
+cp ../old-awesome-project/src/styles.css ./src/styles.css
+cp ../old-awesome-project/e2e ./e2e/


I believe all this cp commands needs the recursive option.

Foxandxss · 2017-02-03T21:08:27Z

docs/documentation/stories/moving-into-the-cli.md

+- Copy over the git folder: `cp ../old-awesome-project/.git .git`
+- Commit and push your changes as normal.
+
+You can now delete `../old-existing-project`, and you're done!


it is not awesome anymore, just old. J/K, is a typo

Foxandxss · 2017-02-03T21:09:38Z

docs/documentation/stories/moving-out-of-the-cli.md

@@ -0,0 +1,49 @@
+# Moving your project out of Angular-CLI


Angular CLI

filipesilva · 2017-02-06T11:01:28Z

@Foxandxss added this to clarify environments (and also added style preprocessor info:

- If your styles are not in CSS, you'll need to convert them to CSS since the quickstart doesn't
use style preprocessors. You can also add preprocessor support yourself.
- Copy over the code your app needs from the `environments/` folder, if any.
You'll have to find another way to switch environments on the Quickstart

filipesilva · 2017-02-14T19:11:30Z

Closed via 6b1d439

angular-automatic-lock-bot · 2019-09-11T20:42:12Z

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}

filipesilva requested review from hansl and Brocco February 3, 2017 12:30

googlebot added the cla: yes label Feb 3, 2017

Brocco reviewed Feb 3, 2017

View reviewed changes

Brocco approved these changes Feb 3, 2017

View reviewed changes

johnpapa suggested changes Feb 3, 2017

View reviewed changes

wardbell reviewed Feb 3, 2017

View reviewed changes

Foxandxss reviewed Feb 3, 2017

View reviewed changes

filipesilva added 5 commits February 6, 2017 10:23

docs: add move in/out docs

5da82e0

fix branding

180fbe9

add -r to folder copy

f80fda6

incorporate John's feedback

647a8fc

incorporate Ward's feedback

5f9ead1

incorporate Jesus's feedback

1ac0858

filipesilva force-pushed the add-migration-docs branch from 1655dd4 to 1ac0858 Compare February 6, 2017 11:01

filipesilva closed this Feb 14, 2017

filipesilva deleted the add-migration-docs branch February 14, 2017 19:11

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 11, 2019

docs: add move in/out docs #4400

docs: add move in/out docs #4400

Conversation

filipesilva commented Feb 3, 2017 • edited Loading

filipesilva commented Feb 3, 2017 • edited Loading

Brocco left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

filipesilva commented Feb 3, 2017

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wardbell left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

filipesilva commented Feb 3, 2017

Foxandxss left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

filipesilva commented Feb 6, 2017

filipesilva commented Feb 14, 2017

angular-automatic-lock-bot bot commented Sep 11, 2019

filipesilva commented Feb 3, 2017 •

edited

Loading

filipesilva commented Feb 3, 2017 •

edited

Loading