Closed RyannGalea closed 4 years ago
andygup
commented
4 years ago @RyannGalea How did you integrate webpack with the ArcGIS JS API? Do you have a small, focused github repo that reproduces the issue?
I recommend following the Angular 8 + webpack integration patterns demonstrated in this repo: https://github.com/Esri/angular-cli-esri-map/tree/arcgis-webpack-angular. If you have a different or custom pattern for integrating webpack my ability to help will be limited.
RyannGalea
commented
4 years ago @andygup I will try and create a smaller Angular app when I get a chance, but in terms of the implementation, I followed the demo repo and really it does not differ from that.
RyannGalea
commented
4 years ago I created a new Repo that recreates the issue, I actually cannot get it to run as I get the error right off the bat.
In my other startup app, I actually get it to run but it errors out when I try and use the services inside Auxillary routes - which I thought was pointing me in the right direction but here it clearly is something simple with Webpack but I have no experience with it. A very simple implementation in this repo.
Try to 'npm run dev' to get the console error. https://github.com/RyannGalea/esri-issue
andygup
commented
4 years ago @RyannGalea does your repo work with Angular 8? Angular 8 + AOT + webpack works in our example repo.
RyannGalea
commented
4 years ago @andygup, Not working on the 8 branch either.
I think the issue is I'm trying to avoid using LoadModules and it's just not ready yet? I thought I was able to do that with the Webpack implementation but it's really hard to find examples & unfortunately I don't really have a great grasp on how Webpack works alongside Angular.
For some reason, it partially works in my main app & I'm not sure why now. It seems to be an issue with the way it's bundling I think
andygup
commented
4 years ago Hey @RyannGalea, after glancing thru your code I suspected it might not work in Angular 8 either. I have two recommendations:
arcgis-webpack-angular repo and built up from that. Since arcgis-webpack-angular is working just fine you can use it as your initial application starting point.If you stray into fully unique and highly customized dojo/webpack territory then I won't be able to help much.
RyannGalea
commented
4 years ago @andygup
Thanks for the response.
I have done a lot of fishing around other repos and it seems changing my tsconfig.json target to es5 allows me to run my project without issue. So my question to you now does this give you any clues onto what may be happening?
tsconfig.json
{
"compileOnSave": false,
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@core/*": ["src/app/core/*"],
"@components/*": ["src/app/components/*"],
"@layout/*": ["src/app/layout/*"],
"@features/*": ["src/app/features/*"],
"@map/*": ["src/app/map/*"],
"@views/*": ["src/app/views/*"],
"@graphql": ["src/app/graphql/graphql"],
"@assets/*": ["src/assets/*"],
"@environment": ["src/environments/environment"]
},
"outDir": "./dist/out-tsc",
"sourceMap": true,
"declaration": false,
"module": "esnext",
"moduleResolution": "node",
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"importHelpers": true,
"target": "es5",
"typeRoots": [
"node_modules/@types"
],
"lib": [
"es2018",
"dom",
"esnext.asynciterable"
]
},
"angularCompilerOptions": {
"fullTemplateTypeCheck": true,
"strictInjectionParameters": true
}
}
Along with the latest packages:
"dependencies": {
"@angular/animations": "^9.0.0-rc.11",
"@angular/common": "^9.0.0-rc.11",
"@angular/core": "^9.0.0-rc.11",
"@angular/forms": "^9.0.0-rc.11",
"@angular/platform-browser": "^9.0.0-rc.11",
"@angular/platform-browser-dynamic": "^9.0.0-rc.11",
"@angular/router": "^9.0.0-rc.11",
"@arcgis/webpack-plugin": "^4.14.0",
"@ngneat/until-destroy": "7.1.0",
"apollo-angular": "^1.8.0",
"apollo-angular-link-http": "^1.9.0",
"apollo-cache-inmemory": "^1.6.5",
"apollo-client": "^2.6.8",
"apollo-link": "^1.2.13",
"apollo-link-ws": "^1.0.19",
"arcgis-js-api": "^4.15.0-next.20200128",
"core-js": "^3.6.4",
"dayjs": "^1.8.19",
"graphql": "^14.6.0",
"graphql-tag": "^2.10.1",
"lodash": "^4.17.15",
"mime-types": "^2.1.26",
"ngx-strongly-typed-forms": "^8.0.1",
"ngx-ui-switch": "^8.3.0",
"omit-deep": "^0.3.0",
"popmotion": "^8.7.1",
"rxjs": "~6.5.4",
"subscriptions-transport-ws": "^0.9.16",
"tslib": "^1.10.0",
"zone.js": "~0.10.2"
},
"devDependencies": {
"@angular-builders/custom-webpack": "^9.0.0-beta.0",
"@angular-devkit/build-angular": "~0.900.0-rc.9",
"@angular/cli": "~9.0.0-rc.9",
"@angular/compiler": "^9.0.0-rc.11",
"@angular/compiler-cli": "^9.0.0-rc.11",
"@angular/language-service": "^9.0.0-rc.11",
"@graphql-codegen/cli": "^1.11.2",
"@graphql-codegen/typescript": "^1.11.2",
"@graphql-codegen/typescript-apollo-angular": "^1.11.2",
"@graphql-codegen/typescript-operations": "^1.11.2",
"@types/arcgis-js-api": "^4.14.0",
"@types/jasmine": "~3.5.2",
"@types/jasminewd2": "~2.0.8",
"@types/lodash": "^4.14.149",
"@types/node": "^13.5.0",
"codelyzer": "^5.2.1",
"concurrently": "^5.1.0",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~4.4.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.1",
"karma-jasmine": "~3.1.0",
"karma-jasmine-html-reporter": "^1.5.1",
"protractor": "~5.4.2",
"resize-observer-polyfill": "^1.5.1",
"ts-node": "^8.6.2",
"tslint": "~6.0.0",
"typescript": "^3.6.4"
}
Hi Everyone,
I have an Angular 9 project where I branched off and converted Esri to the Webpack implementation and have now had good success with getting it working in my app.
But I am now having issues when I add certain services in different modules outside my Esri module, I get this error below. I have no idea how or why it is happening or how to resolve it. I was using the esri-loader package before and didn't have these issues.
The only thing I think is the AOT setting In Angular 9, I am on a RC version.