Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Angular-cli V1.0.0 3rd party scripts or styles are not loading #5944

Closed
nguyendnhat opened this issue Apr 13, 2017 · 5 comments
Closed

Angular-cli V1.0.0 3rd party scripts or styles are not loading #5944

nguyendnhat opened this issue Apr 13, 2017 · 5 comments

Comments

@nguyendnhat
Copy link

nguyendnhat commented Apr 13, 2017

I'm using "@angular/cli": "^1.0.0"
And add material lite in to project
"apps": [
{
"root": "Client",
"outDir": "wwwroot/dist",
"assets": [
"assets",
"favicon.ico"
],
"index": "index.html",
"main": "main.ts",
"polyfills": "polyfills.ts",
"test": "test.ts",
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"prefix": "CRM",
"styles": [],
"scripts": [ "../node_modules/material-design-lite/material.min.js" ]
}
],

But it does not get loaded.
How fix it.

@node: v6.10.2
@npm: 3.10.10

@psykolm22
Copy link

  "apps": [{
        "styles": [
            "styles.css",
            "../node_modules/material-design-lite/material.min.css"
        ],
        "scripts": ["../node_modules/material-design-lite/material.min.js"],

Work for me with @angular-cli: 1.0.0 @node: v6.10.0 @npm: 3.10.10
Maybe you forgot to add material.min.css ?

@MHacker9404
Copy link

I'm also seeing this issue. Created an angular-cli app from scratch with angular-cli 1.0,0, node:7.8.0. In the json, i've got
"scripts": [
"../node_modules/jquery/dist/jquery.min.js"
],

and this is the component:

import { Component, AfterViewInit } from '@angular/core';
import * as jQuery from 'jquery';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements AfterViewInit {
  title = 'app works!';

  ngAfterViewInit() {
    jQuery.delay(5000);
  }
}

This is the error I get at runtime with "ng serve"
ERROR TypeError: WEBPACK_IMPORTED_MODULE_1_jquery.delay is not a function

@DavyDeDurpel
Copy link

I faced a similar issue. In my case the css files were not loaded.
It took me all morning to figure out what was going wrong and after a long struggle I actually found the cause.

On my Windows laptop I have a directory containing a symbolic link to another directory. My best guess is that webpack is not compatible with symbolic link directories on Windows.

An example:

full path to my project: c:\Users\Public\Documents\angular-rocks
symbolic link path to my project: c:\data\angular-rocks

if I start my project from the full path then the css files are loaded.
If I start my project from the symbolic link path then the css files are not loaded.

@filipesilva
Copy link
Contributor

filipesilva commented May 5, 2017

@nguyendnhat without a full repro I think you have a bad path somewhere, or you are misconfiguring your library.
@MHacker9404 when using a global library from scripts you cannot also import it via a import statement. Instead you need to just declare it to make typescript type checking happy (see #2141 (comment)).
@DavyDeDurpel the symbolic link issue is being tracked in #3797

@angular-automatic-lock-bot
Copy link

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 angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 7, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants