How do I connect bootstrap to angular7?

See more:

Angular7

in "app.compomnet.html " I use a starter template code https://getbootstrap.com/docs/4.3/examples/starter-template/

2- I installed bootsrap4 "npm I bootstap@4 --save " in terminal

3- I add this references into style.css

4- in style.css '@import'~/bootstrap/dist/css/bootstrap.css'

5- I tried to type 'ng s --o 'this error occurred .

[![error message in terminal ][1]][1] 2nd error message 

I tried to check if the code in style.css is correct or not "@import'~/bootstrap/dist/css/bootstrap.css' can anyone elaborate error

[1]: error message in lines

ERROR in ./src/styles.css (./node_modules/@angular-devkit/build-angular/src/angular-cli-files/plugins/raw-css-loader.js!./node_modules/postcss-loader/src??embedded!./src/styles.css) Module build failed (from ./node_modules/postcss-loader/src/index.js): Error: ENOENT: no such file or directory, open '\bootstrap\dist\css\bootstrap.css' at Object.openSync (fs.js:438:3) at Object.readFileSync (fs.js:343:35) at Storage.provideSync (D:\shopping-cart\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:98:13) at CachedInputFileSystem.readFileSync (D:\shopping-cart\node_modules\enhanced-resolve\lib\CachedInputFileSystem.js:259:32) at Observable.rxjs_1.Observable.obs [as _subscribe] (D:\shopping-cart\node_modules@ngtools\webpack\src\webpack-input-host.js:35:51) at Observable._trySubscribe (D:\shopping-cart\node_modules\rxjs\internal\Observable.js:44:25) at Observable.subscribe (D:\shopping-cart\node_modules\rxjs\internal\Observable.js:30:22) at SyncDelegateHost._doSyncCall (D:\shopping-cart\node_modules@angular-devkit\core\src\virtual-fs\host\sync.js:22:20) at SyncDelegateHost.read (D:\shopping-cart\node_modules@angular-devkit\core\src\virtual-fs\host\sync.js:49:21) at WebpackCompilerHost.readFileBuffer (D:\shopping-cart\node_modules@ngtools\webpack\src\compiler_host.js:125:44) at VirtualFileSystemDecorator.readFile (D:\shopping-cart\node_modules@ngtools\webpack\src\virtual_file_system_decorator.js:39:54) at Promise (D:\shopping-cart\node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\styles.js:47:35) at new Promise () at Object.load (D:\shopping-cart\node_modules@angular-devkit\build-angular\src\angular-cli-files\models\webpack-configs\styles.js:46:28) at loadImportContent (D:\shopping-cart\node_modules\postcss-import\index.js:236:34) at Promise.all.resolved.map.file (D:\shopping-cart\node_modules\postcss-import\index.js:210:18)[0m

What I have tried:

I searched more on the internet and copied a path of bootstrab to scripts in angular.json but it dont work and browser shows cant get