Migration to Angular 6, RxJs 6 and Webpack 4 #2019

lanovoy · 2018-06-23T15:36:22Z

What kind of change does this PR introduce? (Bug fix, feature, docs update, ...)
Update of configuration and dependencies
What is the current behavior? (You can also link to an open issue here)
Current version is based on Webpack 3, Jasmine 2, RxJs 5.5 and Angular 5.
What is the new behavior (if this is a feature change)?

Migrated to Webpack 4 with optimized configs
Got rid of outdated ngcWebpack (it's pretty much deprecated by the author) - using directly ngtools/webpack
Migrated to Angular 6 and RxJs 6.2
Added TSLint rules for RxJs 6.2
Improved Karma config for local development - should now work similar to Angular/cli based projects
Migrated to Jasmine 3

…st and clean:aot with direct rimraf calls to speed up the script execution

* Moved UglifyJsPlugin to proper place * Enabled proper HMR * npm run test should work now the same as ng test * Merge branch 'master' into feature/migrate-to-webpack4 # Conflicts: # config/webpack.common.js # config/webpack.prod.js # package-lock.json # package.json # yarn.lock

…pilerPlugin directly.

govi2010 · 2018-06-24T06:29:50Z

looks good to me.

lanovoy · 2018-06-24T13:33:26Z

@gdi2290 when you get a chance please review this PR. A big step forward with this PR, so need more people to look into changes here before we merge it.

…fail for no apparent reason... Have to be investigated.

envil · 2018-06-25T06:39:34Z

Looking forward for this to be merged.

briosheje · 2018-06-25T09:58:22Z

Not sure whether I'm the only one experiencing the issue, but updating from the branch to my project, angular seems to be unable to resolve any css whatsoever, neither the ones package-related, nor the inline ones (or included ones).

Was that tested already or am I the only one experiencing that?

lanovoy · 2018-06-25T10:03:38Z

@briosheje Maybe you merged something incorrectly? I have the same changes in our production code already and everything seem to be fine. You need to make sure path for mini-css-extract-plugin is set up correctly in your branch (webpack.prod.js)

briosheje · 2018-06-25T10:07:35Z

@lanovoy No, sorry, everything was merged properly, the issue was slightly thinner: any css file should be included in styles.scss, I'm using some third-party libraries which were included in polyfills.browsers.ts (official guides explicitly recommended to include these files in *.ts files instead of .scss ones), moving them to scss imports apparently solved the issue, I'm only experiencing some strange icon sizes, but it's not related to the PR itself.

Perhaps it's worth mentioning that with this commit you won't be able to import .scss files in .ts files anymore, or, at least, that it may not work exactly as expected.

lanovoy · 2018-06-25T11:39:16Z

Hmm, that's worth investigating more, since future versions of libSass will disallow importing css files using '@import'

briosheje · 2018-06-25T11:51:11Z

@lanovoy the easiest you can try is importing twitter bootstrap, in my case version 4:

package.json:

"bootstrap": "^4.0.0",

If you import through styles.css:

@import '~bootstrap/dist/css/bootstrap.min.css';

It properly works.
If you try to import it through polyfills.browser.ts, it doesn't work:

import 'bootstrap/dist/css/bootstrap.min.css';

It does not throw any error or whatever, it just silently fails with no error (the css seems not to be bundled at all to me, but I might be wrong).

I'm not sure how to investigate further on that topic, I've always had issues with webpack's css resolving with electron some time ago, and literally gave up after hours of guessing. In that case, however, I had no issues at all (until angular 6, of course).

Also, another interesting example is font-awesome: importing it through .scss works in dev mode, but doesn't work in prod mode to me. To avoid issues, I just stopped using font-awesome, but maybe it's somehow related to the css case (about font-awesome, I'm talking about the angular 5 master repository, not this one, I didn't try with this one yet).

lanovoy · 2018-06-28T18:54:59Z

@briosheje Did you try to import from app.module or main? polyfill.browser.ts is a separate entry point, so I'm not exactly sure if importing css from it and from the main would be effectively the same.
Also is it only a problem with production builds or is it the same with dev builds?

If you will have time, can you check if projects generated with latest angular cli have a same problem with importing css from ts files?

briosheje · 2018-06-28T19:32:28Z

Sure, I quel try tomorrow morning. Currently, importing from the css, i have some strange outputs in my production build, while in dev mode it’s properly working. I will try to import everything in the main file and check both dev and prod builds Ottieni Outlook per iOS<https://aka.ms/o0ukef>

…

________________________________ From: lanovoy <[email protected]> Sent: Thursday, June 28, 2018 8:55:20 PM To: gdi2290/angular-starter Cc: Marco Iamonte; Mention Subject: Re: [gdi2290/angular-starter] Migration to Angular 6, RxJs 6 and Webpack 4 (#2019) @briosheje<https://github.com/briosheje> Did you try to import from app.module or main? polyfill.browser.ts is a separate entry point, so I'm not exactly sure if importing css from it and from the main would be effectively the same. Also is it only a problem with production builds or is it the same with dev builds? If you will have time, can you check if projects generated with latest angular cli have a same problem with importing css from ts files? — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub<#2019 (comment)>, or mute the thread<https://github.com/notifications/unsubscribe-auth/ABz5gDOkpOEXWzeXILUbUQ_ncN0fUlNWks5uBSaYgaJpZM4U01PQ>.

briosheje · 2018-07-02T12:47:52Z

@lanovoy sorry for the late answer, but I had to test some stuff before being able to go on with gfx tests.

Apparently, external libraries does NOT work if they are included either in app.module or in main.browser.

Local scss and css files are fine, but whenever a .scss or css points to anything under node_modules I'm unable to make it work in devmode (not sure in prod mode, but I'm not going to test it).

For instance, I'm including "regular" local .scss and css files in my app.module, while I'm importing third party libraries through scss @import in some .scss files, though it's probably not the best practice.

I will keep you updated if I'm able to find any reason or any workaround to make it work through .ts

jurisz · 2018-07-04T06:53:48Z

When I try to change target output from es5 to es2015 in tsconfig.webpack.json.
I got:
error TS1323: Dynamic import cannot be used when targeting ECMAScript 2015 modules.

briosheje · 2018-07-04T07:02:38Z

@lanovoy Just to keep you updated, both dev and prod mode seems to somehow work by importing css in .scss files, regardless whether they are referenced locally (local css files) or npm dependencies.

I'm still confused about some strange css behaviors in devmode, while in prod mode they seems to be working fine.

I think this pull should just be release asap regardless the .scss issues, perhaps in the near future we may find a way to import .scss directly from .ts files instead (despite there still are so many libraries recommending to import through .scss).

What is interesting, though, and I think this should be mentioned, importing fontawesome now properly works both in dev and prod mode, in my case I'm following this approach in styles.scss:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";

and it's working beautifully, while in the previous version (webpack 3 and angular 5) this was not working in prod mode, so some magic happened there :).

zzs1020 · 2018-07-09T19:54:54Z

config/webpack.common.js

  const GTM_API_KEY = process.env.GTM_API_KEY || APP_CONFIG.gtmKey;

  const ngcWebpackConfig = buildUtils.ngcWebpackSetup(isProd, METADATA);
  const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath);

  const entry = {
    polyfills: './src/polyfills.browser.ts',
-    main:      './src/main.browser.ts'
+    main: './src/main.browser.ts'


shouldn't these 2 paths start with '../src/' because webpack.common.js is in config folder?

zzs1020 · 2018-07-09T20:03:53Z

config/webpack.common.js

  const isProd = options.env === 'production';
  const APP_CONFIG = require(process.env.ANGULAR_CONF_FILE || (isProd ? './config.prod.json' : './config.dev.json'));

-  const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA,options.metadata || {});
+  const METADATA = Object.assign({}, buildUtils.DEFAULT_METADATA, options.metadata || {});
  const GTM_API_KEY = process.env.GTM_API_KEY || APP_CONFIG.gtmKey;

  const ngcWebpackConfig = buildUtils.ngcWebpackSetup(isProd, METADATA);


why don't you delete this line? I thought you replaced ngcwebpack with ngtoolswebpack

The config is still used, though. ngcWebpack is just a wrapper around webpack/ngtools and almost all config values are the same.

We might want to do some renaming here for clarity...

zzs1020 · 2018-07-09T20:04:26Z

config/webpack.common.js

  const GTM_API_KEY = process.env.GTM_API_KEY || APP_CONFIG.gtmKey;

  const ngcWebpackConfig = buildUtils.ngcWebpackSetup(isProd, METADATA);
  const supportES2015 = buildUtils.supportES2015(METADATA.tsConfigPath);

  const entry = {
    polyfills: './src/polyfills.browser.ts',
-    main:      './src/main.browser.ts'
+    main: './src/main.browser.ts'
  };

  Object.assign(ngcWebpackConfig.plugin, {


I suppose the path is relative to the folder in which node process for webpack is getting launched from, so that would be the root with package.json - not /config...

Maksym Lanovyy and others added 12 commits March 16, 2018 14:11

AoT and JIT builds complete successfully

133b543

Upgraded @ngtools/webpack to latest beta.

0a907c0

Fixed warnings, removed deprecated plugins, replaced npm run clean:di…

ecb04c3

…st and clean:aot with direct rimraf calls to speed up the script execution

Govinda Alwani : Upgraded HtmlElementsPlugin to support webpack 4.

81dc5c0

Updateing angular 6 and ficing webpack issues and rxjs issue.

c4c50af

using RXJS lettable

028533b

Update README.md

4cfa10e

Updating Angular latest and webpack latest

bfc0d6b

Updated lock file

5469a5c

Corrected package-lock.json

ff514b5

Got rid of outdated ngcWebpackPlugin. Instead using native AngularCom…

68b1033

…pilerPlugin directly.

Maksym Lanovyy added 2 commits June 24, 2018 15:11

Added RxJs TSLint rules

dcf29ab

Clean-up, refactoring, re-enabled disabled TSLint rules

2a6a916

lanovoy requested a review from PatrickJS June 24, 2018 13:44

Partially reverting previous change as it causes one of e2e tests to …

21abae0

…fail for no apparent reason... Have to be investigated.

zzs1020 reviewed Jul 9, 2018

View reviewed changes

lanovoy merged commit 8ba05f7 into master Jul 9, 2018

This was referenced Jul 9, 2018

No Upgrage to NG6 ? #2012

Closed

Upgrade to Angular 6 #2009

Closed

[Feature] 💥 Upgrade to webpack 4 🎉👍 #1973

Closed

klihelp mentioned this pull request Jul 20, 2018

Repo Update Log #1686

Closed

32 tasks

PatrickJS deleted the feature/migrate-to-webpack4 branch February 23, 2020 18:26

Uh oh!

Migration to Angular 6, RxJs 6 and Webpack 4 #2019

Migration to Angular 6, RxJs 6 and Webpack 4 #2019

Uh oh!

Conversation

lanovoy commented Jun 23, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

govi2010 commented Jun 24, 2018

Uh oh!

lanovoy commented Jun 24, 2018

Uh oh!

envil commented Jun 25, 2018

Uh oh!

briosheje commented Jun 25, 2018

Uh oh!

lanovoy commented Jun 25, 2018

Uh oh!

briosheje commented Jun 25, 2018

Uh oh!

lanovoy commented Jun 25, 2018

Uh oh!

briosheje commented Jun 25, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

lanovoy commented Jun 28, 2018

Uh oh!

briosheje commented Jun 28, 2018 via email

Uh oh!

briosheje commented Jul 2, 2018

Uh oh!

jurisz commented Jul 4, 2018

Uh oh!

briosheje commented Jul 4, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

zzs1020 Jul 9, 2018

Choose a reason for hiding this comment

Uh oh!

zzs1020 Jul 9, 2018

Choose a reason for hiding this comment

Uh oh!

lanovoy Jul 9, 2018

Choose a reason for hiding this comment

Uh oh!

lanovoy Jul 9, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

zzs1020 Jul 9, 2018

Choose a reason for hiding this comment

Uh oh!

zzs1020 Jul 9, 2018

Choose a reason for hiding this comment

Uh oh!

lanovoy Jul 9, 2018

Choose a reason for hiding this comment

Uh oh!

Uh oh!

lanovoy commented Jun 23, 2018 •

edited

Loading

briosheje commented Jun 25, 2018 •

edited

Loading

briosheje commented Jul 4, 2018 •

edited

Loading

lanovoy Jul 9, 2018 •

edited

Loading