0

I have 2 separated Angular projects. For each of them, I run the following CLI command:

ng build --prod --output-hashing=none

It creates the following files for each project:

runtime.js polyfills.js main.js

Now I want to import the projects into another project, which is a simple javascript project (not Angular project).

I know that the order is important and that runtime.js and polyfills.js appear twice. So I made sure that these files are the same (because I use the same Angular version in both projects).

The imports in the simple javascript project look something like this:

<script src="runtime.js"></script>
<script src="polyfills.js"></script>
<script src="main1.js"></script>
<script src="main2.js"></script>

Unfortunately, only one of the projects seems to work this way (and there are no exceptions). If I'll import only main1.js or only main2.js they will work properly.

I guess the problem is the dependency libraries I use in each project, that maybe override each other, but I don't know what I can do about it.

UPDATE:

Not sure if it's relevant, but in each Angular project, I use @angular/elements in order to publish the components I need. something like this:

export class AppModule {
  constructor(private injector: Injector) {
    const elem = createCustomElement(MyFirstComponent, { injector });
    customElements.define('my-first-element', elem);
  }
  ngDoBootstrap() {}
}

Then in the javascript project, I use it like this:

var elem1 = document.createElement('my-first-element');
container.append(elem1);
var elem2 = document.createElement('my-second-element');
container.append(elem2);
EDalet
  • 23
  • 5

1 Answers1

0

Check the <app-root></app-root> tag in your index.html. You may need 2 different selector for your AppComponent:

// app.component.ts for the first project
selector: 'app-root-one',


// app.component.ts for the second project
selector: 'app-root-two',
Sandman
  • 1,480
  • 7
  • 23