3

I created 2 different Angular projects in the following way:

$ ng new comp-a
$ ng new comp-b

Then, I modified each of them to look different and with each of them I ran the following command to build the corresponding HTML file with the necessary Javascript and CSS files:

$ ng build --base-href "./"

I noticed that on each index.html file generated on each project there are referenced the following Javascript files:

- runtime.js
- polyfills.js
- styles.js
- vendor.js
- main.js

What I want to do:

Create one common HTML file referencing the common files and renaming the non-common files to the component name, something like this:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Testing Angular Components</title>
    <base href="./">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>

<body>

    <comp-a></comp-a>
    <comp-b></comp-b>

    <script type="text/javascript" src="runtime.js"></script>
    <script type="text/javascript" src="polyfills.js"></script>
    <script type="text/javascript" src="styles.js"></script>
    <script type="text/javascript" src="vendor.js"></script>
    <script type="text/javascript" src="comp-a.js"></script>
    <script type="text/javascript" src="comp-b.js"></script>

</body>

</html>

Requirements of my goal:

  • I need to generate one Javascript file per each component.
  • I need to use them out of an Angular project like in a normal HTML page like on the example above. Of course I can add the other common Javascript files like on the example above.

Is this possible?

I did a try and didn't work. Maybe, if that's possible, I didn't in the right way. I have to say that I don't have too much experience with Angular.

Thanks!

davidesp
  • 3,743
  • 10
  • 39
  • 77
  • 2
    if you use angular 6 you should create those 2 components as libraries. The angular6 cli just got support for that. – toskv May 12 '18 at 21:43
  • what about if instead creating a library I create components like: `$ ng generate component modules/comp-a` and `$ ng generate component modules/comp-b`? – davidesp May 12 '18 at 22:44
  • it depends on your requirements. if the components are to be used only in this project then this is the way to do it. if the components need to be used in multiple projects it's best to extract them to their own library. – toskv May 12 '18 at 23:16
  • I want to use them like: ``, `` in a normal `html` file and not inside an `Angular` project (but of course, after compile them). The usage should be something similar to what I specified on my post above. – davidesp May 12 '18 at 23:54
  • if you want to use them outside of angular projects you don't want angular components. – toskv May 13 '18 at 09:54
  • if you want generic components that are usable with any framework look into web components https://developer.mozilla.org/en-US/docs/Web/Web_Components – toskv May 13 '18 at 09:56
  • this might also be of interest (or a possible duplicate) https://stackoverflow.com/questions/40226449/does-angular2-use-web-components – toskv May 13 '18 at 10:19

1 Answers1

4

Two Angular Components in a single Angular Application is what you need.

To demonstrate, lets create a new Angular Application:

ng new my-app

Go to Angular Application folder:

cd my-app

Notice the index.html file that has just been created. Common HTML that you mentioned above can reside in this index.html file. Just preserve <app-root></app-root> tags and everything else can be replaced as you wish.

Then, create two Angular Components:

ng generate component comp1
ng generate component comp2

Edit inside app.component.html file so that this Bootstrap Component would wrap these two recently created Angular Components:

app.component.html:

<app-comp1></app-comp1>
<app-comp2></app-comp2>

Test your Angular Application:

ng serve --open

You should be seeing something like this:

comp1 works! comp2 works!

Omer Gurarslan
  • 979
  • 11
  • 15
  • After that, can I use them like: ``, `` in a normal `html` file and not inside an `Angular` project (but of course, after compile them), like to what I specified on my post above? – davidesp May 12 '18 at 23:55