1

I find myself in a situation where I want/have to edit a template of a component, package imported by npm into my angular2 project.

I know that editing it inside /node_modules folder is a big 'no-no'. I would lose all my edits on 'npm install' or i have to add the whole /node_modules folder to my GIT project.

So how should i tackle this challenge.

In java world, I would extend the class, add and/or override stuff, and use my own 'child' class where I need it.

But what about angular 2 component templates??...

EDIT:

To clarify my comment @lexith:

If you worked with Angular2 you should know what a component template is. The file with the same name but with .HTML extension. Now if I add a component through npm (ex.: ng-bootstrap, ngx-uploader....), and I need to edit the template or maybe the behavior(.ts file) a bit, how should one tackle that kind of challenge.

I could provide the code and specific package name, but how would this help? With the question, I try to understand the concept and implement it in several situations.

EDIT2:

I found a similar question here on SO. And I think I will implement the solution as proposed there.

Fork => Edit => Push => Import (from my git fork).`

But what a pain in the ass just to rearrange some HTML tags. Is this the only way to Rome?

Cœur
  • 37,241
  • 25
  • 195
  • 267
VikingCode
  • 1,022
  • 1
  • 7
  • 20
  • 1
    Can you be more specific? What package, what template, what should be changed? – malifa Jun 28 '17 at 12:36
  • No, I can not. It's a general question concerning a specific framework. A question about how one should tackle a certain situation with code. – VikingCode Jun 28 '17 at 12:46
  • Maybe take a look at the css in that package, and override those css styles you want in your project. No idea if it works, just a wild guess :) – AT82 Jun 28 '17 at 13:21
  • that was my first thought too but in my case, I need to rearrange class names and add some HTML structure tags. – VikingCode Jun 28 '17 at 13:26
  • As @lexith said, you need to be more specific. I rewrited the mermaidJS package to cope with my needs, and I did it in a simple angular service that I can export everywhere. But it's **only** for mermaidJS. So yes, be more specific, even if it's a general question. –  Jun 28 '17 at 13:44
  • i asked for a specific usecase to give a specific answer. I work with angular 2 a lot and a external template.html isn't the only way a template is provided inside a package. thats basically the reason i wanted you to be more specific. Actually it's not even a angular "thing". You have these kinds of "problems" with many packages u use but want to manipulate. – malifa Jun 28 '17 at 13:47

1 Answers1

1

As you stated in your edit to your question: true, to open a new git repo just for some changes and to pull it from there makes....absolutely not much sense. Not if your changes affect only your current project. But the general approach is basically correct. I just wouldn't use git for it:

Pull the package once (but don't save it as dependency) make your changes and create a .tgz file. Put this file somewhere in your project (for example node_modules_static) and reference it in your package.json like this:

dependencies": {
    "my-manipulated-module": "file:./node_modules_static/my-manipulated-module.tgz"
}

Of course, in a production environment, you could / would probably host this package somewhere on a server you can access, manage your version there, maybe update / and adjust it without having to touch your specific project every time.

Now, some may argue that the original module could be updated and the changes wouldn't be reflected in your project, because you're using an own copy... But in reality there is no way to handle self-updating modules in a huge project anyway, especially if you make changes to them.

Of course, if we would talk about javascript-only changes, you could always create an extension, which overrides certain parts of the module, but for templates, i probably would go with this.

malifa
  • 8,025
  • 2
  • 42
  • 57