Related
Creating node modules with Angular6 should be quiet easy. The Documentation tells you these steps:
ng generate library YOUR-LIBRARY
ng build YOUR-LIBRARY --prod
cd dist/YOUR-LIBRARY && npm publish
This will add for instance a new project inside your angular.json, create a new directory inside /projects and compile/transpile your package into /dist/YOUR-LIBRARY. Thats super nice, BUT I cannot find the configuration approach to specify the exported package.json inside the dist directory.
I've tried to modify the package.json inside /projects but it does not have any effect on the distributed package.json.
It allways looks like:
{
"name": "YOUR-LIBRARY",
"version": "0.0.1",
"peerDependencies": {
"#angular/common": "^6.0.0-rc.0 || ^6.0.0",
"#angular/core": "^6.0.0-rc.0 || ^6.0.0"
},
"main": "bundles/nls-guilloche.umd.js",
"module": "fesm5/nls-guilloche.js",
"es2015": "fesm2015/nls-guilloche.js",
"esm5": "esm5/nls-guilloche.js",
"esm2015": "esm2015/nls-guilloche.js",
"fesm5": "fesm5/nls-guilloche.js",
"fesm2015": "fesm2015/nls-guilloche.js",
"typings": "nls-guilloche.d.ts",
"metadata": "nls-guilloche.metadata.json",
"sideEffects": false,
"dependencies": {
"tslib": "^1.9.0"
}
}
I cannot even change the version tag or add any information. Sure, manually it would work, but this cannot be the solution, can it?
As of Angular 12.x each library has a package.json that gets generated and that file is the one that gets copied over into the output directory (dist/ in your case).
It looks something like this when it's generated:
// projects/my-lib/package.json
{
"name": "my-lib",
"version": "0.0.1",
"peerDependencies": {
"#angular/common": "^12.0.0",
"#angular/core": "^12.0.0"
},
"dependencies": {
"tslib": "^2.1.0"
}
}
I followed the instructions at getbootstrap.com thinking that everything would just work. It isn't so far :\
Everything seems to be fine until I try to load the page, at which point my Express.js app throws the error
[[sass] error: File to import not found or unreadable: ~bootstrap/scss/bootstrap.
Parent style sheet: .../sass/app.scss at options.error (.../node-sass/lib/index.js:291:26)
I have tried npm install, restarting my server, looking on Google, StackOverflow (yes, I know there are quite a few similar questions, but none of them answer my question), the Bootstrap 4 GitHub issue pages and so far I haven't been able to come up with the answer.
Could it be that I installed the dependencies in the wrong place? (Dev instead of production or vis-à-vis)
Why am I getting this error??
My webpack.config.js file looks like this...
module.exports = {
entry: './src/index.js',
output: {
path: __dirname + '/public',
filename: 'bundle.js'
},
module: {
loaders: [
{
test: /\.json$/,
loader: 'json-loader'
},
{
test: /\.js$/,
loader: 'babel-loader'
},
{
test: /\.(scss)$/,
use: [{
loader: 'style-loader', // inject CSS to page
}, {
loader: 'css-loader', // translate CSS into CommonJS modules
}, {
loader: 'postcss-loader', // run post CSS actions
options: {
plugins: function () { // post css plugins, can be exported to postcss.config.js
return [
require('precss'),
require('autoprefixer')
];
}
}
}, {
loader: 'sass-loader' // compile Sass to CSS
}]
}
]
}
};
My package.json file
...
"scripts": {
"start": "nodemon --exec babel-node server.js --ignore public/",
"dev": "webpack -wd",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"axios": "^0.17.1",
"bootstrap": "^4.0.0",
"ejs": "^2.5.7",
"express": "^4.16.2",
"jquery": "^3.3.1",
"mongoose": "^5.0.0",
"node-sass-middleware": "^0.11.0",
"popper.js": "^1.12.9",
"precss": "^3.1.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
},
"devDependencies": {
"autoprefixer": "^7.2.5",
"babel-cli": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"css-loader": "^0.28.9",
"eslint": "^4.15.0",
"eslint-plugin-react": "^7.5.1",
"node-sass": "^4.7.2",
"nodemon": "^1.14.11",
"postcss-loader": "^2.0.10",
"sass-loader": "^6.0.6",
"style-loader": "^0.19.1",
"webpack": "^3.10.0"
}
}
postcss.config.js
module.exports = {
plugins: [
require('autoprefixer')
]
};
and inside app.scss I have
#import "custom";
#import "~bootstrap/scss/bootstrap";
When Sass is precompiled by its own CLI, it processes #imports by itself, and sometimes thus doesn’t understand ~ notation. So you can import "node_modules/bootstrap/scss/bootstrap"; in first place and replaced the ~
notation with node_modules/ instead.
I had a similar error
File to import not found or unreadable:
node_modules/bootstrap-sass/assets/stylesheets/bootstrap
Just add "bootstrap-sass": "^3.3.7", to devDependencies at yours package.json, ad run npm update, npm install in your project directory.
For me, I had to change the way I was importing
#import '../../../node_modules/bootstrap/scss/bootstrap';
Then it works
In Rails 7.0.1, after installing using rails new myapp --css=bootstrap, the same error occured. The problem was solved by:
Replacing the line with stylesheet_link_tag in application.erb by: stylesheet_link_tag "application.bootstrap", "data-turbo-track": "reload"
renaming app/assets/stylesheets/application.scss by app/assets/stylesheets/application.bootstrap.scss
Replacing the content by #import '../../../node_modules/bootstrap/scss/bootstrap';
I am not using webpack, but I got the same error when I try to import bootstrap in my scss file like this:
#import 'bootstrap';
It would work if I just import it like this in my case:
#import "../../../../../bootstrap/scss/bootstrap";
But since That is not clean enough to my liking, I found out I could alter my gulp scss task from:
.pipe(plugins.sass())
to:
.pipe(plugins.sass({
outputStyle: 'nested',
precision: 3,
errLogToConsole: true,
includePaths: ['node_modules/bootstrap/scss']
}))
(notice the includePaths section) and now I can just use
#import 'bootstrap';
In my scss file
I am using Solidus and on the very first while getting bootstrap works with the solidus faced the same issue.
The below thing works for me as we have to show the full path where the bootsrap is.
#import "../../../../../node_modules/bootstrap/scss/bootstrap";
I had a similar problem and the fix for me was very basic in the end.
I just had to change "../node_modules/bootstrap/scss/bootstrap"; to "node_modules/bootstrap/scss/bootstrap";.
This happens when you give import from node_modules in any scss file other than the base root style.scss. Try placing it in the root style.scss, it should do it.
If you are having any issue and the answers fail to resolve try this:
Open up your scss file that tries to import.
Rectify the address of the import it might be trying from differnt space.
I solved the problem by:
remove node_modules
npm install
ng serve
works ;)
I just run npm i bootstrap and it worked.
This is similar to my problem, npx mix fail to import bootsrtap with error;
SassError: Can't find stylesheet to import.
Turns out my application root folder name using "#" that caused npx consider as unusual path and fail to import
npx mix error
Solution:
Rename the folder (remove "#")
Good to go
Hope this helps
I'm trying to use Vueify in my first Laravel project and I'm not sure as to why it isn't working.
I've installed (via npm) both vueify and laravel-elixir-vueify modules.
gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
require('laravel-elixir-browserify-official');
require('laravel-elixir-vueify');
elixir(function(mix) {
mix.scripts([
'vendor/vue.min.js',
'vendor/vue-resource.min.js'
], 'public/js/vendor.js')
.sass('app.scss')
.webpack('app.js');
});
app.js
import Vue from 'Vue';
import Chart from './components/Chart.vue';
Vue.component('chart', Chart);
My console is giving me the error: Unknown custom element: <chart> any ideas on what isn't working or what I've missed? I've become a bit confused about what I need to install or how to include things. I've also got a handful of pages which each have their own .js file under /public/js/. I'm not sure if this is good or bad practice with regards to using elixir. But if it's not a bad way to do it ideally I'd want to import the .vue files from /resources/assets/js/components/ to those js files so that I only have to load in the ones which are relevant to each page. But I'm really not sure if that's the wrong way to go about it. Any ideas? I've searched around for answers but nothing seems to have helped me yet.
Just for testing my Chart.vue file looks like this.
Chart.vue
<template id="learnometer-chart">
<div id="myPieChart" style="width:1000px; height:1000px; background-color:red;"></div>
</template>
<script>
</script>
Assuming that you are using Laravel 5.3 and Vue 2.0, you can now compile with webpack.
gulpfile.js
const elixir = require('laravel-elixir');
require('laravel-elixir-vue-2');
elixir(function(mix) {
mix.webpack('app.js');
}
Register your components on your resources/assets/js/app.js:
require('./bootstrap');
Vue.component(
'chart',
require('./components/Chart.vue')
);
const app = new Vue({
el: '#app'
});
Your components should be inside resources/assets/js/components.
The package.json should look something like:
{
"private": true,
"scripts": {
"prod": "gulp --production",
"dev": "gulp watch"
},
"devDependencies": {
"bootstrap-sass": "^3.3.7",
"gulp": "^3.9.1",
"jquery": "^3.1.0",
"laravel-elixir": "^6.0.0-11",
"laravel-elixir-vue-2": "^0.2.0",
"laravel-elixir-webpack-official": "^1.0.2",
"lodash": "^4.16.2",
"vue": "^2.0.1",
"vue-resource": "^1.0.3"
}
}
When you have this, run npm install or npm install --no-bin-links if you are on Windows. Now you can run gulp to compile your vue files.
Hi I have a lil bit of Angular 1 background, I am learning Angular 2.
for starting up with Angular 1, only dependency is to add the angular sources either the angular.js or angular.min.js,
when trying the same with the Angular 2 via script tag,
<script src="angular2.js"></script>
I am getting errors like,
Uncaught ReferenceError: System is not defined
Uncaught ReferenceError: define is not defined
so I have searched over SE and found, system.js and require.js must be added loaded before loading angular2.
any way I managed to load the both libraries,
I love to compile the TypeScript and serve the js file than sending all script to client and compiling/transpiling everything client side.
My IDE is WebStorm and when I try to write a simple component,
import {Component} from 'angular2/core';
#Component
class Hello{
name:string;
constructor() {
this.name = "HelloWorld";
}
}
I am getting this error on TypeScript compiler on main.ts, which compiles to main.js,
Error:(1, 25) TS2307: Cannot find module 'angular2/core'.
TypeScript compiles everything but not importing from angular.
my simple index.html is shown below,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World</title>
</head>
<body>
<script src="system.js"></script>
<script src="require.js"></script>
<script src="angular2.js"></script>
<script src="main.js"></script>
</body>
</html>
What is causing TypeScript not to import modules from angualr2? should I configure TypeScript with Angular2?
I am totally new to TypeScript,
Thank you so much for any help
Update
the tsc main.ts --watch output:
main.ts(1,25): error TS2307: Cannot find module 'angular2/core'.
main.ts(4,7): error TS1219: Experimental support for decorators is a feature that is subject to change in a future release. Set the 'experimentalDecorators' option to remove this warning.
11:43:39 PM - Compilation complete. Watching for file changes.
As you are new to TypeScript. I still suggest you to follow angular.io docs for 5 min startup. That has specific instruction and quite well explained to get started with it.
Angular2 5 min quickstart page # angular.io.
What you need to have basically to start:
Node.js with npm package manager.
Typescript with compiler.
A text editor or any IDE, VS Code.
Any browser, like Chrome.
Install node js and it also installs npm (node package manager). Now from here you need to follow these steps to get started:
Create a root folder name of your choice like ng2Playground.
Now you have to create one more folder inside it which actually holds all the .ts files/ Component files, You can name it app name is just as per docs.
Now at the root level you have to put 4 files.
3.1. tsconfig.json
3.2 typings.json
3.3 package.json
3.4 index.html
When you set it up, as we are not finished yet but you can npm start when we done loading all the dependencies, run this command to start the compilation and watch the application, while you develop other components.
Now what should be there in these files as per point 3.
3.1 : tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main",
"typings/main.d.ts"
]
}
3.2 : typings.json
{
"ambientDependencies": {
"es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#6697d6f7dadbf5773cb40ecda35a76027e0783b2"
}
}
3.3 : package.json
{
"name": "ng2-test",
"version": "1.0.0",
"scripts": {
"start": "concurrent \"npm run tsc:w\" \"npm run lite\" ",
"tsc": "tsc",
"tsc:w": "tsc -w",
"lite": "lite-server",
"typings": "typings",
"postinstall": "typings install"
},
"license": "ISC",
"dependencies": {
"angular2": "2.0.0-beta.7",
"systemjs": "0.19.22",
"es6-promise": "^3.0.2",
"es6-shim": "^0.33.3",
"reflect-metadata": "0.1.2",
"rxjs": "5.0.0-beta.2",
"zone.js": "0.5.15"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.1.0",
"typescript": "^1.7.5",
"typings":"^0.6.8"
}
}
Going very well, congratulations! Yet we need the most important file index.html.
3.4 : index.html
<!doctype html>
<html>
<head>
<title>Angular 2 QuickStart</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 1. Load libraries -->
<!-- IE required polyfills, in this exact order -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<!-- 2. Configure SystemJS -->
<script>
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
}
}
});
System.import('app/main')
.then(null, console.error.bind(console));
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
Okay!
We have our basic setup quite well, yet we need to install all the dependencies and devdependencies, which is absolutely required. You need to run npm install. This will install all the dependency which we have in the package.json.
When package installation finishes you can find one folder named node_modules which is having all the files as per dependencies in the package.json.
If any error occurs while npm install you just need to update the dev/dependencies.
So, i am assuming you have all the dependencies installed and just let's start:
Now as per point 2, we have a folder named app now we will put our .ts files in it.
Create a file named app.component.ts, see the naming convention .component.ts which denotes that it is a component file. Put this code in it:
import {Component} from 'angular2/core'; // <-- importing Component from core
#Component({
selector: 'my-app', //<----the element defined in the index.html
template: '<h1>My First Angular 2 App</h1>' // <---this is the template to put in the component.
})
export class AppComponent { } // <--- we need to export the class AppComponent.
Now create another file named main.ts. Why main.ts? This is because of index.html, we have defined our Systemjs module loader, see this in index.html
System.import('app/main')
This the content of main.ts:
import {bootstrap} from 'angular2/platform/browser' // import bootstrap
import {AppComponent} from './app.component' // import the component we just created
bootstrap(AppComponent); // finally bootstrap it.
Now we are done.
Yay!!!
Yet we need to run it, for this we have to cd ng2Playgroud into it. we need to run this command from command prompt or if you have git bash installed run this:
npm start
and hit enter. Now it will compile and start the lite-server installed as a dependency. If everything goes well then you'll see the template My First Angular 2 App rendered in the browser.
I was able to resolve this issue by adding "moduleResolution" : "node" to my tsconfig.json file
{
"compilerOptions": {
"target": "es5",
"module": "system",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
},
"exclude": [
"node_modules",
"typings/main.d.ts",
"typings/main"
]
}
first of all answering the question, What is causing TypeScript not to import modules from angualr2? should I configure TypeScript with Angular2? You've imported module loader but not configured it. You don't have to configure TypeScript with Angular2 but the module loader.
Since the accepted answer is outdated(aimed at a beta release of Angular2),
A lot of things changed including the module loader in the current Release Candidate of Angular 2 (RC2), This is what works for me,
The directory structure.
. # project directory
├── app # main app directory
│ ├── app.component.ts
│ └── main.ts
├── bs-config.js
├── index.html
├── node_modules # npm package directory
├── package.json
├── styles.css
├── systemjs.config.js
├── tsconfig.json
└── typings.json
The files are.
app: App directory where the project files reside.
app.component.ts: App component file
main.ts: Entry point and bootstrap
bs-config.js: Lite Server (a dev server based on browsersync) configuration
index.html: Index page of the application
node_modules: where the npm packages are installed
package.json: npm configuration file
systemjs.config.js: SystemJS configuration
tsconfig.json: TypeScript Compiler configuration
typings.json: Type definitions
Contents of each file.
index.html file
<html>
<head>
<title>Hello Angular 2</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="styles.css">
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="node_modules/core-js/client/shim.min.js"></script>
<script src="node_modules/zone.js/dist/zone.js"></script>
<script src="node_modules/reflect-metadata/Reflect.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="systemjs.config.js"></script>
<script>
System.import('app').catch(function(err){ console.error(err); });
</script>
</head>
<!-- 3. Display the application -->
<body>
<my-app>Loading...</my-app>
</body>
</html>
package.json
{
"name": "hello-angular-2",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",
"lite": "lite-server",
"postinstall": "typings install",
"tsc": "tsc",
"tsc:w": "tsc -w",
"typings": "typings"
},
"license": "ISC",
"dependencies": {
"#angular/common": "2.0.0-rc.2",
"#angular/compiler": "2.0.0-rc.2",
"#angular/core": "2.0.0-rc.2",
"#angular/http": "2.0.0-rc.2",
"#angular/platform-browser": "2.0.0-rc.2",
"#angular/platform-browser-dynamic": "2.0.0-rc.2",
"#angular/router": "2.0.0-rc.2",
"#angular/router-deprecated": "2.0.0-rc.2",
"#angular/upgrade": "2.0.0-rc.2",
"systemjs": "0.19.27",
"core-js": "^2.4.0",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"zone.js": "^0.6.12",
"angular2-in-memory-web-api": "0.0.12",
"bootstrap": "^3.3.6"
},
"devDependencies": {
"concurrently": "^2.0.0",
"lite-server": "^2.2.0",
"typescript": "^1.8.10",
"typings":"^1.0.4"
}
}
systemjs.config.js
/**
* System configuration for Angular 2 samples
* Adjust as necessary for your application needs.
*/
(function(global) {
// map tells the System loader where to look for things
var map = {
'app': 'app', // 'dist',
'#angular': 'node_modules/#angular',
'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
'rxjs': 'node_modules/rxjs'
};
// packages tells the System loader how to load when no filename and/or no extension
var packages = {
'app': { main: 'main.js', defaultExtension: 'js' },
'rxjs': { defaultExtension: 'js' },
'angular2-in-memory-web-api': { main: 'index.js', defaultExtension: 'js' },
};
var ngPackageNames = [
'common',
'compiler',
'core',
'http',
'platform-browser',
'platform-browser-dynamic',
'router',
'router-deprecated',
'upgrade',
];
// Individual files (~300 requests):
function packIndex(pkgName) {
packages['#angular/'+pkgName] = { main: 'index.js', defaultExtension: 'js' };
}
// Bundled (~40 requests):
function packUmd(pkgName) {
packages['#angular/'+pkgName] = { main: '/bundles/' + pkgName + '.umd.js', defaultExtension: 'js' };
}
// Most environments should use UMD; some (Karma) need the individual index files
var setPackageConfig = System.packageWithIndex ? packIndex : packUmd;
// Add package entries for angular packages
ngPackageNames.forEach(setPackageConfig);
var config = {
map: map,
packages: packages
};
System.config(config);
})(this);
tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"moduleResolution": "node",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": false,
"noImplicitAny": false
}
}
typings.json
{
"globalDependencies": {
"core-js": "registry:dt/core-js#0.0.0+20160317120654",
"jasmine": "registry:dt/jasmine#2.2.0+20160505161446",
"node": "registry:dt/node#4.0.0+20160509154515"
}
}
main.ts
import { bootstrap } from '#angular/platform-browser-dynamic';
import { AppComponent } from './app.component';
bootstrap(AppComponent);
app.component.ts
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
template: '<h1>Hello World from Angular 2</h1>'
})
export class AppComponent { }
Installing dependencies
After saving all the above files, run npm install on a terminal window at the project location, this will install all the dependencies to node_modules directory which may take some time depending on your connection speed.
Running Developement server
After installing all the dependencies, run npm start on terminal at the project location. This will run the typescript compiler and the lite-server concurrently, this helps compile/transpile the code and reload the webpage whenever you change the source code.
Now a new browser window might open. If not, point your favorite browser to **http://127.0.0.1:3000/** or http://localhost:3000/, if everything goes well you will see a page saying,
Hello World from Angular 2
That is it!.
If you don't want the lite-server to open the browser automatically each time you run npm start, add the following to your bs-config.js.
module.exports = {
"open": false
};
code samples from angular.io
Use '#angular/core' instead 'angular2/core'
Do this in index.html:
<html>
<head>
<base href="/"></base>
</head>
<body>
<app>Loading....</app>
</body>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script>
System.config({
defaultJSExtensions: true
});
</script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script>
System.import('App');
</script>
</html>
try using this your first component:
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
#Component({
selector: 'app',
template: "Hello"
})
export class App{
constructor(){ }
}
bootstrap(App);
your Index.html file has missing alot. like importing main component using system.js. i.e System.import('App');
tsconfig.json:
{
"version": "1.5.3",
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"removeComments": true,
"noImplicitAny": false
}
}
You should import these files:
<!-- ZonesJS and Reflect-metadata -->
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<!-- SystemJS -->
<script src="node_modules/systemjs/dist/system.src.js"></script>
<!-- RxJS (observables) -->
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<!-- Main Angular2 bundle -->
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
And use this configuration for SystemJS:
<script>
System.config({
defaultJSExtensions: true,
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
System.import('app/boot')
.then(null, console.error.bind(console));
</script>
I assume that your TypeScript files are located in a app sub folder and the app/boot.ts is the one that contains the call to the bootstrap function.
Make sure folder 'node_modules' (click show hidden files) is in the right location (in the project's root, sibling with wwwroot). Also check #angular is showing in the project Dependencies folder:
[proj. name]/Dependencies/npm/#angular...
I was moving files around as I was integrating the quickstart guide into a new ASP.NET Core project, and the node_modules folder was misplaced.
hope this helps
You may forgot to run :
npm install
under your angular-project/
To start, I had angular, angular-bootstrap, and jquery in package.json and everything is compiled via browserify.
// package
"dependencies": {
"angular": "~1.4.6",
"angular-bootstrap": "~0.12.2",
"jquery": "~2.1.4"
}
angular-bootstrap does not have anything higher than 0.12.2 in NPM, so I switched ng-bootstrap over to bower.json
// bower
"dependencies": {
"angular-bootstrap": "~0.13.4"
}
And added aliases in my package.json
// package
"browser": {
"angular-bootstrap": "./bower_components/angular-bootstrap/ui-bootstrap.js",
"angular-bootstrap-tpls": "./bower_components/angular-bootstrap/ui-bootstrap-tpls.js"
}
After doing all this, jQuery is still available in the global namespace (accessible in the browser console), but angular directives no longer seem to pick use jQuery.
In my directives if I log out the element or view its prototype (element.__proto__) I only see the basic jqLite methods available, not the full jQuery that was available before I made the switch to bower (and that I see when looking at jQuery in the console).
// directive
.directive('myDirective', function() {
return function(scope, element, attrs) {
console.log(element);
console.log(Object.getPrototypeOf(element)); // <-- No jQuery methods available, only jqLite
};
});
I tried a few different ways of shimming dependencies, but I don't think this is necessary given that jQuery is loaded via package and not bower.
// package
"browserify-shim": {
"angular-bootstrap": {
"depends": "jquery:jQuery"
}
}
Any help would be appreciated - not sure what I'm missing here.
Here is what I have and jQuery is rightly resolved on top of jqlite:
bower.json
"dependencies": {
"jquery": "2.1.4"
},
"resolutions": {
"jquery": "2.1.4"
}
package.json
"browserify": {
"transform": [ "browserify-shim" ]
},
"browser": {
"jquery": "./bower_repo/jquery/dist/jquery.js"
},
"browserify-shim": {
"jquery": "$"
}