[ANGULAR] Gantt won't integrate with application

[saki]

We must be doing something different – I've re-tested it and it worked. What can be different is version of nodejs, mine is v10.20.1, or that you work in a directory that already contains some project (or parent contains it or contains node_modules, package.json). For testing I've created a clean directory (tmp2 on the video) and copied only Gantt trial and test app in it. BryntumTestApp.zip is that what I've posted above.. See the video:

build-angular.gif (7.23 MiB) Viewed 2206 times

[Obould]

Saki,

I got the samples working perfectly. Thank you for those. I think I found out the issue why it wasn't working on my end. With the project I sent you we use Visual Studio to start our app besides running npm start from the console to start angular cli. When I take that sample application you sent me(that works now) and run it through visual studio and have npm start running on a command window. I get the same error as before. Do you or anyone of your fellow developers use visual studio to try this out and see if they can replicate this error?

Thank you

[pmiklashevich]

Hello,

I don't use Visual Studio on a daily basis. I downloaded the zip from this post viewtopic.php?f=52&t=13918#p72102 and unzipped it next to the bryntum distribution. I installed Visual Studio and opened your project. It required some .NET packages. I installed everything and restarted. Then I hit the build button at the top left corner and got an error that bryntum packages cannot be found. I opened ClientApp/package.json and adjusted paths. Hit the button again and it was built with 0 errors.

Снимок экрана 2020-05-20 в 14.03.58.png (1.63 MiB) Viewed 2197 times

But unfortunately your application is not runnable as is. When VS opened a browser tab "https://localhost:5001/" I got this error:

Снимок экрана 2020-05-20 в 14.19.33.png (308.08 KiB) Viewed 2197 times

Could you please confirm you have no issues with building Bryntum products and you don't see any errors related to Bryntum products? Application problem cannot be handled in scope of the forum support. If you need an assistance with application issues, please request our professional services: https://www.bryntum.com/services/

Best wishes,
Pavel

[Maxim Gorkovsky]

I tried this in visual studio 2019. I see bunch of errors when trying to run the app. First one is same as what you see - wrong MIME type for CSS.

img.png (64.61 KiB) Viewed 2192 times

When I run port 7200 directly, MIME error is not reproducible. This suggests smth is wrong with proxy.

img1.png (89.17 KiB) Viewed 2192 times

[Obould]

@pmiklashevich ,

I believe your not running angular cli from the command line using, "npm start" and that will allow the application to run.

@Maxim Gorkovsky,

The other errors you see besides the mime type are just data errors and you can ignore them. If you want to try it without those errors, download the first zip I posted, not the one Saki posted.

I will look into the proxy stuff today and see if I can find something.

Thanks!

[Obould]

So another question, if I just add the "build" folder with that css file included I can get it to work, however besides that I am trying to use the gantt into our actual application so I can start playing around with it. When I take the folders:

gantt-2.1.2-trial\build
gantt-2.1.2-trial\examples\angular\_shared\dist\bryntum-angular-shared

Just those two folders and put them in a different path and do:

npm i 3rdParty\build
npm i 3rdParty\bryntum-angular-shared
npm i

They import fine but when running:

npm start

I get the errors below... I feel like there's some hardcoded stuff going on in Bryntum Gantt. I would love to have a phone call about this to figure out whats the issue as we are trying to evaluate before purchasing an OEM license.

ERROR in C:/_git/ProductName/3rdParty/bryntum-angular-shared/fesm2015/bryntum-angular-shared.js
Module not found: Error: Can't resolve '@angular/core' in 'C:\_git\ProductName\3rdParty\bryntum-angular-shared\fesm2015'
ERROR in C:/_git/ProductName/3rdParty/bryntum-angular-shared/fesm2015/bryntum-angular-shared.js
Module not found: Error: Can't resolve 'bryntum-gantt/gantt.umd.js' in 'C:\_git\ProductName\3rdParty\bryntum-angular-shared\fesm2015'

If i just use the paths from the folders below, everything works, but I don't want all the examples and everything checked into our git repo. I would think I can just take the actual package folder and it will work:

gantt-2.1.2-trial\build
gantt-2.1.2-trial\examples\angular\_shared\dist\bryntum-angular-shared

[pmiklashevich]

I think I know what the problem is. Angular shared package depends on gantt build. Please look at:
Gantt/examples/angular/_shared/package.json

"bryntum-gantt": "file:../../../build",

This is relative path. So either you need to keep the nested folders, or copy shared sources the way you want, adjust paths, run
'npm i' and 'npm run build' to rebuild shared package and then this should work the way you want.

[Obould]

Pavel,

I tried what you said but then I have the issue as I posted before. Any thoughts on that?

Thanks!

[pmiklashevich]

Ok, let's try to replicate your issue, and reduce your testcase to minimal application code. For that I:
- Created a new folder 'testcase'
- Created '3rdParty' folder in 'testcase'
- Downloaded gantt trial
- Copied /examples/angular/timeranges to 'testcase'
- Copied /examples/angular/_shared to '3rdParty'
- Copied /build to '3rdParty'
Is this structure reflects what you're trying to achieve in your application?
- In testcase/3rdParty/_shared updated package.json file

"bryntum-gantt": "file:../build",

- In testcase/3rdParty/_shared run 'npm i' and 'npm run build'
- In testcase/timeranges updated package.json file, made it simpler, removed 'bryntum-resources' since we hadn't copied 'gantt-2.1.4-trial/examples/_shared', updated paths, removed pre/post installation.

{
  "name": "timeranges",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "test": "ng test",
    "lint": "ng lint"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~8.2.14",
    "@angular/common": "~8.2.14",
    "@angular/compiler": "~8.2.14",
    "@angular/core": "~8.2.14",
    "@angular/forms": "~8.2.14",
    "@angular/platform-browser": "~8.2.14",
    "@angular/platform-browser-dynamic": "~8.2.14",
    "@angular/router": "~8.2.14",
    "bryntum-angular-shared": "file:../3rdParty/_shared/dist/bryntum-angular-shared",
    "bryntum-gantt": "file:../3rdParty/build",
    "rxjs": "~6.4.0",
    "tslib": "~1.10.0",
    "zone.js": "~0.9.1"
  },

- In timeranges/src/app updated app.component.scss and removed reference to 'bryntum-resources' package

 header {
    padding             : 2em .5em 2em 4em;
    background          : #2567C8;

- In testcase/timeranges run 'npm i' and 'npm run start'
- Go to https://localhost:4200/ and make sure it works

Снимок экрана 2020-05-20 в 22.46.23.png (853.8 KiB) Viewed 2184 times

There is no errors in console. Styles are there.
Theme is imported in the demo. If you check timeranges/src/styles.scss, you'll see:

/**
 *- Application global styles
 */
@import "bryntum-gantt/gantt.stockholm.css";

Could you please confirm it works for you? Did I replicate your environment correct? If not, please let me know what is missing. Let's create a testcase with minimal code to understand what is wrong there. Please submit a new testcase which shows the issue and explain what errors you see there.

I'm attaching the project I created for reference, so you can compare the file structure and modifications I did in the files. I removed node_modules and dist, so to run it please:
- In testcase/3rdParty/_shared run 'npm i' and 'npm run build'
- In testcase/timeranges run 'npm i' and 'npm run start'

'npm run build' also works, just favicon is missing

Снимок экрана 2020-05-20 в 23.12.04.png (839.4 KiB) Viewed 2184 times

Hope this will help!

Cheers,
Pavel

[pmiklashevich]

Hello again,

Today we discussed the issues again and created a new angular project using Visual Studio wizard and our sources which I posted yesterday. Let me show you the steps I did. You can find a zip with the sources at the end of this post, just need to go to angular-vs/3rdParty/_shared and run "npm i" and "npm run build", then open the project in Visual Studio and click on "play" button on the top left corner, using Debug -> Google Chrome option. So here are the steps:
1. Create a new project:

Снимок экрана 2020-05-21 в 12.22.50.png (796.43 KiB) Viewed 2174 times

Снимок экрана 2020-05-21 в 12.23.07.png (643.01 KiB) Viewed 2174 times

Снимок экрана 2020-05-21 в 12.23.40.png (635.38 KiB) Viewed 2174 times

2. When project was generated I created '3rdParty' folder on the project level, inside 'angular-vs' outer folder.
3. Copied to the '3rdParty' our 'build' folder and '_shared' folder.
4. Removed all content from angular-vs/angular-vs/ClientApp and copied there everything from 'timeranges' folder.
5. Adjusted paths in ClientApp/package.json
6. Open angular-vs/3rdParty/_shared in a terminal and run "npm i" and "npm run build"
7. In Visual Studio I clicked Run button at the top left corner and it started building the ClientApp together with the .Net application.

Снимок экрана 2020-05-21 в 12.28.57.png (834.42 KiB) Viewed 2174 times

It took VS some time to build everything. It finished with 0 warnings and 0 errors. Then automatically started application on default port and opened a new tab in Chrome.

Снимок экрана 2020-05-21 в 12.30.22.png (850.37 KiB) Viewed 2174 times

As you can see there is no errors in console and application works fine. There might be some issues with production build of cause because the timerange demo has to be asjusted more carefully to be renamed to "ClientApp" instead of "timeranges", but for development it runs perfectly.

Could you please confirm you can get Bryntum Gantt working under Visual Studio?

Are you able to get your project running? If not, please modify the demo in the post so we can see how our project is different from your project.

Best regards,
Pavel