Angular-cli: Adding external styles or scripts does not work if project is create without --link-cli

[radezz]

Please provide us with the following information:

1. OS? Windows 7, 8 or 10. Linux (which distribution). Mac OSX (Yosemite? El Capitan?)
   MacOSX
2. Versions. Please run ng --version. If there's nothing outputted, please run
   in a Terminal: node --version and paste the result here:
   6.2.2
3. Repro steps. Was this an app that wasn't created using the CLI? What change did you
   do on your code? etc.
   -- create new project following readme: ng new test-project
   -- add external bootstrap styles and scripts following readme docs
   -- run: ng build

no scripts nor styles are bundled.

1. The log given by the failure. Normally this include a stack trace and some
   more information.
   none
2. Mention any other details that might be useful.
   Everything works correctly when you setup project using:
   ng new test-project --link-cli

this happens because depending on how you generate project (with or without --link-cli) project is created with different angular-cli.json files.

Proposed solution:

1. Make --link-cli enabled by default.
   2 If --link-cli not being default is desired please document this flag and explain what it does and what is difference and why scripts and styles can be added only for this particular angular-cli.json setup (perhaps it is just a bug).

I have noticed that your e2e tests always use --link-cli when creating project that is why this was probably missed, and this way I have found out how to generate setup where I can add external 3rd party scripts and styles.

---

Thanks! We'll be in touch soon.

[gitdisrupt]

I ran into the exact same problem, however, i was not able to get your example using --link-cli to work, see below — could it be that your use of --link-cli is misconstrued?

See this article which shows an example usage of --link-cli and its purpose: https://www.gurustop.net/blog/2016/07/24/angular2-angularcli-load-cli-from-git-github-master-webpack

Seems to me the purpose of --link-cli is to ensure your project links to the intended install / version of the Angular CLI.

Regardless — on my system, with the 1.0.0-beta.11-webpack.2 version of the CLI installed, I was not able to test the example you outlined above by running ng new test-project --link-cli. This results in a generated project folder that stops prior to NPM install with the error: Couldn't do 'npm link angular-cli'.

Can you post the 2 different versions of angular-cli.json that you ended up with when generating the new projects?

[radezz]

Hmm now after reinstalling the angular-cli I cannot reproduce it as well. Perhaps I did something else, but I still have 2 different angular-cli.json file from previously generated projects.

The one which is generated by default (in which addin bootstrap does not work):
{
"project": {
"version": "1.0.0-beta.11-webpack.2",
"name": "proj"
},
"apps": [
{
"main": "src/main.ts",
"tsconfig": "src/tsconfig.json",
"mobile": false
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "config/protractor.conf.js"
}
},
"test": {
"karma": {
"config": "config/karma.conf.js"
}
},
"defaults": {
"prefix": "app",
"sourceDir": "src",
"styleExt": "css",
"prefixInterfaces": false,
"lazyRoutePrefix": "+"
}
}

The one I somehow managed to generate (thought it is --link-cli param) where everything works fine:
{
"project": {
"version": "1.0.0-beta.11-webpack.2",
"name": "moments"
},
"apps": [
{
"root": "src",
"outDir": "dist",
"assets": "assets",
"index": "index.html",
"main": "main.ts",
"test": "test.ts",
"tsconfig": "tsconfig.json",
"prefix": "app",
"mobile": false,
"styles": [
"styles.css"
],
"scripts": [],
"environments": {
"source": "environments/environment.ts",
"prod": "environments/environment.prod.ts",
"dev": "environments/environment.dev.ts"
}
}
],
"addons": [],
"packages": [],
"e2e": {
"protractor": {
"config": "./protractor.conf.js"
}
},
"test": {
"karma": {
"config": "./karma.conf.js"
}
},
"defaults": {
"styleExt": "css",
"prefixInterfaces": false,
"lazyRoutePrefix": "+"
}
}

also project structure is a bit different for second json file.
/src
----/app
----/assets
----/environments
----index.html
...

[radezz]

Ok now I understand what has happened. It has nothing to do with --link-cli param. I first installed the angular-cli using: npm install -g angular-cli@webpack which generates first json file which does not work (for including external scripts). Then I was looking into e2e tests for angular-cli in github and I cloned the repository and run e2e tests to check if test for external resources passes. It looks like running e2e tests override the previously installed angular-cli with the angular-cli built from the cloned repo. After that 'ng new' is generating projects with different angular-cli.json and different file structure where adding external js/styles works.

It looks like difference is a difference between the angular-cli@webpack published to npm and current angular-cli code from github. Is there a chance you guys will make a release soon?

Best,
Radek

[Supratentorial]

Also having this issue.

[hadnet]

Same here. The "styles": ["styles.css"],.. doesn't work at all.

[alejoar]

Same here, both "styles" and "scripts" seem to be ignored.

[alexverdaguer]

Same here, installing first globally ( npm install -g angular-cli@webpack ) and later locally ( npm install --save-dev angular-cli@webpack ) and finally ng init ( upgrades to RC5 ) but the angular-cli.json generated with both commands are without the styles and scripts array.

Edit: It looks now that with "ng new" the package.json has updated to RC5, but still using the wrong angular-cli.json

[gitdisrupt]

If i am correct, you need to add styles and scripts yourself to angular-cli.json, however i have tried that, and there are no errors on ng-serve, but the scripts nor styles load.

[carlosvalle]

upgrading to webpack (8) release fix the issue for me.

[phmello]

hi @carlosvalle, can you please post your angular-cli.json, jsut installed .8 and I still doesn't work for me. cheers

[hadnet]

Yep, last webpack version (1.0.0-beta.11-webpack.8) is working well with ' "styles": ["styles.css"] ' now. I didn't try with "scripts" though..

[filipesilva]

This looks like it was a version mismatch. I advice you to update to the latest version, see https://github.com/angular/angular-cli#webpack-update

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