2016-07-26 7 views
0

Использование Angular-cli, я пытаюсь ссылаться bootstrap.cssрадиально-кли не может ссылаться на самозагрузки

index.html

<!doctype html> 
    <html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Title</title> 
     <base href="/"> 
     <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.css"> 
     ... 
    </head> 
    <body> Angular-cli auto generated code </body> 
    <html> 

package.json

"dependencies": { 
    "bootstrap": "4.0.0-alpha.2" 
} 

сейчас Я понимаю, что ng build создает проект dist и в vendor папки ли все включает, которые необходимы, и мне удалось добавить в папку vendor начальной загрузки файла с помощью:

системы-config.js

// Apply the CLI SystemJS configuration. 
System.config({ 
map: { 
    ... 
    'bootstrap': 'vendor/bootstrap/dist/css/bootstrap.css' 
}, 
packages: cliSystemConfigPackages 
}); 

и угловой Cli -build.js

module.exports = function(defaults) { 
    return new Angular2App(defaults, { 
    vendorNpmFiles: [ 
     ... 
     'bootstrap/dist/css/bootstrap.css' 
    ] 
}); 

};

Но все-таки сервер не смог найти bootstrap.css

Примечания

  1. Я не ищу CDN решения, я хочу понять, как импортировать вещи из node_modules
  2. не ищет `ng2 угловые директивы, поэтому this question на самом деле недействительное решение

ответ

1

Попробуйте это:

<link rel="stylesheet" href="../vendor/bootstrap/dist/css/bootstrap.css"> 

В DIST папке не должно быть никаких папок node_modules, а есть папка поставщика, который вы должны использовать.

EDIT: см https://github.com/angular/angular-cli/wiki/3rd-party-libs

+0

Да, я указал, что я сумел сделать это. но я не уверен, что это способ пойти + мне нужно изменить как angular-cli-build.js, так и system-config.ts, которые, я думаю, являются большой проблемой + худший => нет intellisense автозаполнения, что абсолютно неприемлемо (- ; – royB

+0

Вот как это сделать. Для каждой внешней зависимости вы должны это сделать. Они будут упрощать этот процесс, но не знают, когда. Отредактировано мое сообщение с дополнительной информацией. –

1

Если вы не получите какие-либо НПЕ библиотеки сторонних производителей. Создайте папку с ресурсами в папке src. Затем вы можете добавить отдельные папки для js, css и images. Поместите стороннего пользователя css в папку css. Тогда вы должны ссылаться css файл в вашем index.html, как таким образом:

<link rel="stylesheet" href="assets/css/your_css.css" /> 

Теперь, когда вы делаете ng serve или ng serve он будет автоматически обновлять общую папку с assets/css.Надеюсь, вы понимаете, весь сценарий :)

0

Вы shouldn't ссылка на CSS непосредственно к node_modules, потому что это реж находится за пределами углового ара:

У вас есть три возможности связать бутстраповское CSS, первый из них копия начальной загрузки в ваших активов Dir, и связь с

<link rel="stylesheet" href="assets/css/bootstrap.css"> 

Второй на том, чтобы получить CSS от ** Bootstrap общественности CDN **:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 

И третий один должен использовать библиотеку как ng2-bootstrap (я его помощью): шаги, чтобы установить легко, и вы можете прочитать его из this link или я скопировать его:

npm install ng2-bootstrap --save 

в вашем Src/приложение/app.module.ts и добавить

import { AlertModule } from 'ng2-bootstrap'; 
... 

@NgModule({ 
    ... 
    imports: [AlertModule.forRoot(), ... ], 
    ... 
}) 

открытый угловой cli.json и вставить новую запись в массив стилей

"styles": [ 
    "styles.css", 
    "../node_modules/bootstrap/dist/css/bootstrap.min.css" 
    ], 

открытым ЦСИ/приложение/app.component.html и добавить

<alert type="success">hello</alert> 

этой библиотеки работали нормально для меня

Смежные вопросы