Angular 14 - 什么方法是最佳编码实践 angular 组件

Question

I want to take various components from other apps I built (2-3 from one, 3-5 from other) in various tutorials and "import"/use them into an app I am building. (not a multi project workspace).

While I've seen many topics on this, none seem to answer my intermediate coding pallett, except this: Angular 2: How to include a component from one running Angular project to another Angular project? . The answer is vague.

What would the coding best practice be?

Code-CLI

Main app file structure (initial setup), highlighted components I wish to use:

Note: all done is VSCode & @angular/cli

Method 1

D:/app-root/app]$ ng g c [component-from-2nd-app

I would do this for each component. After that, go back and copy/paste each file...

This method seems wrong or tedious, or am I missing something?

Method 2

Instead of generating a new component, just copy and paste the components, then go into app.module, app.component, app-routing and up those pages to reflect the changes.

Alternate method?

I'm still learning angular and not totally familiar with 'libraries' - could/should/how would I "collect" components, put them in a library for use in any application I may do or currently am building?

Summarized questions

Which method is best coding practice to use/recreate/import components from another source? And what would the syntax look like?

Answer 1

A good practice is to use "Method one"

Once a component is created in your application, you need to migrate the code part only

Why?

You don't even care about imports of components created, Agular CLI will do for you. And you just need to focus on the reference project and move logic into the newly created component

This way you easily create components for the new project

Note: Might be you needed to re-write codes because say for example you want to import a component from angular2 to angular 14 then some code syntax might not be worked

I hope you are clear with my suggestion

Answer 2

In a simple case where you do not want (can not) to publish. Simplest thing you can do is create a component library project in a angular workspace. you can use this library project components within the workspace without publishing.

For this to work I guess your other projects should be within same workspace.

Read: https://angular.io/guide/creating-libraries

Is this change is not possible for current projects. For now in your case it is better to go with method 1.