package.json
"dependencies": {
"#angular/animations": "^4.4.6",
"#angular/common": "^4.4.6",
"#angular/compiler": "^4.4.6",
"#angular/core": "^4.4.6",
"#angular/forms": "^4.4.6",
"#angular/http": "^4.4.6",
"#angular/platform-browser": "^4.4.6",
"#angular/platform-browser-dynamic": "^4.4.6",
"#angular/router": "^4.4.6",
"#angular/upgrade": "^4.4.6",
"#ngx-translate/core": "^6.0.0-beta.1",
"#ngx-translate/http-loader": "^2.0.1",
"air-datepicker": "^2.2.3",
"bootstrap": "4.0.0-beta.2",
"core-js": "^2.5.4",
"google-libphonenumber": "^3.1.2",
"html-minifier": "^3.5.13",
"jquery": "^3.3.1",
"moment": "^2.22.0",
"ngx-bootstrap": "^2.0.3",
"ngx-intl-tel-input": "^1.0.6",
"npm": "^5.8.0",
"popper.js": "^1.14.2",
"reflect-metadata": "^0.1.10",
"rxjs": "^5.5.8",
"systemjs": "0.19.40",
"traceur": "0.0.111",
"tslib": "^1.9.0",
"zone.js": "^0.8.25"
},
"devDependencies": {
"#angular/cli": "^1.7.3",
"#angular/compiler-cli": "^4.4.6",
"#types/jasmine": "2.5.36",
"#types/node": "^6.0.104",
"canonical-path": "0.0.2",
"concurrently": "^3.5.1",
"jasmine-core": "~2.4.1",
"lite-server": "^2.2.2",
"lodash": "^4.17.5",
"protractor": "~4.0.14",
"rimraf": "^2.5.4",
"tslint": "^3.15.1",
"typescript": "^2.8.1"
}
systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/',
"ngx-bootstrap": "node_modules/ngx-bootstrap"
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
'app': 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/animations': 'npm:#angular/animations/bundles/animations.umd.js',
'#angular/animations/browser': 'npm:#angular/animations/bundles/animations-browser.umd.js',
'#angular/platform-browser/animations': 'npm:#angular/platform-browser/bundles/platform-browser-animations.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'#ngx-translate/core': 'npm:#ngx-translate/core/bundles/core.umd.js',
'#angular/common/http': 'npm:#angular/common/bundles/common-http.umd.js',
'#ngx-translate/http-loader': 'npm:#ngx-translate/http-loader/bundles/http-loader.umd.js',
'rxjs': 'npm:rxjs',
'moment': 'npm:moment',
'tslib': 'npm:tslib/tslib.js',
'jquery': 'npm:jquery/dist/jquery.min.js',
'air-datepicker': 'npm:air-datepicker/dist/js/datepicker.js',
'ngx-intl-tel-input': 'npm:ngx-intl-tel-input/ngx-intl-tel-input.umd.js',
'ngx-bootstrap': 'npm:ngx-bootstrap/bundles/ngx-bootstrap.umd.js',
'google-libphonenumber': 'npm:google-libphonenumber/dist/libphonenumber.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js',
meta: {
'./*.js': {
loader: 'systemjs-angular-loader.js'
}
}
},
rxjs: {
defaultExtension: 'js',
main: 'Rx.js'
},
tslib: {
defaultExtension: 'js'
},
jquery: {
defaultExtension: 'js'
},
airdatepiker: {
defaultExtension: 'js'
},
'moment': {
main: 'moment.js',
defaultExtension: 'js'
},
'ngx-intl-tel-input': {
defaultExtension: 'js'
},
'google-libphonenumber': {
defaultExtension: 'js'
}
}
});
})(this);
app.module.ts
import { BsDropdownModule } from 'ngx-bootstrap';
imports: [
BsDropdownModule.forRoot(),
]
in console from Google Chrome it shows me
GET http://localhost:3000/node_modules/ngx-bootstrap/bundles/ngx-bootstrap.umd.js/dropdown 404 (Not Found)
GET http://localhost:3000/traceur 404 (Not Found)
and i don't understand what is the problem, i tried to search on google and i didn't find similar problems, but dropdown folder in node_modules exists but is not in bundles it is in root of ngx-bootstrap folder.
I will be grateful for your help
Thank you very much
I resolved the problem, i installed another dependent
https://github.com/kondi0/ng4-intl-phone/tree/master/src/demo
Related
In order to compile my angular app AOT, I'm using webpack and gulp.
I noticed that the watch step of webpack is not working so well, sometimes work and sometimes not, and when it work the files are not being updated on the site.
Please see the code bellow and tell me if there is anything I can do with minimum changes? or should I have to write something new?
packages.json
{
"name": "my-app",
"version": "1.2.0",
"scripts": {
"start": "gulp build:dev",
"test": "gulp test",
"build": "gulp build",
"postinstall": "typings install"
},
"engines": {
"node": "6.10.3",
"npm": "4.0.5"
},
"license": "LicenseRef-LICENSE",
"private": true,
"repository": {
"url": "git+ssh://gitolite#my-app"
},
"dependencies": {
"#angular/animations": "5.0.2",
"#angular/common": "5.0.2",
"#angular/compiler": "5.0.2",
"#angular/compiler-cli": "5.0.2",
"#angular/core": "5.0.2",
"#angular/forms": "5.0.2",
"#angular/http": "5.0.2",
"#angular/platform-browser": "5.0.2",
"#angular/platform-browser-dynamic": "5.0.2",
"#angular/platform-server": "5.0.2",
"#angular/router": "5.0.2",
"#ngx-translate/core": "8.0.0",
"#ngx-translate/http-loader": "2.0.0",
"#types/file-saver": "1.3.0",
"#types/jasmine": "2.8.2",
"angular2-infinite-scroll": "0.3.4",
"core-js": "2.4.1",
"file-saver": "1.3.3",
"jasmine": "2.8.0",
"jstz": "1.0.9",
"moment": "2.18.1",
"moment-timezone": "0.5.13",
"ngx-bootstrap": "2.0.0-beta.8",
"reflect-metadata": "0.1.10",
"rxjs": "5.5.2",
"xlsx": "0.11.7",
"zone.js": "0.8.5"
},
"devDependencies": {
"#ngtools/webpack": "1.8.0",
"autoprefixer": "6.7.6",
"bootstrap-sass": "3.3.7",
"custom-tslint-formatters": "2.1.1",
"del": "2.2.2",
"enhanced-resolve": "3.3.0",
"gulp": "3.9.1",
"gulp-add-src": "0.2.0",
"gulp-cache-bust": "1.1.0",
"gulp-exec": "2.1.3",
"gulp-htmlmin": "3.0.0",
"gulp-if": "2.0.2",
"gulp-ignore": "2.0.2",
"gulp-imagemin": "3.1.1",
"gulp-jsonminify": "1.0.0",
"gulp-postcss": "6.3.0",
"gulp-preprocess": "2.0.0",
"gulp-sass": "3.1.0",
"gulp-sourcemaps": "2.4.1",
"gulp-svg-sprite": "1.3.6",
"gulp-tslint": "7.1.0",
"gulp-util": "3.0.8",
"jasmine-core": "2.8.0",
"json-loader": "0.5.4",
"karma": "1.5.0",
"karma-chrome-launcher": "2.0.0",
"karma-ie-launcher": "1.0.0",
"karma-jasmine": "1.1.0",
"karma-mocha-reporter": "2.2.2",
"karma-sourcemap-loader": "0.3.7",
"karma-typescript": "3.0.8",
"karma-typescript-es6-transform": "1.0.2",
"karma-webpack": "2.0.6",
"postcss-loader": "1.3.3",
"postcss-scss": "0.4.1",
"precss": "1.4.0",
"raw-loader": "0.5.1",
"run-sequence": "1.2.2",
"sass-loader": "6.0.6",
"ts-loader": "2.0.1",
"tslint": "5.8.0",
"typescript": "2.4.2",
"webpack": "2.2.1"
}
}
gulp.js - the main tasks
var gulp = require('gulp'),
addsrc = require('gulp-add-src'),
config = require('./gulp.config.js'),
del = require('del'),
tslint = require('gulp-tslint'),
gulpif = require('gulp-if'),
preprocess = require('gulp-preprocess'),
htmlmin = require('gulp-htmlmin'),
gutil = require('gulp-util'),
sass = require('gulp-sass'),
sourcemaps = require('gulp-sourcemaps'),
runSequence = require('run-sequence'),
webpack = require('webpack'),
webpackConfig = config.webpack,
webpackCompiler = webpack(webpackConfig),
karmaServer = require('karma').Server,
cachebust = require('gulp-cache-bust'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
imagemin = require('gulp-imagemin'),
svgSprite = require('gulp-svg-sprite'),
gulpIgnore = require('gulp-ignore'),
jsonminify = require('gulp-jsonminify'),
exec = require('child_process').exec;
gulp.task('build:dev', function (callback) {
runSequence(
'clean',
'copy:assets',
['html:index', 'sass:styles', 'tslint', 'typescript:dev'],
['watch'],
callback
)
});
gulp.task("typescript:dev", function(callback) {
var initialBuild = true;
webpackCompiler.watch(null, function(err, stats) {
if(err)
{
throw new gutil.PluginError("typescript:dev", err);
}
if (stats.hasErrors()) {
console.log(stats.toString("errors-only"));
}
if (initialBuild)
{
initialBuild = false;
// notify gulp that the initial task is done (now watching for changes)
callback();
}
else
{
console.log("typescript updated");
}
});
});
webpack.config.js
var webpackConfig = {
entry: {
'polyfills': './my-app/polyfills.ts',
'vendor': './my-app/vendor.ts',
'main': './my-app/main.ts'
},
output: {
path: __dirname + '/../dist',
filename: "[name].bundle.js"
},
resolve: {
extensions: ['.js', '.ts', '.json', '.html', '.scss'],
enforceExtension: false
},
module: {
rules: [
{ test: /\.ts$/, loaders: ['#ngtools/webpack'] },
{ test: /\.html$/, loader: "raw-loader", options: { exclude: /\.async\.html$/} },
{
test: /\.scss$/,
use:[
{loader:"raw-loader"},
{loader:"postcss-loader", options:{syntax:"postcss-scss", plugins: postcssConfig}},
{loader:"sass-loader", options:{outputStyle:"expanded"}}
]
}
],
noParse: [/angular2\/bundles\/.+/]
},
plugins: [
new AotPlugin({tsConfigPath: 'my-app/tsconfig.json', entryModule: __dirname + '/../my-app/my-app/app.module#AppModule', debug: true}),
new webpack.optimize.CommonsChunkPlugin({name: ['main', 'vendor', 'polyfills']}),
new webpack.ContextReplacementPlugin(/angular(\\|\/)core(\\|\/)(esm(\\|\/)src|src)(\\|\/)linker/, "doesnotexists")
]
};
when I run npm start I expect that webpack will be watch any changes in ts files and rebuild only those that changed.
Again thank you
everyone.
I'm trying to upgrade big appliction which was written on angular 1 to angular 2. As first step it try to create hybrid angular 1/2 appliction using official guide.
When all instructions was finished I get a error
Unhandled Promise rejection: (SystemJS) Unexpected token <
SyntaxError: Unexpected token <
at eval (<anonymous>)
at ZoneDelegate.invoke (http://localhost:8000/node_modules/zone.js/dist/zone.js:242:26)
at Zone.run (http://localhost:8000/node_modules/zone.js/dist/zone.js:113:43)
at http://localhost:8000/node_modules/zone.js/dist/zone.js:535:57
at ZoneDelegate.invokeTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:275:35)
at Zone.runTask (http://localhost:8000/node_modules/zone.js/dist/zone.js:151:47)
at drainMicroTaskQueue (http://localhost:8000/node_modules/zone.js/dist/zone.js:433:35)
at XMLHttpRequest.ZoneTask.invoke (http://localhost:8000/node_modules/zone.js/dist/zone.js:349:25)
Evaluating http://localhost:8000/app
Error loading http://localhost:8000/app ; Zone: <root> ; Task: Promise.then ; Value:
my systemjs.config.js
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': '/node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: '/app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
'#angular/upgrade': 'npm:#angular/upgrade/bundles/upgrade.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
}
}
});
})(this);
my dependencies in package.config
"dependencies": {
"#angular/common": "~2.4.0",
"#angular/compiler": "~2.4.0",
"#angular/core": "~2.4.0",
"#angular/forms": "~2.4.0",
"#angular/http": "~2.4.0",
"#angular/platform-browser": "~2.4.0",
"#angular/platform-browser-dynamic": "~2.4.0",
"#angular/router": "~3.4.0",
"#angular/upgrade": "~2.4.0",
"angular-in-memory-web-api": "~0.2.4",
"systemjs": "0.19.40",
"core-js": "^2.4.1",
"rxjs": "5.0.1",
"zone.js": "^0.7.4"
},
can someone help me with this?
You should fix that by adding the main entry point for app.
packages: {
app: {
main: 'main.js',
defaultExtension: 'js',
},
rxjs: {
defaultExtension: 'js'
}
}
This is happening because the app/main.js file is missing.
The http-server is returning HTML equivalent to index.html because there is no file to return. This is not the UMD module that zone.js expects, so we are getting a parsing error.
You will need to ignore this error once and proceed with the official guide.
We have a react app based on the react-production-starter boilerplate.
Our dev build runs fine in IE11, but for some reason our production build doesn't.
We get the following error:
Minified React error #109; visit http://facebook.github.io/react/docs/error-decoder.html?invariant=109&args[]=t for the full message or use the non-minified dev environment for full errors and additional helpful warnings.
Here are the project dependencies:
"dependencies": {
"actual": "0.2.0",
"async": "2.1.4",
"attr-accept": "1.1.0",
"aws-sdk": "2.7.11",
"babel-register": "6.18.0",
"bcrypt": "1.0.0",
"body-parser": "1.15.2",
"canvas": "1.6.2",
"clipboard": "1.5.15",
"clor": "2.0.2",
"color-convert": "1.8.2",
"color-thief": "2.2.2",
"columnify": "1.5.4",
"compression": "1.6.2",
"cookie-parser": "1.4.3",
"cors": "2.8.1",
"couchbase": "2.2.4",
"couchnode": "4.3.4",
"cross-env": "3.1.3",
"debug": "2.3.3",
"dockerode": "2.3.1",
"dotenv": "2.0.0",
"elasticsearch": "12.1.0",
"email-templates": "2.5.4",
"express": "4.14.0",
"express-useragent": "1.0.4",
"fluent-ffmpeg": "2.1.0",
"geoip-lite": "1.1.8",
"glamor": "2.20.12",
"gsap": "1.19.0",
"handlebars": "4.0.6",
"history": "4.4.1",
"hpp": "0.2.1",
"image-size": "0.5.0",
"js2xmlparser": "2.0.2",
"json2csv": "3.7.2",
"kue": "0.11.5",
"lodash": "4.17.2",
"material-ui": "0.16.4",
"moment": "2.17.1",
"mongo-oplog": "cayasso/mongo-oplog#eba0c4fe6698854cd85442ef12da97fd74282dbc",
"mongodb": "2.2.16",
"morgan": "1.7.0",
"ms": "0.7.2",
"multer": "1.2.0",
"node-cache": "4.1.0",
"node-schedule": "1.2.0",
"normalize.css": "4.2.0",
"npm-run-all": "3.1.2",
"open-graph": "0.2.2",
"passport": "0.3.2",
"passport-facebook": "2.1.1",
"passport-google-oauth": "1.0.0",
"passport-local": "1.0.0",
"promise": "7.1.1",
"pug": "2.0.0-beta6",
"react": "15.4.1",
"react-addons-css-transition-group": "15.4.1",
"react-addons-shallow-compare": "15.4.1",
"react-anything-sortable": "matanasa/react-anything-sortable",
"react-avatar-editor": "6.1.0",
"react-canvas": "1.2.1",
"react-click-outside": "tj/react-click-outside",
"react-color": "2.10.0",
"react-confirm": "0.1.14",
"react-cropper": "0.10.0",
"react-custom-scrollbars": "4.0.0",
"react-dom": "15.4.1",
"react-ga": "2.1.2",
"react-gsap-enhancer": "0.3.0",
"react-helmet": "3.2.3",
"react-infinite-scroll-component": "Hazantip/react-infinite-scroll-component#master",
"react-key-handler": "0.3.0",
"react-masonry-component": "4.4.0",
"react-paginate": "4.0.0",
"react-redux": "4.4.6",
"react-rnd": "4.2.0",
"react-router": "3.0.0",
"react-router-redux": "4.0.7",
"react-stickydiv": "3.4.19",
"react-swipeable": "3.7.0",
"react-tap-event-plugin": "2.0.1",
"react-text-input": "0.0.8",
"react-timer-hoc": "2.0.2",
"react-virtualized": "8.7.1",
"redial": "0.5.0",
"redlock": "2.1.0",
"redux": "3.6.0",
"redux-form": "6.2.1",
"redux-form-validation": "0.0.8",
"redux-logger": "2.7.4",
"redux-thunk": "2.1.0",
"request": "2.79.0",
"seamless-immutable": "7.0.1",
"sharp": "0.17.0",
"socketcluster-client": "5.1.1",
"sortablejs": "1.5.0-rc1",
"source-map-support": "0.4.6",
"ssh2": "0.5.4",
"superagent": "3.1.0",
"urijs": "1.18.4",
"vimeo": "1.2.0"
},
"devDependencies": {
"assets-webpack-plugin": "3.5.0",
"babel-cli": "6.18.0",
"babel-core": "6.18.2",
"babel-eslint": "7.1.1",
"babel-loader": "6.2.8",
"babel-plugin-transform-decorators-legacy": "1.3.4",
"babel-plugin-transform-react-constant-elements": "6.9.1",
"babel-plugin-transform-react-inline-elements": "6.8.0",
"babel-polyfill": "6.16.0",
"babel-preset-es2015": "6.18.0",
"babel-preset-react": "6.16.0",
"babel-preset-stage-0": "6.16.0",
"babel-register": "6.18.0",
"chai": "3.5.0",
"chai-http": "3.0.0",
"chalk": "1.1.3",
"core-decorators": "0.14.0",
"css-loader": "0.26.1",
"eslint": "3.11.1",
"eslint-config-airbnb": "13.0.0",
"eslint-loader": "1.6.1",
"eslint-plugin-import": "2.2.0",
"eslint-plugin-jsx-a11y": "2.2.3",
"eslint-plugin-react": "6.8.0",
"extract-text-webpack-plugin": "1.0.1",
"json-loader": "0.5.4",
"mocha": "3.2.0",
"nodemon": "1.11.0",
"npm-check": "5.4.0",
"opn": "4.0.2",
"react-copy-to-clipboard": "4.2.3",
"style-loader": "0.13.1",
"stylus": "0.54.5",
"stylus-loader": "2.4.0",
"webpack": "1.14.0",
"webpack-dev-middleware": "1.8.4",
"webpack-hot-middleware": "2.13.2"
},
Our .babelrc:
{
"presets": ["es2015", "react", "stage-0"],
"plugins": ["transform-decorators-legacy"]
}
Our webpack build:
const webpack = require('webpack');
const AssetsPlugin = require('assets-webpack-plugin');
const CONFIG = require('./webpack.base');
const { CLIENT_ENTRY, CLIENT_OUTPUT } = CONFIG;
module.exports = {
'devtool': 'source-map',
'entry': {
'main': [require.resolve('./polyfills'), CLIENT_ENTRY],
'vendor': [
'react',
'react-dom',
'react-router',
'redux',
'react-redux',
],
},
'output': {
'filename': '[name]_[chunkhash].js',
'chunkFilename': '[name]_[chunkhash].js',
'publicPath': '/assets/',
'path': CLIENT_OUTPUT,
},
'plugins': [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify('production'),
},
'__DEV__': false,
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new webpack.optimize.AggressiveMergingPlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor_[hash].js', Infinity),
new AssetsPlugin({ 'filename': 'assets.json' }),
new webpack.optimize.DedupePlugin(),
new webpack.optimize.UglifyJsPlugin({
'compressor': {
'screw_ie8': true,
'warnings': false,
},
'mangle': {
'screw_ie8': true,
},
'output': {
'comments': false,
'screw_ie8': true,
},
}),
new webpack.NoErrorsPlugin(),
],
'resolve': {
'extensions': ['', '.js', '.styl'],
},
'module': {
'loaders': [
{
'test': /\.js$/,
'loader': 'babel',
'query': {
'cacheDirectory': true,
'presets': ['es2015', 'react', 'stage-0'],
'plugins': ['transform-decorators-legacy', 'transform-react-constant-elements', 'transform-react-inline-elements'],
},
'exclude': /(node_modules)/,
},
{
'test': /\.json$/,
'loader': 'json',
},
{
'test': /\.styl|\.css$/,
'loader': 'style-loader!css-loader!stylus-loader',
},
],
},
'stylus': {
'preferPathResolver': 'webpack',
},
};
Has anyone had similar issues with IE out there?
Remove transform-react-inline-elements from plugins list of babel-loader in webpack config file.
This requires ES6 Symbol, but it is not present in IE11.
I looked through the forums, but couldn't find anything relevant.
I just started the tutorial 3 days ago, got to Step 7, and when I add the InMemoryWebApiModule to the mix (as detailed in the steps), I get this error:
All of my config files are directly from what was provided in the tutorial, but I'll provide them here anyway.
Any ideas as to what's going on?
Here is my package.json:
{
"name": "angular-quickstart",
"version": "1.0.0",
"scripts": {
"start": "tsc && concurrently \"tsc -w\" \"lite-server\" ",
"lite": "lite-server",
"tsc": "tsc",
"tsc:w": "tsc -w"
},
"licenses": [
{
"type": "MIT",
"url": "https://github.com/angular/angular.io/blob/master/LICENSE"
}
],
"dependencies": {
"#angular/common": "~2.1.1",
"#angular/compiler": "~2.1.1",
"#angular/core": "~2.1.1",
"#angular/forms": "~2.1.1",
"#angular/http": "~2.1.1",
"#angular/platform-browser": "~2.1.1",
"#angular/platform-browser-dynamic": "~2.1.1",
"#angular/router": "~3.1.1",
"#angular/upgrade": "~2.1.1",
"angular-in-memory-web-api": "~0.1.13",
"bootstrap": "^3.3.7",
"core-js": "^2.4.1",
"reflect-metadata": "^0.1.8",
"rxjs": "5.0.0-beta.12",
"systemjs": "0.19.39",
"zone.js": "^0.6.25"
},
"devDependencies": {
"#types/core-js": "^0.9.34",
"#types/node": "^6.0.45",
"concurrently": "^3.0.0",
"lite-server": "^2.2.2",
"typescript": "^2.0.3"
}
}
Here is app.module.ts:
import { NgModule } from '#angular/core';
import { BrowserModule } from '#angular/platform-browser';
import { FormsModule } from '#angular/forms';
import { HttpModule } from '#angular/http';
// Imports for loading & configuring the in-memory web api
import { InMemoryWebApiModule } from 'angular-in-memory-web-api';
import { InMemoryDataService } from './in-memory-data.service';
import { AppRoutingModule } from './app-routing.module'
import { AppComponent } from './app.component';
import { HeroDetailComponent } from './hero-detail.component';
import { HeroesComponent } from './heroes.component';
import { HeroService } from './hero.service';
import { DashboardComponent } from './dashboard.component';
#NgModule({
imports: [
AppRoutingModule,
BrowserModule,
FormsModule,
HttpModule,
InMemoryWebApiModule.forRoot(InMemoryDataService)
],
declarations: [
AppComponent,
HeroDetailComponent,
HeroesComponent,
DashboardComponent
],
providers: [ HeroService ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
Here is systemjs.config.js:
/**
* System configuration for Angular samples
* Adjust as necessary for your application needs.
*/
(function (global) {
System.config({
paths: {
// paths serve as alias
'npm:': 'node_modules/'
},
// map tells the System loader where to look for things
map: {
// our app is within the app folder
app: 'app',
// angular bundles
'#angular/core': 'npm:#angular/core/bundles/core.umd.js',
'#angular/common': 'npm:#angular/common/bundles/common.umd.js',
'#angular/compiler': 'npm:#angular/compiler/bundles/compiler.umd.js',
'#angular/platform-browser': 'npm:#angular/platform-browser/bundles/platform-browser.umd.js',
'#angular/platform-browser-dynamic': 'npm:#angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.js',
'#angular/http': 'npm:#angular/http/bundles/http.umd.js',
'#angular/router': 'npm:#angular/router/bundles/router.umd.js',
'#angular/forms': 'npm:#angular/forms/bundles/forms.umd.js',
// other libraries
'rxjs': 'npm:rxjs',
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api',
},
// packages tells the System loader how to load when no filename and/or no extension
packages: {
app: {
main: './main.js',
defaultExtension: 'js'
},
rxjs: {
defaultExtension: 'js'
},
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
}
});
})(this);
Take a look at the CHANGELOG. You need to use the umd bundle, and remove it from the packages
In systemjs.config.js you should change the mapping to:
'angular-in-memory-web-api': 'npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js'
then delete from packages:
'angular-in-memory-web-api': {
main: './index.js',
defaultExtension: 'js'
}
I want to use Dialog from PrimeNG-Module, but i always get the Error:
Unhandled Promise rejection: (SystemJS) Error: XHR error (404 Not Found) loading http://localhost:4200/node_modules/primeng/primeng.js
I used the setup configuration from http://www.primefaces.org/primeng/#/setup
But everything that i've tried, will not work.
I'm using Angular2 RC4.
system-config.ts
/** Map relative paths to URLs. */
const map: any = {
'firebase': 'vendor/firebase/firebase.js',
'angularfire2': 'vendor/angularfire2',
'primeng': 'node_modules/primeng'
};
/** User packages configuration. */
const packages: any = {
angularfire2: {
defaultExtension: 'js',
main: 'angularfire2.js'
},
'primeng': { defaultExtension: 'js' }
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'#angular/core',
'#angular/common',
'#angular/compiler',
'#angular/forms',
'#angular/http',
'#angular/router',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
/** #cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
angular-cli-build.js
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'angularfire2/**/*.js',
'firebase/*.js',
'primeng/*.js'
]
});
};
location-component.ts
import {Component} from "#angular/core";
import {LocationGridComponent} from "./location-grid/location-grid.component";
import {LocationDetailComponent} from "./location-detail/location-detail.component";
import {Dialog} from "primeng/primeng";
#Component({
selector: 'app-location',
templateUrl: 'app/location/location.component.html',
styleUrls: ['app/orienteering/orienteering.component.css', 'app/location/location.component.css'],
directives: [LocationGridComponent, LocationDetailComponent, Dialog]
})
export class LocationComponent {
display: boolean = false;
showDialog() {
this.display = true;
}
}
package.json
{
"name": "digitaler-lerngarten",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"postinstall": "typings install",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "^2.0.0-rc.4",
"#angular/compiler": "^2.0.0-rc.4",
"#angular/core": "^2.0.0-rc.4",
"#angular/forms": "^0.2.0",
"#angular/http": "^2.0.0-rc.4",
"#angular/platform-browser": "^2.0.0-rc.4",
"#angular/platform-browser-dynamic": "^2.0.0-rc.4",
"#angular/router": "^3.0.0-beta.2",
"angular-cli": "^1.0.0-beta.9",
"codelyzer": "0.0.25",
"es6-shim": "^0.35.1",
"karma": "^1.1.1",
"karma-chrome-launcher": "^1.0.1",
"karma-jasmine": "^1.0.2",
"latest-version": "^2.0.0",
"primeng": "^1.0.0-beta.9",
"primeui": "^4.1.12",
"reflect-metadata": "^0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "^0.19.31",
"ts-node": "^0.9.3",
"tslint": "^3.13.0",
"typings": "^1.3.1",
"zone.js": "^0.6.12"
},
"devDependencies": {
"angular-cli": "^1.0.0-beta.9",
"codelyzer": "^0.0.25",
"ember-cli-inject-live-reload": "^1.4.0",
"jasmine-core": "^2.4.1",
"jasmine-spec-reporter": "^2.5.0",
"karma": "^1.1.1",
"karma-chrome-launcher": "^1.0.1",
"karma-jasmine": "^1.0.2",
"protractor": "^3.3.0",
"ts-node": "^0.9.3",
"tslint": "^3.11.0",
"typescript": "^1.8.10",
"typings": "^1.3.1"
}
}
I've downgraded to Angular2 RC3, and now it works.
I had to change 'node_modules/primeng' in system-config.ts to 'vendor/primeng'.
Then i add the primeng-files in angular-cli-build.js and then rebuilding the project with "ng build".
system-config.ts
// SystemJS configuration file, see links for more information
// https://github.com/systemjs/systemjs
// https://github.com/systemjs/systemjs/blob/master/docs/config-api.md
/***********************************************************************************************
* User Configuration.
**********************************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
'firebase': 'vendor/firebase/firebase.js',
'angularfire2': 'vendor/angularfire2',
'primeng': 'vendor/primeng'
};
/** User packages configuration. */
const packages: any = {
angularfire2: {
defaultExtension: 'js',
main: 'angularfire2.js'
},
primeng: { defaultExtension: 'js' }
};
////////////////////////////////////////////////////////////////////////////////////////////////
/***********************************************************************************************
* Everything underneath this line is managed by the CLI.
**********************************************************************************************/
const barrels: string[] = [
// Angular specific barrels.
'#angular/core',
'#angular/common',
'#angular/compiler',
'#angular/forms',
'#angular/http',
'#angular/router',
'#angular/platform-browser',
'#angular/platform-browser-dynamic',
// Thirdparty barrels.
'rxjs',
// App specific barrels.
'app',
'app/shared',
/** #cli-barrel */
];
const cliSystemConfigPackages: any = {};
barrels.forEach((barrelName: string) => {
cliSystemConfigPackages[barrelName] = { main: 'index' };
});
/** Type declaration for ambient System. */
declare var System: any;
// Apply the CLI SystemJS configuration.
System.config({
map: {
'#angular': 'vendor/#angular',
'rxjs': 'vendor/rxjs',
'main': 'main.js'
},
packages: cliSystemConfigPackages
});
// Apply the user's configuration.
System.config({ map, packages });
angular-cli-build.js
// Angular-CLI build configuration
// This file lists all the node_modules files that will be used in a build
// Also see https://github.com/angular/angular-cli/wiki/3rd-party-libs
/* global require, module */
var Angular2App = require('angular-cli/lib/broccoli/angular2-app');
module.exports = function(defaults) {
return new Angular2App(defaults, {
vendorNpmFiles: [
'systemjs/dist/system-polyfills.js',
'systemjs/dist/system.src.js',
'zone.js/dist/**/*.+(js|js.map)',
'es6-shim/es6-shim.js',
'reflect-metadata/**/*.+(ts|js|js.map)',
'rxjs/**/*.+(js|js.map)',
'#angular/**/*.+(js|js.map)',
'angularfire2/**/*.js',
'firebase/*.js',
'primeng/**/*.js',
'primeui/**/*.css'
]
});
};
package.json
{
"name": "digitaler-lerngaraten",
"version": "0.0.0",
"license": "MIT",
"angular-cli": {},
"scripts": {
"start": "ng serve",
"postinstall": "typings install",
"lint": "tslint \"src/**/*.ts\"",
"test": "ng test",
"pree2e": "webdriver-manager update",
"e2e": "protractor"
},
"private": true,
"dependencies": {
"#angular/common": "2.0.0-rc.3",
"#angular/compiler": "2.0.0-rc.3",
"#angular/core": "2.0.0-rc.3",
"#angular/forms": "0.2.0",
"#angular/http": "2.0.0-rc.3",
"#angular/platform-browser": "2.0.0-rc.3",
"#angular/platform-browser-dynamic": "2.0.0-rc.3",
"#angular/router": "3.0.0-alpha.8",
"angularfire2": "^2.0.0-beta.2",
"es6-shim": "0.35.1",
"firebase": "^3.2.0",
"primeng": "^1.0.0-beta.9",
"primeui": "^4.1.12",
"reflect-metadata": "0.1.3",
"rxjs": "5.0.0-beta.6",
"systemjs": "0.19.26",
"zone.js": "0.6.12"
},
"devDependencies": {
"angular-cli": "1.0.0-beta.9",
"codelyzer": "0.0.20",
"ember-cli-inject-live-reload": "1.4.0",
"jasmine-core": "2.4.1",
"jasmine-spec-reporter": "2.5.0",
"karma": "0.13.22",
"karma-chrome-launcher": "0.2.3",
"karma-jasmine": "0.3.8",
"protractor": "3.3.0",
"ts-node": "0.5.5",
"tslint": "3.11.0",
"typescript": "1.8.10",
"typings": "0.8.1"
}
}
Try it once.
System.config({
packages: {
app: {
format: 'register',
defaultExtension: 'js'
},
'node_modules/primeng': {
format: 'cjs',
defaultExtension: 'js'
}
},
map: {
"primeng": "node_modules/primeng"
}
});
System.import('app/js/components/main')
.then(null, console.error.bind(console));
Basically follow the examples on how to install 3rd party libraries
Install package via npm
OPTIONAL! Install typings for library
Add package to angular-cli-build.js file to vendorNpmFiles array (very important). It tells where to find the files which will go to the vendor folder inside the dist folder.
Configure SystemJS mappings to know where to look for package (where all the files will be in the dist folder).