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

[echap]

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

[carlosvalle]

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

[echap]

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)

[wjke]

@echap update nodejs to 6.5

[echap]

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]

Note : I have globally installed the last version :
npm install -g angular-cli@1.0.0-beta.11-webpack.8and 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

[renevall]

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

[nuculerman]

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.

[Satrium]

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": "+"
  }
}

[Ardenexal]

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": "+" } }

[filipesilva]

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

[eliteproxy7]

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",
],

[shmarlya]

@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

[lauritowal]

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

Bootstrap Styles and Scripts are not loading.