Angular-cli не может ссылаться на бутстрап

Используя 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
 });

и angular-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, поэтому этот вопрос не совсем верное решение

angular angular-cli twitter-bootstrap-4
person royB    schedule 26.07.2016    source источник

Ответы (3)


arrow_upward
1
arrow_downward

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

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

В папке dist не должно быть папки node_modules, вместо нее есть папка vendor, которую вы должны использовать.

РЕДАКТИРОВАТЬ: см. https://github.com/angular/angular-cli/wiki/3rd-party-libs

person stijn.aerts    schedule 26.07.2016
comment
Да, я указал, что мне удалось это сделать. но я не уверен, что это правильный путь + мне нужно изменить как angular-cli-build.js, так и system-config.ts, что я считаю большой проблемой + худшее => нет автозаполнения intellisense, что абсолютно неприемлемо (- ; - person royB; 26.07.2016
comment
Это способ пойти на данный момент. Для каждой внешней зависимости вы должны сделать это. Однако они собираются упростить этот процесс, пока не знаю, когда. Отредактировал мой пост с дополнительной информацией. - person stijn.aerts; 26.07.2016

arrow_upward
1
arrow_downward

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

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

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

person pd farhad    schedule 26.07.2016

arrow_upward
0
arrow_downward

Вы не должны ссылаться на css напрямую на node_modules, потому что этот каталог находится за пределами вашего углового AP:

У вас есть три возможности связать bootstrap css, первый — скопировать bootstrap в папку assets и связать с

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

Второй — получить css из ** общедоступной CDN Bootstrap **:

<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 (я использую его): шаги по установке просты, и вы можете прочитать его на эта ссылка или я ее скопирую:

npm install ng2-bootstrap --save

в вашем src/app/app.module.ts и добавьте

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

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

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

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

откройте src/app/app.component.html и добавьте

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

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

person Pablo Ezequiel Inchausti    schedule 27.02.2017