383 Commits

Author SHA1 Message Date
Alan Agius
247b87d40a refactor(@angular-devkit/build-angular): move dev-server webpack config in a separate file
With this change we remove webpack dev-server logic to a seperate file. We also use the webpack-dev-server API to add live-reload and hmr entry-points and settings.
2020-10-16 21:08:18 +02:00
Alan Agius
710e12dd7d fix(@angular-devkit/build-angular): correctly reference hmr-accept.js file in windows error
Backslashes need to be changed to forward slashes for absolute imports to work in Windows.

Closes #19099
2020-10-16 21:03:57 +02:00
Alan Agius
4d2f4ec2c1 fix(@angular-devkit/build-angular): override already existing assets in compilation
With this change we align the copying of assets between `ng build` and `ng serve`. Previously in `ng serve` already copied assets where not overridden.

More info: https://webpack.js.org/plugins/copy-webpack-plugin/#force

Closes #18787
2020-10-15 17:16:59 +02:00
Alan Agius
1d0d90e1b1 refactor(@angular-devkit/build-angular): simplify global_defs usage from @angular/compiler-cli.
This change results in the same options being set. See: 66e6b932d8/packages/compiler-cli/src/tooling.ts (L25-L34)
2020-10-15 16:10:35 +02:00
Alan Agius
e253fffbe6 refactor(@angular-devkit/build-angular): move addition of HMR plugins and loaders to webpack configs 2020-10-14 21:57:47 +03:00
Alan Agius
7253802d74 refactor(@angular-devkit/build-angular): change hmr-accept to TypeScript
For the time being we cannot use the DOM lib because it conflicts with Node, In future when we remove `yarn admin build` we should have this as a seperate compilation unit.
2020-10-14 21:57:47 +03:00
Alan Agius
16f7767983 fix(@angular-devkit/build-angular): remove .js files equivalent of css when using extract css 2020-10-14 21:57:47 +03:00
Alan Agius
221e821cad refactor(@angular-devkit/build-angular): use __filename instead of __dirname + filename 2020-10-14 21:57:47 +03:00
Alan Agius
e30e578d22 build: update mini-css-extract-plugin to version 1.0.0 2020-10-14 21:57:47 +03:00
Alan Agius
3c2da34972 fix(@angular-devkit/build-angular): only show cannot restore inputs/options when old length is > 0 2020-10-14 21:57:47 +03:00
Alan Agius
49841f84c5 fix(@angular-devkit/build-angular): include HMR accept code in main.ts
This fixes as issue where in some cases the changed module is not accepted which cases the dev-server to fallback to live-reload.

This is because the hmr.js and main.ts have different module ids.
2020-10-14 21:57:47 +03:00
Alan Agius
871dd6a434 feat(@angular-devkit/build-angular): enable font inlining optimizations
With this change we inline Google fonts and icons in the index html file when optimization is enabled.

**Before**
```html
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
```
**After**
```html
<style>
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
  }

  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
  }
</style>
```

To opt-out of this feature set `optimization.fonts: false` or `optimization.fonts.inline: false` in the browser builder options.

Example:
```js
"configurations": {
  "production": {
    "fileReplacements": [
      {
        "replace": "src/environments/environment.ts",
        "with": "src/environments/environment.prod.ts"
      }
    ],
    "optimization": {
      "fonts": false
    },
```

More information about the motivation for this feature can be found: https://github.com/angular/angular-cli/issues/18730

Note: internet access is required during the build for this optimization to work.
2020-10-14 21:57:29 +03:00
Charles Lyding
a4d31fd16e refactor(@angular-devkit/build-angular): fully temporarily disable Webpack 5 license extraction 2020-10-14 10:11:02 -04:00
Charles Lyding
0fe20bcc7f refactor(@angular-devkit/build-angular): additional webpack 5 type improvements
Additional support for building with Webpack 5.
2020-10-07 13:42:52 -04:00
Alan Agius
9d71ebf90a refactor(@angular-devkit/build-angular): clean up style include paths logic 2020-10-06 11:34:10 -04:00
Alan Agius
7972ec70dc build: update stylus-loader to version 4.1.0 2020-10-06 11:34:10 -04:00
Alan Agius
e96fbd3c8a refactor(@angular-devkit/build-angular): change errors and warnings messages
Sometimes the WARNING IN/ERROR IN can lead of ambiguous messages

 - Use `Warning` instead of `WARNING IN`
-  Use `Error` instead of `Error In`
2020-09-30 16:17:05 +02:00
Dmitriy Shekhovtsov
c78a460658 fix(@angular-devkit/build-angular): fixes optimizeChunkAssets is deprecated in webpack 5 2020-09-29 15:03:53 +02:00
Dmitriy Shekhovtsov
850a0aef13 fix(@angular-devkit/build-angular): fixes deprecation warning for MainTemplate.hooks.assetPath in webpack 5 2020-09-29 13:53:01 +02:00
Dmitriy Shekhovtsov
d74e7e3f7e fix(@angular-devkit/build-angular): fix webpack 5 deprecation warning for chunk.push 2020-09-29 13:52:00 +02:00
Alan Agius
5e293f039a fix(@angular-devkit/build-angular): handle undefined descriptionFileData
Closes #18631
2020-09-29 13:51:23 +02:00
Dmitriy Shekhovtsov
38023fe41c fix(@angular-devkit/build-angular): fixed afterOptimizeChunkAssets is deprecated in webpack 5 2020-09-29 11:35:20 +02:00
Dmitriy Shekhovtsov
c8f8640bf5 fix(@angular-devkit/build-angular): fixed Module.issuer is deprecated in webpack 5 for commonjs warn plugin 2020-09-28 20:34:18 +02:00
Dmitriy Shekhovtsov
92f3889f98 fix(@angular-devkit/build-angular): maxModules were deprecated and renamed to modulesSpace 2020-09-28 13:57:38 +02:00
Dmitriy Shekhovtsov
eb8872aeee fix(@angular-devkit/build-angular): webpack5 deprecation of module property in Dependency 2020-09-28 11:23:41 +02:00
Charles Lyding
0c112e5d91 feat(@angular-devkit/build-angular): support package references in styles & scripts options
The browser builder's `styles` and `scripts` options now support using a package name in the path when specifying a style or script.  This removes the need to use a relative path to the node modules directory in these options.  This provides support for Yarn PnP as well as reducing the complexity of the options especially for monorepo setups.  Relatively located files will take precedence over packages if they exist.  This precedence provides backwards compatibility with existing configurations.

Before :
`"styles": ["../node_modules/bootstrap/dist/css/bootstrap.css"]`

After:
`"styles": ["bootstrap/dist/css/bootstrap.css"]`
2020-09-25 20:22:04 +02:00
Alan Agius
dbdd3fc857 feat(@angular-devkit/build-angular): out of the box hot module replacement (HMR)
With this change we configure HMR internally and therefore users which want to use basic HMR functionality will not longer be required to change their application code.

This is important because previously a lot of users missed out on HMR or reported a broken behaviour. This also gives novice users a better chance to appreciate HMR and Angular because of the zero effort required to use HMR.

Closes #17324
2020-09-25 20:21:33 +02:00
Alan Agius
f10f910ec9 refactor(@angular-devkit/build-angular): remove esVersionInFileName build option
This option can be determined via `wco.differentialLoadingMode`
2020-09-23 11:22:58 -05:00
Charles Lyding
e5266fdd44 refactor(@angular-devkit/build-angular): temporarily disable Webpack 5 license extraction
The license extraction plugin is currently causing errors when building/serving with Webpack 5.  This change temporarily disables the option when Webpack 5 is used until further investigation can take place and to unblock initial Webpack 5 support.
2020-09-21 11:55:11 -05:00
Charles Lyding
ea2b19cedc refactor(@angular-devkit/build-angular): adjust Webpack configuration based on version 4/5
This change adds helpers to allow the Webpack configuration to be automatically adjusted based on the Webpack version in use.
These helpers are then used to provide configuration compatibility for Webpack 5 which has several differences to the Webpack 4 configuration.
Behavior is maintained between the two versions so that external option behavior is not altered.
2020-09-21 11:55:11 -05:00
Alan Agius
99210b203d fix(@angular-devkit/build-angular): add node-sass deprecation warning 2020-09-18 14:53:31 -05:00
Alan Agius
5996896076 feat(@angular-devkit/build-angular): improve build stats output format
With this change we also remove sourcemaps from build info to align with Webpack 5 output.
2020-09-18 14:52:38 -05:00
Alan Agius
0d10de5cbb refactor(@angular-devkit/build-angular): re-structure folder structure and move code
Previous
```
packages/angular_devkit/build_angular
├── plugins
│   └── webpack
└── src
    ├── angular-cli-files
    │   ├── models
    │   │   └── webpack-configs
    │   ├── plugins
    │   └── utilities
    │       ├── index-file
    │       └── service-worker
    ├── app-shell
    ├── browser
    │   └── specs
    ├── dev-server
    ├── extract-i18n
    ├── karma
    ├── ng-packagr
    ├── protractor
    ├── server
    ├── tslint
    ├── utils
    └── webpack
        └── models
```

Now
```
packages/angular_devkit/build_angular
├── plugins
└── src
    ├── app-shell
    ├── browser
    │   └── specs
    ├── dev-server
    ├── extract-i18n
    ├── karma
    ├── ng-packagr
    ├── protractor
    ├── server
    ├── tslint
    ├── utils
    │   └── index-file
    └── webpack
        ├── configs
        ├── plugins
        └── utils
```
2020-09-14 16:40:39 -04:00