search

wailsapp / wails

Create beautiful applications using Go
https://wails.io
MIT License
25.34k stars 1.22k forks source link

Error running Wails build using Angular app #322

Closed nilopaim closed 4 years ago

nilopaim commented 4 years ago

I generated a new project using Wails v1.0.2-pre2 for an Angular app. The Angular app provided by Wails works like a charm.

Next step I tried to do is copy Angular app, made with Angular CLI 8.3.20, Webpack 4.39.2. to the frontend folder, substituing all content, for sure.

When I run wails build it gaves me the error

Wails v1.0.2-pre2 - Building Application > Ensuring frontend dependencies are up to date (This may take a while) \ Building frontend...Unknown option: '--single-bundle' Unknown option: 'true' Unknown option: '--bundle-styles' Unknown option: 'false' ! Building frontend... Error: exit status 1

Isn't that supposed to work? Did I miss something?

nilopaim commented 4 years ago

I removed all invalid options from project.json and it builds.

But when I run the application, a blank page is shown...

Calling my Angular app from browser, it works.

Any hint?

bh90210 commented 4 years ago

hey @nilopaim the reason you get a blank screen is that wails expects two single .css and .js files https://github.com/wailsapp/wails/blob/c506c9550667ff71bc5f5ab9cb3f8dba82f2c1cc/cmd/templates/angular-template/main.go.template#L14

if you generated your new project with angular cli the default settings won't work.

to achieve the same result without using wails custom angular template as a starting point you'd have to

  1. https://github.com/wailsapp/wails/blob/c506c9550667ff71bc5f5ab9cb3f8dba82f2c1cc/cmd/templates/angular-template/frontend/angular.json#L27 make the default css output styles.css
  2. run npx ng build --single-bundle true --output-hashing none --prod --bundle-styles false for reference https://github.com/wailsapp/wails/blob/c506c9550667ff71bc5f5ab9cb3f8dba82f2c1cc/cmd/templates/angular-template/template.json#L13
leaanthony commented 4 years ago

Thereason the templates are there are to provide known working configurations. The strategy should be to update/create a new template. We have some docs on that on the main site. If you see any gaps, let us know. If you get it working, feel free to create a PR! 👍

On Tue, 7 Jan 2020, 08:45 Byron, notifications@github.com wrote:

hey @nilopaim https://github.com/nilopaim the reason you get a blank screen is that wails expects two single .css and .js files (see https://github.com/wailsapp/wails/blob/c506c9550667ff71bc5f5ab9cb3f8dba82f2c1cc/cmd/templates/angular-template/main.go.template#L14 )

if you generated your new project with angular cli the default settings won't work.

to achieve the same result without using wails custom angular template as a starting point you'd have to a. https://github.com/wailsapp/wails/blob/c506c9550667ff71bc5f5ab9cb3f8dba82f2c1cc/cmd/templates/angular-template/frontend/angular.json#L26 make the default css output styles.css b. run npx ng build --single-bundle true --output-hashing none --prod --bundle-styles false (also change this here as well https://github.com/wailsapp/wails/blob/c506c9550667ff71bc5f5ab9cb3f8dba82f2c1cc/cmd/templates/angular-template/template.json#L13 )

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/wailsapp/wails/issues/322?email_source=notifications&email_token=AAO2SYCLLFF4MIOATYHPJ6LQ4ORAVA5CNFSM4KDJZRN2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEIG4RMY#issuecomment-571328691, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAO2SYE3R3VN5BMRSVDH2OTQ4ORAVANCNFSM4KDJZRNQ .

nilopaim commented 4 years ago

hey @nilopaim the reason you get a blank screen is that wails expects two single .css and .js files

https://github.com/wailsapp/wails/blob/c506c9550667ff71bc5f5ab9cb3f8dba82f2c1cc/cmd/templates/angular-template/main.go.template#L14

if you generated your new project with angular cli the default settings won't work.

to achieve the same result without using wails custom angular template as a starting point you'd have to

  1. https://github.com/wailsapp/wails/blob/c506c9550667ff71bc5f5ab9cb3f8dba82f2c1cc/cmd/templates/angular-template/frontend/angular.json#L27 make the default css output styles.css
  2. run npx ng build --single-bundle true --output-hashing none --prod --bundle-styles false also change this here as well https://github.com/wailsapp/wails/blob/c506c9550667ff71bc5f5ab9cb3f8dba82f2c1cc/cmd/templates/angular-template/template.json#L13

If I understood correctly, the needed alterations must be done on the Angular part, as the Angular CLI doesn't the option --single-bundled and bundle-styles.

Another alternative, that I think would be wonderful, would be wails accept more than just one .js file and more than just one .css file. Of course I have by no means profound knowledge of the internals of your tool, and I sincerely don't know it is feasible.

Currently I've no time available to dig your code and understand his internal working, but I would like to know more profoundly the tool. Maybe I can implement something on it,

But now I'm trying to modify some things on my Angular part to see what must be changed in order to make it works when using an external Angular app to glue with wails.

Anything I discover I will send you, including some documentation on how to make this scenario works.

Once more, wails is fantastic! Great job! And my intention is call wails on several projects I have scheduled in the future!

bh90210 commented 4 years ago

hmm my bad! for the extra options I used https://www.npmjs.com/package/ngx-build-plus https://github.com/wailsapp/wails/blob/c506c9550667ff71bc5f5ab9cb3f8dba82f2c1cc/cmd/templates/angular-template/frontend/package.json.template#L26 so you either copy the above template (meaning the dependencies) from wails or simply npm i ngx-build-plus and hopefully it will work.

bh90210 commented 4 years ago

let me know if you had any success or where you stuck to help you from there :+1:

it'll be good to solve this issue cause I can not remember everything by heart and obviously there's lack of documentation here. so when we get it resolved a small guide for angular (what we did - and why, what extra -besides standard angular- we use, how to update) is coming

nilopaim commented 4 years ago

@bh90210

No way to make it works.

What I tried:

Uncaught TypeError: Cannot read property '_' of undefined at Object.Init (init.js:18) at Module../src/main.ts (main.ts:16) at webpack_require (bootstrap:78) at Object.0 (main.ts:19) at webpack_require (bootstrap:78) at checkDeferredModules (bootstrap:45) at Array.webpackJsonpCallback [as push] (bootstrap:32) at main.js:1

I'll keep trying, but I'll be grateful for another hint or idea.

Thanks for your interest.

nilopaim commented 4 years ago

Forgot to say that my Angular app only talks with Go using HTTP/HTTPS requests. My Go backend is used by another applications.

nilopaim commented 4 years ago

Ok. I started to create a new template. Maybe I'll solve the problems, maybe not.

Anyway, I think it will be a way to understand better the tool.

nilopaim commented 4 years ago

After advancing on new template, how is wails supposed to works with standard Angular routing?

Using wails serve and opening Angular app using browser, the Angular routing works. But when I make wails build routing doesn't works.

In fact, I was trying to use wails as a substitute for the browser part only, as this is my current requirement.

Any hints?

leaanthony commented 4 years ago

It's not really designed for that. There are very specific requirements for the frontend that need to be adhered to: a js bundle with all assets encoded in it, and a CSS file. It's not meant to be a browser replacement. I'm sure it's possible to get angular routing working if you choose the right kind of routing. This works for React: https://wails.app/guides/reactrouter/

There will be many different configurations and people find out how to do things all the time, but we only officially support what's generated by the templates.

nilopaim commented 4 years ago

Thanks, @leaanthony.

I think that I need to investigate more. As I couldn't make my Angular app works, I'll try some alternatives (React and Vue). Maybe I'll make a rewrite of my app.

Again, congratulations for a great tool and thanks for the fantastic work of the team.

leaanthony commented 4 years ago

Thanks for the kind words. As this isn't a bug with Wails itself, I'm going to close the ticket. Feel free to reopen if you can find an issue. :+1: