Webpack build system upgrade tracker

Remaining action items:

environment config fix: add environment configuration replacement #1364
path mapping fix: fixes for path mappings, tests, and coverage #1359
sass/less/stylus (tests) fix(tests): re-enable sass/less/stylus tests #1363
ng test errors fix: fixes for path mappings, tests, and coverage #1359
remove require from test shim fix: fixes for path mappings, tests, and coverage #1359
remove SystemJS dependency chore: remove systemjs #1376
~~figure out lazy loading~~
remove vendor.ts chore: remove vendor.ts #1383
remove material2 specific options chore: remove material2 test option #1385
--source-dir support fix(build): re-add support for sourceDir #1378
clean up broccoli remnants chore(build): remove broccoli #1386
remove windows elevation check chore: remove windows elevation check #1384
fix prod builds fix: update webpack-dev-server (ng serve) support for prod target #1395
add ng e2e test using prod builds chore(tests): add prod env e2e test #1394
overall cleanup chore: cleanup of new files #1388
disable HMR Disable HMR #1402
review documentation chore: review docs #1407
support arbitrary environments in runtime config feat(env): decouple build from env file #1404
squiggly lines on editor with decorator errors fix: fix tsconfig for editors #1420
fix libs option in tsconfig.json fix: update to awesome-typescript-loader 2.1.0 #1425
remove module.id chore(blueprints): remove module.id #1426
use karma config and remove reporters feat(test): add karma plugin #1437
re-add outDir to an ignored folder chore(blueprints): re-add outDir #1428
add host options to ng serve feat: add host flag support for ng serve #1442
add @types support feat: use @types instead of typings #1449
sourcemaps in unit tests don't work fix: make sourcemaps work in ng test #1447

Things to investigate:

using fonts Webpack build system upgrade tracker #1356 (comment)
problems building ngrx/angularfire2 Webpack build system upgrade tracker #1356 (comment)

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

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

@RobCannon

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!

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

@yusijs

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

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.

3 off the list thanks to #1359

@RobCannon

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

@filipesilva

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

@filipesilva

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

@tapas4java

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

@filipesilva

@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'

@tapas4java

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

@filipesilva

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'

@filipesilva

@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).

@filipesilva

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

Periscope also uses Angularfire2, and does not compile.

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

@Brocco

@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 <angular-cli@angular.io>
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

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!

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

@jvbianchi

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

@TheLarkInn

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

@TheLarkInn

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!

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

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.

@itamark

@itamark see #1633

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

Navigation Menu

Repository navigation

Webpack build system upgrade tracker #1356

60 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Webpack build system upgrade tracker #1356

Description

Activity

RobCannon commented on Jul 16, 2016

cortopy commented on Jul 16, 2016

filipesilva commented on Jul 16, 2016

yusijs commented on Jul 16, 2016

filipesilva commented on Jul 16, 2016

RobCannon commented on Jul 17, 2016

TheLarkInn commented on Jul 17, 2016

filipesilva commented on Jul 17, 2016

hansl commented on Jul 19, 2016

tapas4java commented on Jul 20, 2016

filipesilva commented on Jul 20, 2016

tapas4java commented on Jul 20, 2016

filipesilva commented on Jul 20, 2016

tapas4java commented on Jul 20, 2016

60 remaining items

ivoviz commented on Jul 25, 2016

mmrath commented on Jul 25, 2016

hansl commented on Jul 25, 2016

filipesilva commented on Jul 25, 2016

Meligy commented on Jul 26, 2016

jvbianchi commented on Jul 26, 2016

TheLarkInn commented on Jul 26, 2016

jvbianchi commented on Jul 26, 2016

hansl commented on Jul 27, 2016

yusijs commented on Jul 27, 2016

itamark commented on Aug 15, 2016

filipesilva commented on Aug 19, 2016

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

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions