Angular-cli: CDN Styles/ Scripts in .angular-cli.json configuration

[9442552055]

Bug Report or Feature Request (mark with an x)

- [ ] bug report 
- [ x] feature request

Versions.

@angular/cli: 1.1.2
node: 8.0.0
os: win32 x64
npm: 5.0.0

Repro steps.

STEP 1: create a angular 2 project with angular cli
STEP 2: In .angular-cli.json add any CDN path to styles or scripts as well
STEP 3: run ng build command.

The log given by the failure.

ERROR in multi ./src/styles.css ./~/@angular/material/prebuilt-themes/indigo-pink.css ./src/https:/fonts.googleapis.com/icon?fami
ly=Material+Icons
Module not found: Error: Can't resolve 'D:\WEB_POC\angular2cli\rentals\src\https:\fonts.googleapis.com\icon?family=Material+Icons
' in 'D:\WEB_POC\angular2cli\rentals\node_modules\@angular\cli\models\webpack-configs'
@ multi ./src/styles.css ./~/@angular/material/prebuilt-themes/indigo-pink.css ./src/https:/fonts.googleapis.com/icon?family=Mat
erial+Icons

Desired functionality.

To add CDN paths in global scripts or styles, which we are getting error due to path.resolve

Mention any other details that might be useful.

[deebloo]

@9442552055 can you just put the links in index.html? is there a reason you need them loaded via the .angular-cli.json file?

[9442552055]

If i want clone a new project, for the project setup particularly "vendor style/script from CDN as well from node_modules folder" related changes i can refer to one file instead checking different files.

[filipesilva]

Heya, we considered this in #1310 and #2280 but decided against it. It's not truly feasible with a webpack build step and there isn't any real upside either.

[maxisam]

@filipesilva Should we update the doc as well?

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/include-angular-material.md

[filipesilva]

@maxisam I don't quite follow, how do you see it changing?

[maxisam]

I thought this is not supported. At least it doesn't know on my end either.

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

[filipesilva]

@maxisam I tried adding @import '~https://fonts.googleapis.com/icon?family=Material+Icons'; to src/styles.css like the guide asks and the app builds successfully.

[maxisam]

That's odd. I am on 1.2.6.

I got

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';
^
File to import not found or unreadable: ~https://fonts.googleapis.com/icon?family=Material+Icons.
Parent style sheet: stdin
in D:\Users\saml\Documents\VSTeam\LCME\src\client\styles\styles.scss (line 2, column 2)
@ ./src/client/styles/styles.scss 4:14-205
@ multi ./src/client/styles/styles.scss

[filipesilva]

I'm not sure what's happening, perhaps a proxy issue? Does accessing that URL work on your browser?

[viperguynaz]

the benefit is adding environment related CDN URLs to build.

[maz-saify]

the benefit is adding environment related CDN URLs to build.

Did you get the solution to load environment specific CDN ?

[Frankitch]

A workaround for this issue is to set different index.html with environment specific CDN URLs... It is not really DRY but it works.

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