Webpack build system upgrade tracker #1356

filipesilva · 2016-07-15T20:40:33Z

RobCannon · 2016-07-16T15:06:46Z

I would love to help with this. Is there more detail on these action items?

cortopy · 2016-07-16T15:55:00Z

Me too. Right now, I have to mix&match angular-cli with my webpack config. I would like to help in order to get this feature released

filipesilva · 2016-07-16T20:13:48Z

Hi @RobCannon and @cortopy, we already have some people assigned to these and are working on getting them done as fast as possible.

I don't think more help would be helpful right now though... too many cooks in the kitchen so to say, but thank you for offering!

yusijs · 2016-07-16T20:40:53Z

Does this mean you're leaving SystemJS behind? And will you provide an upgrade route in that case through ng upgrade or similar? I've built a fairly large app with the cli now, and I'd rather not scrap it.. :3

filipesilva · 2016-07-16T23:45:17Z

@yusijs there will be an upgrade route, yes. We will document it.

RobCannon · 2016-07-17T02:40:55Z

Can you tell me to load a .scss file? I see there is sass support built in and I am able to get .scss files to process for individual components, but I can't figure out how to load a master style for the whole web app.

TheLarkInn · 2016-07-17T18:12:41Z

3 off the list thanks to #1359

filipesilva · 2016-07-17T22:47:09Z

@RobCannon there is no such functionality present in angular-cli. You'll have to use standard scss functionality for that.

hansl · 2016-07-19T18:38:19Z

@filipesilva, @TheLarkInn: We're punting lazy loading until the webpack branch makes it to master. It's a difficult problem with many moving pieces and we will need a proper prototyping and design phase to solve it.

tapas4java · 2016-07-20T01:11:20Z

Great work @filipesilva and @TheLarkInn. I can confirm SCSS is working out of the box with --style scss flag. ng test and ng build --prod broken though

filipesilva · 2016-07-20T01:20:08Z

@tapas4java broken? How? Tell me more. It's working in our tests. Did you run ng init to update your files?

tapas4java · 2016-07-20T01:56:22Z

@filipesilva I have created new project and ran ng test

Tapass-MacBook-Pro:digiadmin tapas-pc$ ng test
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.

ERROR in Entry module not found: Error: Can't resolve '/Users/tapas-pc/Documents/Work/digiadmin/undefined/test.ts' in '/Users/tapas-pc/Documents/Work/OpenSourceWork/Angular/angular-cli/addon/ng2/models'

ERROR in Entry module not found: Error: Can't resolve 'sourcemap-istanbul-instrumenter-loader' in '/Users/tapas-pc/Documents/Work/OpenSourceWork/Angular/angular-cli/addon/ng2/models'

filipesilva · 2016-07-20T02:04:47Z

@tapas4java looks like missing dependencies. Did you npm install on the webpack branch after checking it out? I know that these dependencies work, because our CI installs a project from scratch.

tapas4java · 2016-07-20T02:13:30Z

Thanks @filipesilva ....After npm install tests are working fine. But still getting below message even though it is not blocking anything. Not sure what is that undefined in the path.

ERROR in Entry module not found: Error: Can't resolve '/Users/tapas-pc/Documents/Work/digiadmin/undefined/test.ts' in '/Users/tapas-pc/Documents/Work/OpenSourceWork/Angular/angular-cli/addon/ng2/models'

TheLarkInn · 2016-07-20T03:09:39Z

Is this the only command that fails like this?

filipesilva · 2016-07-20T03:10:14Z

@tapas4java can you show me your angular-cli.json?

filipesilva · 2016-07-20T03:28:30Z

@tapas4java fixed in #1387

tapas4java · 2016-07-20T15:33:31Z

Thanks @filipesilva, ng test is fine now. However ng serve -prod throwing bunch of warnings in terminal and not able to load the app on browser.

WARNING in CachePlugin - Cache cannot be used because of: DedupePlugin

WARNING in main.b9fc88ca36935dab7714.bundle.js from UglifyJs
Side effects in initialization of unused variable TypeModifier [main.b9fc88ca36935dab7714.bundle.js:640,4]
Side effects in initialization of unused variable BuiltinMethod [main.b9fc88ca36935dab7714.bundle.js:896,4]
Side effects in initialization of unused variable StmtModifier [main.b9fc88ca36935dab7714.bundle.js:1130,4]
Condition left of && always true [main.b9fc88ca36935dab7714.bundle.js:3766,17]
Side effects in initialization of unused variable ProviderAstType [main.b9fc88ca36935dab7714.bundle.js:5094,4]
Side effects in initialization of unused variable PropertyBindingType [main.b9fc88ca36935dab7714.bundle.js:5135,4]
Side effects in initialization of unused variable freeExports [main.b9fc88ca36935dab7714.bundle.js:8040,4]
Side effects in initialization of unused variable freeModule [main.b9fc88ca36935dab7714.bundle.js:8041,4]
Non-strict equality against boolean: != true [main.b9fc88ca36935dab7714.bundle.js:9594,15]
Side effects in initialization of unused variable ViewType [main.b9fc88ca36935dab7714.bundle.js:11402,4]
Side effects in initialization of unused variable HTMLCollection [main.b9fc88ca36935dab7714.bundle.js:13888,4]
Side effects in initialization of unused variable shim [main.b9fc88ca36935dab7714.bundle.js:17207,12]
Dropping unused variable SAFE_SRCSET_PATTERN [main.b9fc88ca36935dab7714.bundle.js:20936,4]
Side effects in initialization of unused variable matchs [main.b9fc88ca36935dab7714.bundle.js:22537,12]
Dropping unused variable __unused [main.b9fc88ca36935dab7714.bundle.js:22778,4]
Side effects in initialization of unused variable depTemplates [main.b9fc88ca36935dab7714.bundle.js:24737,12]
Dropping unused variable EVENT [main.b9fc88ca36935dab7714.bundle.js:24880,4]
Dropping unused variable __unused [main.b9fc88ca36935dab7714.bundle.js:28456,4]
Side effects in initialization of unused variable SecurityContext [main.b9fc88ca36935dab7714.bundle.js:32483,4]
Condition always true [main.b9fc88ca36935dab7714.bundle.js:34846,4]
Dropping unreachable code [main.b9fc88ca36935dab7714.bundle.js:34849,7]
Declarations in unreachable code! [main.b9fc88ca36935dab7714.bundle.js:34851,1]
Dropping unused variable scriptElements [main.b9fc88ca36935dab7714.bundle.js:34851,5]
Dropping unused variable scriptHost [main.b9fc88ca36935dab7714.bundle.js:34852,5]
Dropping unused function _fetchSylesFromState [main.b9fc88ca36935dab7714.bundle.js:35737,9]
Dropping unreachable code [main.b9fc88ca36935dab7714.bundle.js:37186,8]
Declarations in unreachable code! [main.b9fc88ca36935dab7714.bundle.js:37186,8]
Dropping unreachable code [main.b9fc88ca36935dab7714.bundle.js:37186,8]
Declarations in unreachable code! [main.b9fc88ca36935dab7714.bundle.js:37186,8]
Dropping unused variable renderMethod [main.b9fc88ca36935dab7714.bundle.js:40470,12]
Dropping unused variable __unused [main.b9fc88ca36935dab7714.bundle.js:41193,4]
Dropping unused variable __unused [main.b9fc88ca36935dab7714.bundle.js:43260,4]
Condition always true [main.b9fc88ca36935dab7714.bundle.js:47793,2]
Dropping unreachable code [main.b9fc88ca36935dab7714.bundle.js:47798,8]
Side effects in initialization of unused variable freeExports [main.b9fc88ca36935dab7714.bundle.js:47287,5]
Side effects in initialization of unused variable freeModule [main.b9fc88ca36935dab7714.bundle.js:47289,5]
Dropping unused variable key [main.b9fc88ca36935dab7714.bundle.js:47338,1]

WARNING in polyfills.7f6ab7464cbf8b193c44.bundle.js from UglifyJs
Condition left of || always false [polyfills.7f6ab7464cbf8b193c44.bundle.js:3431,63]
Condition left of || always false [polyfills.7f6ab7464cbf8b193c44.bundle.js:3432,62]
Dropping side-effect-free statement [polyfills.7f6ab7464cbf8b193c44.bundle.js:3460,21]
Side effects in initialization of unused variable Zone [polyfills.7f6ab7464cbf8b193c44.bundle.js:2983,5]

Getting below error in browser console:

main.b9fc88c….bundle.js:2 Uncaught ReferenceError: process is not defined

TheLarkInn · 2016-07-24T18:11:37Z

@filipesilva I have a feature branch on my local that fixes this one specific feature. I just need to run tests and then setup a PR. If not today tomorrow for sure.

TheLarkInn · 2016-07-24T18:12:53Z

(That.is the host) we just need to set the host flag so 1. It defaults to 'localhost' and like above, set commandOptions.host to replace anywhere is serve.ts where 'localhost' is referenced.

frederikschubert · 2016-07-24T18:15:07Z

@TheLarkInn Thinking more about it I don't think that a silenceWarnings flag would be needed as one rarely runs ng serve --prod for development purposes where these warnings could be distracting.
So forget my remark and continue the great work 👍

mmrath · 2016-07-25T10:22:10Z

@filipesilva @TheLarkInn Do you think webpack branch is ready to be used. I know this branch is not stable enough, which is OK. Apart from stability and minor new features, are there any major changes planned?

Also how do I use global SASS files with this branch?

filipesilva · 2016-07-25T11:12:27Z

@mmrath this branch is not ready to be used. It is still under active development and we give no guarantees over what might or might not be changed. Until it goes into master it's not the official branch and there should be no expectation of support being given for it.

mmrath · 2016-07-25T11:38:44Z

@filipesilva Thanks for your reply.
Also I get the following warning when I used ngrx. Thought i just add it here, in case you already know it.

WARNING in .//@ngrx/core/SyncSubject.js
Cannot find source file '../../lib/SyncSubject.ts': Error: Can't resolve '../../lib/SyncSubject.ts' in '/Users/murali/Projects/dashboard-ui/node_modules/@ngrx/core'
@ .//@ngrx/store/dispatcher.js 7:20-53
@ ./~/@ngrx/store/index.js
@ ./src/app/shared/api/http-interceptor.ts
@ ./src/platform/browser-providers.ts
@ ./src/platform/browser.ts
@ ./src/main.ts
@ multi main

Brocco · 2016-07-25T16:07:32Z

When I create a new project ng new foo I am not getting an initial commit on the repo instead all of the files are staged, but not actually committed.

sunild · 2016-07-25T17:18:20Z

Adding a question (from #1436) about fonts: Can the web pack config handle fonts from third party libs like Bootstrap in a generic way, or should there be a way for the user to specify a custom configuration for things like this? Or perhaps is this just something the developer needs to configure properly in their project?

Somewhat of a web pack newbie, apologies if this seems like a basic question :)

filipesilva · 2016-07-25T19:48:33Z

@mmrath I have not seen that error happen, no. Can you give me some reproduction steps so I can try to debug it?

ivoviz · 2016-07-25T19:55:20Z

@filipesilva It happens with angularfire2 as well, see: angular/angularfire#376.

filipesilva · 2016-07-25T20:03:01Z

So it's a typescript problem? Hm, odd. @TheLarkInn I guess we can update to TS2.0?

I'd still like to know more about the issue and how to reproduce it... angularfire2 doesn't even use TS2.0 itself, so I find it hard to believe it's a TS bug.

ivoviz · 2016-07-25T20:54:01Z

@filipesilva I'm pretty sure as well that TS2.0 has nothing to do with it. The main problem is the generated sourcemap files referencing to non-existent source files. Adding src from the angularfire2 repo manually, and changing the sources attribute in the .map files makes the warnings go away. Should probably just ask @davideast to fix the publishing so it goes away (and the ngrx guys as well).

mmrath · 2016-07-25T20:55:54Z

@filipesilva A sample repo located at https://github.com/mmrath/ng-cli-webpack-test . Please let me know if you are able to reproduce the issue with repo.

hansl · 2016-07-25T22:39:19Z

Periscope also uses Angularfire2, and does not compile.

Output: https://gist.github.com/hansl/7b53915bfaa55d72ebe842807b0351e4

filipesilva · 2016-07-25T22:42:16Z

@Brocco I couldn't repro the ng new issue, this was my result:

kamik@T460p MINGW64 /D/sandbox
$ ng new git-project
(node:6048) fs: re-evaluating native module sources is not supported. If you are using the graceful-fs module, please update it to a more recent version.
installing ng2
  create .editorconfig
  create README.md
  create src\app\app.component.css
  create src\app\app.component.html
  create src\app\app.component.spec.ts
  create src\app\app.component.ts
  create src\app\environments\environment.dev.ts
  create src\app\environments\environment.prod.ts
  create src\app\environments\environment.ts
  create src\app\index.ts
  create src\app\shared\index.ts
  create src\favicon.ico
  create src\index.html
  create src\main.ts
  create src\polyfills.ts
  create src\test.ts
  create src\tsconfig.json
  create src\typings.d.ts
  create angular-cli.json
  create config\environment.js
  create config\karma.conf.js
  create config\protractor.conf.js
  create e2e\app.e2e-spec.ts
  create e2e\app.po.ts
  create e2e\tsconfig.json
  create e2e\typings.d.ts
  create .gitignore
  create package.json
  create public\.gitignore
  create public\.npmignore
  create tslint.json
  create typings.json
Successfully initialized git.
- Installing packages for tooling via npmtypings WARN deprecated 6/21/2016: "registry:dt/jasmine#2.2.0+20160412134438" is deprecated (updated, replaced or removed)
/ Installing packages for tooling via npm
├── angular-protractor (global dev)
├── jasmine (global dev)
└── selenium-webdriver (global dev)

Installed packages for tooling via npm.

kamik@T460p MINGW64 /D/sandbox
$ cd git-project/

kamik@T460p MINGW64 /D/sandbox/git-project (master)
$ git st
On branch master
nothing to commit, working directory clean

kamik@T460p MINGW64 /D/sandbox/git-project (master)
$ git log
commit ba79c687ffe8acf2c7e578665a2b4392f6caf871
Author: angular-cli <[email protected]>
Date:   Mon Jul 25 20:49:49 2016 +0100

    chore: initial commit from angular-cli

We also test for git on our e2e test suite, which makes me think your scenario must have been a fluke (or something we're not testing for).
https://github.com/angular/angular-cli/blob/webpack/tests/e2e/e2e_workflow.spec.js#L82

Meligy · 2016-07-26T03:37:37Z

Hello everyone,
I'm not sure whether this is the best place to report this. I have been playing with the webpack branch (and showing people how to do it, explaining it's not stable yet of course).
Someone asked me about using jQuery with that setup. I wouldn't recommend doing that in the first place, but my finding was interesting.

Since we don't use separate typings for e2e and src, this means src gets the global $ declaration from protractor. This throws TS error because of the conflicting declarations.

You can see a sample error here. I have also added to it some steps that can be used to separate the typings manually so that you don't get this error.
But, what I'm asking in this thread is:

Does it make sense to separate the typings for src and e2e?

(maybe via different tsconfig and types as mentioned in #1449?)

Thanks!

jvbianchi · 2016-07-26T14:06:16Z

Hi.
The output-path option on the build command is not working.
command: ng build --output-path build/

TheLarkInn · 2016-07-26T16:14:06Z

Just out of curiosity @jvbianchi can you try ./build as the output path and tell me if that works?

jvbianchi · 2016-07-26T19:54:43Z

@TheLarkInn I tried ./build and it doesn't work, same problem.

hansl · 2016-07-27T00:09:02Z

Thanks everyone. This issue is now closed as the WebPack branch is merged. If you have build issues, please create separate issues on github instead of refering to this.

A NPM package will be published sometime this week with this. It will use a separate dist-tag, probably named webpack.

I want to specially thank @TheLarkInn and @filipesilva for their work on this. Without you, it's clear we'd still be using Broccoli. Good work to both of you!

yusijs · 2016-07-27T07:52:14Z

Can't wait for this to hit npm! Hoping the upgrade path is ready to by then! :)

itamark · 2016-08-15T09:30:14Z

Was there a conclusion about the convention for global css?
I am also tending toward the concept of global scss folder at the root, that's imported as needed.
Let me know if it was resolved or still open - would love to develop the feature if it's not done yet.

filipesilva · 2016-08-19T03:26:10Z

@itamark see #1633

angular-automatic-lock-bot · 2019-09-06T01:41:54Z

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.}

filipesilva added the feature: webpack label Jul 15, 2016

filipesilva mentioned this issue Jul 18, 2016

fix(tests): re-enable sass/less/stylus tests #1363

Merged

TheLarkInn mentioned this issue Jul 18, 2016

fix: add environment configuration replacement #1364

Merged

This was referenced Jul 19, 2016

chore: remove systemjs #1376

Merged

Add source dir support #1377

Closed

fix(build): re-add support for sourceDir #1378

Merged

This was referenced Jul 19, 2016

chore: remove vendor.ts #1383

Merged

chore: remove windows elevation check #1384

Merged

chore: remove material2 test option #1385

Merged

chore(build): remove broccoli #1386

Merged

filipesilva mentioned this issue Jul 20, 2016

fix(test): add missing sourceDir #1387

Merged

filipesilva mentioned this issue Jul 20, 2016

chore: cleanup of new files #1388

Merged

filipesilva mentioned this issue Jul 25, 2016

Webpack branch: how should I be loading fonts (from Bootstrap, etc.) #1436

Closed

filipesilva mentioned this issue Jul 26, 2016

feat: use @types instead of typings #1449

Merged

TheLarkInn mentioned this issue Jul 26, 2016

fix: make sourcemaps work in ng test #1447

Merged

hansl mentioned this issue Jul 26, 2016

Merge Webpack Feature branch into Master #1455

Merged

hansl closed this as completed in #1455 Jul 27, 2016

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 6, 2019

Webpack build system upgrade tracker #1356

Webpack build system upgrade tracker #1356

Comments

filipesilva commented Jul 15, 2016 • edited by TheLarkInn Loading

RobCannon commented Jul 16, 2016

cortopy commented Jul 16, 2016

filipesilva commented Jul 16, 2016

yusijs commented Jul 16, 2016

filipesilva commented Jul 16, 2016

RobCannon commented Jul 17, 2016

TheLarkInn commented Jul 17, 2016

filipesilva commented Jul 17, 2016

hansl commented Jul 19, 2016

tapas4java commented Jul 20, 2016

filipesilva commented Jul 20, 2016

tapas4java commented Jul 20, 2016

filipesilva commented Jul 20, 2016

tapas4java commented Jul 20, 2016

TheLarkInn commented Jul 20, 2016

filipesilva commented Jul 20, 2016

filipesilva commented Jul 20, 2016

tapas4java commented Jul 20, 2016 • edited Loading

TheLarkInn commented Jul 24, 2016

TheLarkInn commented Jul 24, 2016

frederikschubert commented Jul 24, 2016

mmrath commented Jul 25, 2016

filipesilva commented Jul 25, 2016

mmrath commented Jul 25, 2016

Brocco commented Jul 25, 2016

sunild commented Jul 25, 2016

filipesilva commented Jul 25, 2016

ivoviz commented Jul 25, 2016

filipesilva commented Jul 25, 2016

ivoviz commented Jul 25, 2016

mmrath commented Jul 25, 2016

hansl commented Jul 25, 2016

filipesilva commented Jul 25, 2016

Meligy commented Jul 26, 2016

jvbianchi commented Jul 26, 2016

TheLarkInn commented Jul 26, 2016 • edited Loading

jvbianchi commented Jul 26, 2016

hansl commented Jul 27, 2016

yusijs commented Jul 27, 2016

itamark commented Aug 15, 2016

filipesilva commented Aug 19, 2016

angular-automatic-lock-bot bot commented Sep 6, 2019

filipesilva commented Jul 15, 2016 •

edited by TheLarkInn

Loading

tapas4java commented Jul 20, 2016 •

edited

Loading

TheLarkInn commented Jul 26, 2016 •

edited

Loading