angular: Angular elements in another angular project: Uncaught Error: Zone already loaded

I’m submitting a…

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
[ ] Other... Please describe:

Current behavior

I have created an angular 6 element and added the js files to another angular application and I get the Zone.js already loaded. I tried removing the polyfills from the element project, then it complain angular requires Zone.js in dev and --prod builds when the element is added to the host angular project.

Expected behavior

Should able to add elements to host projects by referring the element js files.

Minimal reproduction of the problem with instructions

1. create a angular element in project a
2. create a angular application project b
3. use angular element created in project a in project b

What is the motivation / use case for changing the behavior?

Idea of web component/angular elements is to import the components to other project and work seamlessly.

Environment

Angular version: 6.0.7


Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: XX  
- Platform:  

Others: