melcor76 / reactangular

How to use Angular Elements in React
14 stars 8 forks source link

angular 9 A platform with a different configuration has been created #2

Open alexan opened 4 years ago

alexan commented 4 years ago

I tried to rebuilding your example with angular 9 and @nrwl/workspace 9.4.2 I always got this issue

Uncaught Error: A platform with a different configuration has been created. Please destroy it first.

after running npm run update in your project the same error appeard in your repo as well. I could only fix this problem by following other examples which are always creating angular applications and compiling them down with ngx-build-plus or cat to one file

here is the application's angular.json which is used as a library (hack)

    "angular-lib-app": {
      "projectType": "application",
      "schematics": {
        "@nrwl/angular:component": {
          "style": "scss"
        }
      },
      "root": "apps/angular-lib-app",
      "sourceRoot": "apps/angular-lib-app/src",
      "prefix": "web-components",
      "architect": {
        "build": {
          "builder": "ngx-build-plus:browser",

I use this build command:

ng build angular-lib-app --single-bundle --prod --output-hashing none

during development:

ng build angular-lib-app --single-bundle --prod --output-hashing none --watch

and add to angular.json angularapp

"scripts": [
   "dist/apps/angular-lib-app/main.js"
] 

and reactapp

"scripts": [
    "node_modules/zone.js/dist/zone.js",
     "dist/apps/angular-lib-app/main.js"
 ]

do you have a working solution in angular 9 which is using a library build?

merry75 commented 4 years ago

this example is not working anymore with latest versions of nx and angular , would be nice if you could update it

adrian-ub commented 4 years ago

any solution to this error?

adrian-ub commented 4 years ago

I have added the following code and it has worked for me in Angular, but with React not

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { ElementsModule } from './lib/elements.module';

platformBrowserDynamic()
  .bootstrapModule(ElementsModule)
  .catch(err => console.error(err));

platformBrowserDynamic().destroy();

Error:

Uncaught Error: Can't resolve all parameters for ElementsModule: (?).