Angular-cli: Where does ng serve files go?

[MickL]

OS

macOS Sierra

Version

angular-cli: 1.0.0-beta.24

Question

Using ng serve i don't see any directory created. Where do the files go that localhost:4200 links to?

Background

Scss compilation (e.g. with Boostrap) is veeeery slow. So i wanted to use gulp to compile scss but i need to know in which path i should save the output file.

I already tried to change outDir in angular-cli.json and added "output-path": "dist" in environment.ts but still i dont see any folder created on ng serve. It only affects ng build.

[zackarychapple]

ng serve does in memory and does not write to disk. You need to do ng build --watch to get it to write to disk and also update with changes. Also if you switch the project to be scss in the angular-cli.json you can put the scss files directly in the components, I have not had any performance issues.

[MickL]

Thanks that looks neat! But the server is not running then right? Thats crucial.

To reproduce just create a new project and try to compile it with bootstrap:

1. ng new sassy-project --style=sass
2. npm install bootstrap-sass --save-dev
3. Add import to style.scss: @import '../node_modules/bootstrap/scss/bootstrap';
4. ng serve
5. Try adding something into styles.scss, for example: h1 { color:red; }
6. Reload takes 5-10s on my machine (latest iMac) which is massive for a frontend developer

Btw this is nothing new e.g. the regular ruby compiler (gem install sass) takes similiar times, while Gulp uses a compiler written in C (called libsass) which super fast.

[clydin]

libsass is currently being used. There is an ongoing effort to improve the speed overall.
Also, the first reload is always longer than subsequent reloads. Still takes several seconds though.

[zackarychapple]

@MickL ahh missed that part. We use a node server where I work to serve the static files for everything but our component lib. Our component lib takes 2552-2745ms to build using bootstrap 4 alpha 5 and cli.24 on my MBP.

[MickL]

Thats still a lot though. A frontend-developer probably has to see changes immediately(<1sec). Libsass does it in some ms. Is there any chance to use gulp with ng serve since i cant access the server dir?

[zackarychapple]

I was using compass before and ng serve detected the file changes without issue. Try putting the scss next to the css file and writing to the imported css file (in source).

[MickL]

Thats an option! Using angular cli with normal css and the styles.css is the compiled file by gulp/grunt/compass/whatever with inline sourcemaps.

[CarreraPHP]

@MickL , if viewEncapsulation is irrelevant in your case. Then u can have a separate npm module with gulp to compile *.scss files to a css file and copy the same into the angular-cli project and include the same in the styles array of the angular-cli.json file. I believe u can implement everything u need using the gulpfile.js and if necessary sh or bat file to copy with the angular-cli project.

[hansl]

So the original issue: ng serve is all in memory, like Zachary said. If you want files you need to run ng build.

What's the current issue? If you build SCSS and output the CSS somewhere and you link it, it will be included in your page. I don't see an issue outside of the original. Closing this as WAI; build times are always worked on and improved.

[MickL]

So the solution including the compiled styles into angular-cli.json doesnt work. Yes Gulp is compiling fine, but then again there is a webpack rebuild ofcourse.

Still not sure how to add files to dist/localhost on ng serve.

There should be a folder called public maybe. But if then it should be a symlink or something so files are available in realtime on localhost.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}