feat(build): update angular-cli.json

[filipesilva]

This PR replaces some hardcoded values in the build system by values specified in angular-cli.json. It also adds the styles property that allows users to add global styles.

The apps entry in angular-cli config looks like this now:

  "apps": [
    {
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "mobile": false,
      "styles": "styles.css",
      "environments": {
        "source": "environments/environment.ts",
        "prod": "environments/environment.prod.ts",
        "dev": "environments/environment.dev.ts"
      }
    }
  ],

Please note these breaking changes:

• apps[0].root replaces the previous defaults.sourceDir.
• apps[0].assets directory replaces the previous public folder in the project root as a folder whose contents are copied over without processing.
• polyfills.ts is no longer bundled separately, but rather included in main.ts.

A description of the styles property is below, as shown in README.md

Global styles

The styles.css file allows users to add global styles and supports CSS imports.

If the project is created with the --style=sass option, this will be a .sass
file instead, and the same applies to scss/less/styl.

Closes #1603
Closes #1618
Closes #1459
Closes #1573
Closes #1541
Closes #1586
Closes #1463
Closes #1145

[TheLarkInn]

Even though its not technically part of the new loader code, would you mind changing the limit also to 10000?

I think its a safe standard threshold for when we want to let webpack decide to either bundle base64 files vs emit them into the dist folder.

base64 encoding makes file sizes roughly 33% larger than their original binary representations (when embedded in css/js), but actually much smaller when gzipped. So we want this technique but not for large images.

[filipesilva]

Done

[clydin]

I'm not sure what the plans are for supporting library generation with the CLI, but I was thinking that apps might be better named modules with a type field for each module definition which would correlate to a set of webpack configs for that type (e.g., app or lib).

[filipesilva]

This PR isn't aimed to implement the multiple apps workflow yet, so it's better not to change it.

[Meligy]

Regarding

      "styles": "styles.css",

From the example at the top of this discussion.

Shouldn't this be an array? Or else use a singular property name instead of a plural one?

[filipesilva]

The example is updated to show it as not being an array, but that might change in an upcoming PR.

[PostImpatica]

I'm now loading bootstrap with "style":"../node_modules/bootstrap/dist/css/bootstrap.min.css" , somehow the styles.css in the root of my app still loads globally as well even though it's not specified in angular-cli.json, so I'm happy cuz I need 'em both and you can't use an array yet.

[Meligy]

@helzgate the ones in your app will continue to work. They are part of Angular and are meant to be supported by the CLI. They are not temporary workaround for the global CSS loading, although they can be used as such.

My understanding is that with the new global styles feature, you are meant to have a CSS file with several CSS imports inside it. Webpack (not the browser) will track and load the CSS imports and bundle them, similar to how you could have required / imported the CSS file from JavaScript.

So, even without array support, you can have one global CSS file that you create, and import bootstrap's CSS and any other global stylesheet in it, and it's like a directory or a JS barrel.

[Blasz]

What was the reasoning behind not bundling polyfills.ts separately anymore? Surely it's better from a caching standpoint to keep it as a separate bundle as they aren't going to change as frequently as application code.

[filipesilva]

@Blasz tree shaking makes the caching problem very hard, so we're not focusing on it that much.

[daBishMan]

is the issue with loading fontawesom fonts part of this issue, or is that addressed, I am still seeing this running my application locally.

Can someone elaborate on the current status of loading fontawesome fonts in CLI project please?

[Meligy]

Not sure about fontawesome, but I had an app using Twitter Bootstrap glyphicons, which I guess would be the same thing.

They were working fine. I seemed to have some issue with base-href, but I have a lot of moving parts in this app that I need to verify before I call this on the CLI itself.

[angular-automatic-lock-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.}