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

echap · 2016-08-30T14:07:42Z

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

The text was updated successfully, but these errors were encountered:

carlosvalle · 2016-08-30T15:39:35Z

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

echap · 2016-08-30T15:46:04Z

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 · 2016-08-30T15:53:47Z

@echap update nodejs to 6.5

echap · 2016-08-30T16:06:43Z

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 · 2016-08-30T16:20:46Z

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

renevall · 2016-08-30T18:07:20Z

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

nuculerman · 2016-09-02T21:26:27Z

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 · 2016-09-07T08:25:00Z

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 · 2016-09-08T12:00:39Z

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 · 2016-09-19T02:17:05Z

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 · 2017-02-15T23:07:16Z

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 · 2017-05-19T10:06:10Z

@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 · 2017-07-22T11:49:00Z

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

Bootstrap Styles and Scripts are not loading.

syk-coder · 2018-01-04T11:58:39Z

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.

angular-automatic-lock-bot · 2019-09-07T19:41:26Z

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

echap changed the title ~~Angular-cli-webpack 3rd party scripts or styles are not loaded~~ Angular-cli-webpack 3rd party scripts or styles are not loading Aug 30, 2016

filipesilva closed this as completed Sep 19, 2016

angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

echap commented Aug 30, 2016 •

edited

Loading

carlosvalle commented Aug 30, 2016

echap commented Aug 30, 2016 •

edited

Loading

wjke commented Aug 30, 2016

echap commented Aug 30, 2016

echap commented Aug 30, 2016

renevall commented Aug 30, 2016 •

edited

Loading

nuculerman commented Sep 2, 2016

Satrium commented Sep 7, 2016

Ardenexal commented Sep 8, 2016

filipesilva commented Sep 19, 2016 •

edited

Loading

eliteproxy7 commented Feb 15, 2017

shmarlya commented May 19, 2017

lauritowal commented Jul 22, 2017

syk-coder commented Jan 4, 2018

angular-automatic-lock-bot bot commented Sep 7, 2019

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

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

Comments

echap commented Aug 30, 2016 • edited Loading

carlosvalle commented Aug 30, 2016

echap commented Aug 30, 2016 • edited Loading

wjke commented Aug 30, 2016

echap commented Aug 30, 2016

echap commented Aug 30, 2016

renevall commented Aug 30, 2016 • edited Loading

nuculerman commented Sep 2, 2016

Satrium commented Sep 7, 2016

Ardenexal commented Sep 8, 2016

filipesilva commented Sep 19, 2016 • edited Loading

eliteproxy7 commented Feb 15, 2017

shmarlya commented May 19, 2017

lauritowal commented Jul 22, 2017

syk-coder commented Jan 4, 2018

angular-automatic-lock-bot bot commented Sep 7, 2019

echap commented Aug 30, 2016 •

edited

Loading

echap commented Aug 30, 2016 •

edited

Loading

renevall commented Aug 30, 2016 •

edited

Loading

filipesilva commented Sep 19, 2016 •

edited

Loading