Error message when building with latest version of angular

[that70schris]

package.json:

{
  "dependencies": {
    "@angular-builders/custom-webpack": "11.0.0",
    "@angular-devkit/build-angular": "0.1100.6",
    "@angular/animations": "11.0.7",
    "@angular/cdk": "11.0.3",
    "@angular/cli": "11.0.6",
    "@angular/common": "11.0.7",
    "@angular/compiler": "11.0.7",
    "@angular/compiler-cli": "11.0.7",
    "@angular/core": "11.0.7",
    "@angular/forms": "11.0.7",
    "@angular/material": "11.0.3",
    "@angular/platform-browser": "11.0.7",
    "@angular/platform-browser-dynamic": "11.0.7",
    "@angular/platform-server": "11.0.7",
    "@angular/router": "11.0.7",
    "@builder.io/angular": "1.1.20",
    "@nguniversal/builders": "11.0.1",
    "@nguniversal/express-engine": "11.0.1",
    "@sentry/browser": "5.29.2",
    "@types/facebook-pixel": "0.0.20",
    "@types/googlemaps": "3.43.1",
    "@types/node": "14.14.20",
    "@types/segment-analytics": "0.0.33",
    "angular2-text-mask": "9.0.0",
    "branch-sdk": "2.57.1",
    "core-js": "3.8.2",
    "crypto-js": "4.0.0",
    "dd-trace": "0.29.2",
    "emoji-flags": "1.3.0",
    "express": "4.17.1",
    "fs-extra": "9.0.1",
    "fuse.js": "6.4.6",
    "lodash.mergewith": "4.6.2",
    "lodash.pick": "4.4.0",
    "lottie-web": "5.7.5",
    "mock-express-request": "0.2.2",
    "mock-express-response": "0.3.0",
    "nginx-conf": "2.0.0",
    "ngx-cookie": "5.0.0",
    "ngx-lottie": "6.4.0",
    "ngx-uploader": "11.0.0",
    "numeral": "2.0.6",
    "request-promise": "4.2.5",
    "robotstxt-webpack-plugin": "7.0.0",
    "rxjs": "6.6.3",
    "sass": "1.32.2",
    "sitemap": "6.3.5",
    "smart-app-banner": "2.0.0",
    "text-mask-addons": "3.8.0",
    "tlds": "1.216.0",
    "ts-md5": "1.2.7",
    "ts-node": "9.1.1",
    "tslib": "2.1.0",
    "typescript": "4.0.x",
    "webpack-merge": "5.7.3",
    "zone.js": "0.10.x"
  },
  "devDependencies": {
    "@types/express": "4.17.9",
    "@types/fs-extra": "9.0.6",
    "@types/jasmine": "3.6.2",
    "@types/lodash": "4.14.167",
    "@types/numeral": "0.0.29",
    "@typescript-eslint/eslint-plugin": "4.12.0",
    "@typescript-eslint/parser": "4.12.0",
    "commander": "6.2.1",
    "eslint": "7.17.0",
    "husky": "4.3.7",
    "jasmine-spec-reporter": "6.0.0",
    "lint-staged": "10.5.3",
    "prettier": "2.2.1",
    "protractor": "7.0.0",
    "stylelint": "13.8.0",
    "stylelint-order": "4.1.0",
    "stylelint-prettier": "1.1.2",
    "stylelint-scss": "3.18.0",
    "tslint": "6.1.3",
    "webpack-bundle-analyzer": "4.3.0",
    "yaml": "1.10.0"
  }
}

error message:

Error: ./node_modules/@builder.io/angular/node_modules/@angular/platform-browser/__ivy_ngcc__/fesm2015/platform-browser.js 4409:15-24
"export 'ɵAPP_ROOT' was not found in '@angular/core'

Error: ./node_modules/@builder.io/angular/node_modules/@angular/platform-browser/__ivy_ngcc__/fesm2015/platform-browser.js 4218:23-38
"export 'ɵ_sanitizeStyle' was not found in '@angular/core'

[steve8708]

howdy @that70schris !

looks like a duplicate copy of @angular/platform-browser is being loaded (since you can see the packages is loaded within the node_modules for @builder.io/angular and not the top level one that should be the shared one)

what's weird is that should only be a dev dependency for our packages, so shoudn't be installed with it, and the current version we specify is super loose, just >= 2, so really strange it's loaded twice

[that70schris]

Hey Steve!

yea, it works fine under angular 8. I've removed node_modules and reinstalled a couple of times. can you think of anything else I should try?

[shyam-builder]

Hi @that70schris , we just released a new version of the angular plugin for Builder.IO (v2.0.2)

Can you give this a whirl and let us know if you are seeing similar issues still? You can also take a look at the examples folder to see a working version with Angular v13