Angular-cli: Angular-cli-webpack 3rd party scripts or styles are not loading

Created on 30 Aug 2016  路  15Comments  路  Source: angular/angular-cli

Hi,

Following those instructions, I've been trying to add in the global scope bootstrap. In order to do this, I changed my angular-cli.json this way :

{
  "project": {
    "version": "1.0.0-beta.11-webpack.2",
    "name": "rose"
  },
  "apps": [
    {
      "main": "src/main.ts",
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.min.css"
      ],
      "scripts": [
        "../node_modules/bootstrap/dist/js/bootstrap.min.js"
      ],
      "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": "+"
  }
}

But it does not get loaded... I've been spending a day on finding why it does not work (I have of course bootstrap installed (bootstrap 3 via npm)

Also here is my angular-cli version :
angular-cli: 1.0.0-beta.11-webpack.2
node: 4.4.7
os: darwin x64

Any help would be much welcome

picture echap
👍5

Most helpful comment

Having the same problem for
angular-cli: 1.2.3
node: 8.1.2
os: linux x64

Bootstrap Styles and Scripts are not loading.

picture lauritowal on 22 Jul 2017
👍18

All 15 comments

@echap - upgrading to 1.0.0-beta.11-webpack.8 fix this issue for me

carlosvalle picture carlosvalle on 30 Aug 2016

Thanks !

Upgrading to webpack.8 gives me bunches of errors... I'm gonna try with a carefully done ng init. Is there any upgrade guide to webpack 8 available ?

Error while running script "/Users/eric/Documents/projects/hubup-projects/hubup-upgrade-center-webapp/node_modules/angular-cli/addon/ng2/models/config/config.ts":
SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.require.extensions..ts (/Users/eric/Documents/projects/hubup-projects/hubup-upgrade-center-webapp/node_modules/angular-cli/lib/bootstrap-local.js:30:14)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/eric/Documents/projects/hubup-projects/hubup-upgrade-center-webapp/node_modules/angular-cli/addon/ng2/models/config.ts:7:16)
    at Module._compile (module.js:409:26)
    at Object.require.extensions..ts (/Users/eric/Documents/projects/hubup-projects/hubup-upgrade-center-webapp/node_modules/angular-cli/lib/bootstrap-local.js:30:14)
Error while running script "/Users/eric/Documents/projects/hubup-projects/hubup-upgrade-center-webapp/node_modules/angular-cli/addon/ng2/models/config.ts":
SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.require.extensions..ts (/Users/eric/Documents/projects/hubup-projects/hubup-upgrade-center-webapp/node_modules/angular-cli/lib/bootstrap-local.js:30:14)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/eric/Documents/projects/hubup-projects/hubup-upgrade-center-webapp/node_modules/angular-cli/addon/ng2/models/config.ts:7:16)
    at Module._compile (module.js:409:26)
    at Object.require.extensions..ts (/Users/eric/Documents/projects/hubup-projects/hubup-upgrade-center-webapp/node_modules/angular-cli/lib/bootstrap-local.js:30:14)
Unexpected token ...
SyntaxError: Unexpected token ...
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:373:25)
    at Object.require.extensions..ts (/Users/eric/Documents/projects/hubup-projects/hubup-upgrade-center-webapp/node_modules/angular-cli/lib/bootstrap-local.js:30:14)
    at Module.load (module.js:343:32)
    at Function.Module._load (module.js:300:12)
    at Module.require (module.js:353:17)
    at require (internal/module.js:12:17)
    at Object.<anonymous> (/Users/eric/Documents/projects/hubup-projects/hubup-upgrade-center-webapp/node_modules/angular-cli/addon/ng2/models/config.ts:7:16)
    at Module._compile (module.js:409:26)
    at Object.require.extensions..ts (/Users/eric/Documents/projects/hubup-projects/hubup-upgrade-center-webapp/node_modules/angular-cli/lib/bootstrap-local.js:30:14)
echap picture echap on 30 Aug 2016

@echap update nodejs to 6.5

wjke picture wjke on 30 Aug 2016

It's done :

Error: Cannot find module './models/config'
    at Function.Module._resolveFilename (module.js:455:15)
    at Function.Module._load (module.js:403:25)
    at Module.require (module.js:483:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (/Users/eric/Documents/projects/hubup-projects/hubup-upgrade-center-webapp/node_modules/angular-cli/addon/ng2/index.js:4:16)
    at Module._compile (module.js:556:32)
    at Object.Module._extensions..js (module.js:565:10)
    at Module.load (module.js:473:32)
    at tryModuleLoad (module.js:432:12)
    at Function.Module._load (module.js:424:3)

With node.js version 6.5.0 . I can't even make a ng serve with it :(

echap picture echap on 30 Aug 2016
👍1

Note : I have globally installed the last version :
npm install -g [email protected]and it appears to work better, yet I still I do have a :

Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://ember-cli.com/user-guide/#watchman for more info.
Error
echap picture echap on 30 Aug 2016

@echap that's not an error. If you want, you can install watchman https://facebook.github.io/watchman/

renevall picture renevall on 30 Aug 2016

I'm having the same issue. I updated to the latest and the application is not loading the bootstrap styles or scripts. I haven't changed anything and followed the instructions from the README.

nuculerman picture nuculerman on 2 Sep 2016

I'm having the same issue on the latest version (v1.0.0-beta.11-webpack.8). After updating from version 1.0.0-beta.11-webpack.2 the scripts started working but the styles still aren't working.

angular-cli: v1.0.0-beta.11-webpack.8
node: 6.5.0
os: win32 x64

{
  "project": {
    "version": "1.0.0-beta.11-webpack.8",
    "name": "testing"
  },  "apps": [{
      "root": "src",
      "outDir": "dist",
      "assets": "assets",
      "index": "index.html",
      "main": "main.ts",
      "test": "test.ts",
      "tsconfig": "tsconfig.json",
      "prefix": "app",
      "mobile": false,
      "styles": [
        "../node_modules/bootstrap/dist/css/bootstrap.css"
      ],
      "scripts": [        
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/tether/dist/js/tether.js",
        "../node_modules/bootstrap/dist/js/bootstrap.js"
      ],
      "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": "+"
  }
}
Satrium picture Satrium on 7 Sep 2016

I'm having the same issue after updating to v1.0.0-beta.11-webpack.8 from 1.0.0-beta.11-webpack.2 scripts are now working but styles are not

{ "project": { "version": "1.0.0-beta.11-webpack.2", "name": "master-mind" }, "apps": [ { "main": "src/main.ts", "tsconfig": "src/tsconfig.json", "mobile": false, "scripts":[ "../node_modules/jquery/dist/jquery.js", "../node_modules/tether/dist/js/tether.js", "../node_modules/bootstrap/dist/js/bootstrap.js" ], "styles":[ "src/main.scss", "../node_modules/bootstrap/dist/css/bootstrap.css" ] } ], "addons": [], "packages": [], "e2e": { "protractor": { "config": "config/protractor.conf.js" } }, "test": { "karma": { "config": "config/karma.conf.js" } }, "defaults": { "prefix": "app", "sourceDir": "src", "styleExt": "scss", "prefixInterfaces": false, "lazyRoutePrefix": "+" } }

Ardenexal picture Ardenexal on 8 Sep 2016
👍1

Please use the upgrade instructions found in https://github.com/angular/angular-cli#webpack-update to upgrade projects to the latest version (beta.14).

filipesilva picture filipesilva on 19 Sep 2016

i have version 1.0.14 and it only loads the first script but not the second

],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../src/assets/js/wptr.1.1.js",
],

eliteproxy7 picture eliteproxy7 on 16 Feb 2017

@filipesilva is it possible to make load scripts on every change state? because when i click back button in browser, my scripts dont work, only when state init. thanks

shmarlya picture shmarlya on 19 May 2017

Having the same problem for
angular-cli: 1.2.3
node: 8.1.2
os: linux x64

Bootstrap Styles and Scripts are not loading.

lauritowal picture lauritowal on 22 Jul 2017
👍18

I have the similar problem css files are loaded and I am able to see them on dev tools but scripts are not getting loaded. I am using the below configuration.

Angular CLI: 1.6.2
Node: 8.9.3
OS: darwin x64
Angular: 4.3.6
... common, compiler, core, forms, http, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.6.2
@angular/compiler-cli: 4.4.6
@angular/tsc-wrapped: 4.4.6
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.9.2
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.1.6
webpack-dev-server: 2.9.7
webpack: 3.10.0

Tried with different versions of angular/cli but its not working. As an alternative I am directly referencing the required js files in my index.html.

syk-coder picture syk-coder on 4 Jan 2018

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

angular-automatic-lock-bot[bot] picture angular-automatic-lock-bot[bot] on 7 Sep 2019
Was this page helpful?
0 / 5 - 0 ratings

Related issues

MateenKadwaikar picture MateenKadwaikar  路  3Comments
jmurphzyo picture jmurphzyo  路  3Comments
naveedahmed1 picture naveedahmed1  路  3Comments
rwillmer picture rwillmer  路  3Comments
NCC1701M picture NCC1701M  路  3Comments