preboot / angular-webpack Goto Github PK
View Code? Open in Web Editor NEWA complete, yet simple, starter for Angular v2+ using webpack
License: MIT License
A complete, yet simple, starter for Angular v2+ using webpack
License: MIT License
I just updated my current project with this commit 4e797e4 and it is causing an issue http://localhost:8080/polyfills/angular2-polyfills.js reruns 404 not found
which causing then this wired error chain:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8080/polyfills/angular2-polyfills.js
localhost/:164 Uncaught reflect-metadata shim is required when using class decorators
localhost/:75 Uncaught TypeError: di_1.Injectable is not a function
Then just for test I git clone
the skeleton to check if there is same thing when running clean and so when I run npm start
got exactly same error.
Is there a way to use templateUrl instead of template with require?
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └─┬ [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ ├── [email protected]
│ │ │ │ └── [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├─┬ [email protected]
│ │ │ │ └── [email protected]
│ │ │ └── [email protected]
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ └─┬ [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├── UNMET PEER DEPENDENCY webpack@>=1.0.0 <3
│ └─┬ [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ └── [email protected]
It's blowing up on npm install :(
Whats' the pros / cons btw of template: require("../file.html") vs templateUrl: "../file.html" ?
I feel like lodash is an essential frontend library. I don't see many seeds using it out of the box and I think they should. It helps lessen a ton of boilerplate code and reduces lines of code in any production app.
What do you think we break the mold and be a starter that provides lodash integration out of the box?
When trying to run the site from the /dist folder after doing an "npm run build", I get the following exception in chrome dev tools console:
Error during evaluation of "click"
,
TypeError: this.directive_1_0.onClick is not a function
at t.ChangeDetector_e_0.handleEventInternal (viewFactory_e:275)
at t.handleEvent (abstract_change_detector.js:58)
at t.triggerEventHandlers (view.js:221)
at eval (viewFactory_e:361)
at dom_renderer.js:277
at dom_events.js:28
at e.run (angular2-polyfills.js:1243)
at e.run (ng_zone.js:343)
at t.run (ng_zone.js:292)
at HTMLAnchorElement.i (dom_events.js:28)
Node version 5.6.0
NPM version 3.6.0
Hello, could you put me in the right direction of how to add and import tsd to this seed? Thanks.
Just for thought...
What do you think about adding a service worker setup here? With a manifest and task in webpack?
I just made a git clone, then npm install and postinstall.
After I try to npm run lint
I get Linting 0 files.
How do I make it lint the ts files? Didn't change the tslint or anything.
I don's see anything about source maps, am I wrong?
I copied the dist contents to mydomain.com/path/to/myapp
and found the scripts and other webpacked stuff was 404ing looking for mydomain.com/js/vendor.[hash].js
(etc). I see that your publicPath
(line 60 in webpack.config.js) is set to '/'. I changed it to empty string and it seems to work.
But I see that line is involved in your recent font work. I'm not using fonts for the time being, so, as I mentioned, my site seems to be working in a subfolder but I didn't want to vary substantially from your awesome config and spoil my option for fonts later.
I wondered if anyone else found a way to run in a production subfolder. Is that intentionally not supported? Is that in general a bad practice?
I just set isTest = true;
in webpack.config.js
build just freezes at 404s will fallback to /index.html
d:\Projects\angular2-webpack>npm start
> [email protected] start d:\Projects\angular2-webpack
> npm run server
> [email protected] server d:\Projects\angular2-webpack
> webpack-dev-server --inline --progress --port 8080
webpack: bundle is now VALID.
http://localhost:8080/
webpack result is served from /
content is served from ./src/public
404s will fallback to /index.html
Sound like an issue. Also FYI in that case I was referencing the latest angular2 beta.12
When serving in development mode (npm start
), one can open browser on http://localhost:8080/
and its dev tools, then set a breakpoint, e.g. in home.ts#ngOnInit(). When reloading page, execution should pause on that line.
Breakpoint seems to be ignored, although console shows logged message. Execution proceeds beyond that. Client app runs normally, no particular errors.
Indeed, no permutation of 'karma start' works for me unless the npm task is named 'test'.
output from npm run test-watch:
/Users/cfulneck/.nvm/versions/node/v5.6.0/bin/node /Users/cfulneck/.nvm/versions/node/v5.6.0/bin/npm run-script test-watch
[email protected] test-watch /software/cmelion/angular2-webpack
karma start --no-single-run --auto-watch
ts-loader: Using [email protected] and /software/cmelion/angular2-webpack/tsconfig.json
WARNING in ./src/app/app.spec.ts
[4, 3]: unused variable: 'injectAsync'
[6, 3]: unused variable: 'TestComponentBuilder'
[10, 35]: unused variable: 'Response'
[10, 45]: unused variable: 'ResponseOptions'
[34, 47]: missing whitespace
WARNING in ./src/app/app.spec.ts
Module parse failed: /software/cmelion/angular2-webpack/node_modules/tslint-loader/index.js!/software/cmelion/angular2-webpack/src/app/app.spec.ts Line 1: Unexpected token
You may need an appropriate loader to handle this file type.
| import {
| it,
| inject,
@ ./src .spec.ts
.
.
.
webpack: bundle is now VALID.
28 02 2016 14:29:07.654:WARN [karma]: No captured browser, open http://localhost:9876/
28 02 2016 14:29:07.661:INFO [karma]: Karma v0.13.19 server started at http://localhost:9876/
28 02 2016 14:29:07.664:INFO [launcher]: Starting browser PhantomJS2
28 02 2016 14:29:08.286:INFO [PhantomJS 2.1.1 (Mac OS X 0.0.0)]: Connected on socket /#o1RrFo5G96eL_HVhAAAA with id 58356197
PhantomJS 2.1.1 (Mac OS X 0.0.0) ERROR
ReferenceError: Can't find variable: webpackJsonp
at /software/cmelion/angular2-webpack/karma-shim.js:1
I just installed d3
from npm and just import that on top of related component .ts
file
import * as d3 from 'd3';
I haven't put anything like import 'd3'
; in to vendor.ts
and without doing that I have everything working fine.
So then I just comment all default imports in vendor.ts
:
// import 'angular2/platform/browser';
// import 'angular2/platform/common_dom';
// import 'angular2/core';
// import 'angular2/router';
// import 'angular2/http';
// // RxJS
// import 'rxjs';
And still everything working just fine without any issues including building process.
So for me it is looks like there is no needs in vendor.ts
in case of just javascript modules?
Any comments on that?
FROM THE DOCS:
How to include external css files such as bootstrap.css ?
Just install the lib and import the css files in vendor.ts. For example this is how to do it with bootstrap:
npm install [email protected] --save
And in vendor.ts add the following:import 'bootstrap/dist/css/bootstrap.css';
Trying to npm install
on a freshly downloaded copy, we get:
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install"
npm ERR! node v4.3.0
npm ERR! npm v2.14.12
npm ERR! code EPEERINVALID
npm ERR! peerinvalid The package [email protected] does not satisfy its siblings' peerDependencies requirements!
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.9.11
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.12.6
npm ERR! peerinvalid Peer [email protected] wants [email protected]
npm ERR! peerinvalid Peer [email protected] wants webpack@^1.4.0
npm ERR! peerinvalid Peer [email protected] wants webpack@>=2.0.3-beta <3
npm ERR! Please include the following file with any support request:
npm ERR! D:\<some path>\angular2-webpack\npm-debug.log
Current environment is:
No global package installed beside npm and typescript
I'm wondering how the server will run immediatley after removing node_moduules
Hi, how can I get the css for bs4 into my app ? I tried using the following in style/app.scss:
$icon-font-path: "~bootstrap/fonts/bootstrap/";
@import '~bootstrap/scss/bootstrap';
Hi,
First of all, thanks a lot for this great starter. It is probably the best and simplest I have found around.
I have an issue in making the jQuery
variable global in order to use bootstrap's js.
In my vendor.ts, I have:
// Other vendors for example jQuery, Lodash or Bootstrap
// You can import js, ts, css, sass, ...
import 'jquery/dist/jquery.js'
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/js/bootstrap.js';
I tried using require
on jQuery but it always gave me the same error:
Uncaught Error: Bootstrap's JavaScript requires jQuery
Can anyone let me know how to do ?
Thanks a lot !
Do you know how it would be possible to include files like SVG and TTF in the build? When I add the imports into vendor.ts, I get the following error:
Failed to decode downloaded font: http://localhost:3000/
OTS parsing error: invalid version tag
Any ideas?
The fix of #59 still does not work, try this:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(/fonts/MaterialIcons.woff) format('woff');
}
This will only work with url(http://localhost:8080/fonts/MaterialIcons.woff)
, and hardcoding the dev host is a bad idea.
Hello, trying to figure out how webpack bundling works with such a setup:
from webpack configuration it seems that vendor.js
and app.js
are the two bundles that should be built. Then (from our understanding) those should be referenced in some HTML page. But we could not find any reference to those. Could you help us figure out what are we missing?
Thanks
Hi,
I'm using your seed to learn Webpack, and until now, everything works fine.
looking into the vendors.ts file, I see this is where you advice us to put vendor libs.
So I first tried with Lodash : in vendors.ts, I added import 'lodash';
and in the app, when I need it, I just set declare let _;
to avoid ts errors. Works fine. And works as it would, I mean, Lodash is included in the vendor generated bundle.
As second attempt, I tried to import only one Lodash method, like Capitalize
for instance.
Hard to explain here all the things I tried, but none of them worked.
Can you please tell me :
Sorry for my bad english, I'm french, hope you'll understand me well ;)
I am trying to update my project based off your template with the change you make as you make them.
With the most recent changes, I am running npm install
and getting:
typings ERR! message Unknown dependency: registry:dt/es6-shim#0.31.2+20160317120654
typings ERR! cwd /Users/sam/Code/groupinn
typings ERR! system Darwin 15.4.0
typings ERR! command "/usr/local/Cellar/node/5.10.1/bin/node" "/Users/sam/Code/groupinn/node_modules/typings/dist/bin/typings-install.js"
typings ERR! node -v v5.10.1
typings ERR! typings -v 0.6.10
typings ERR! If you need help, you may report this error at:
typings ERR! <https://github.com/typings/typings/issues>
Not sure why it's an unknown dependency, since I can do npm install es6-shim --ambient --save
and it adds the exact same version number to typings.json
.
I can see the old router being used.
import { ROUTER_PROVIDERS } from '@angular/router-deprecated';
Is there any issues with a new one?
I'm having some issues understanding the new layouts.. so are we just putting all directives, pipes, services, components into one folder? is the .component.ts something that is required? seems to me like it's going to be difficult for anyone with a project larger than a couple of pages to find anything they need.
With this new structure, i'd have 37 folders in my app/ directory and have no idea what was a component/pipe/directive/service without going into the folder and see what the file extensions are. I don't get this new layout.
Hey there
I'm currently fooling around with your starter-project and I'm experiencing a weird error. When I'm using karma with PhantomJS (on windows, sadly) I get the following error from karma-shim.js:
29 03 2016 13:48:00.909:DEBUG [phantomjs.launcher]: http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:7019 in getSymbolIterator
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:22950
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:22959
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:21763
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:21428
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:21371
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:21218
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20247
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:7273
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:7075
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:6368
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:6341
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:50
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:20 in __webpack_require__
http://localhost:9876/base/karma-shim.js?c27e536eb59d08306e4207f2dd33c3315356eaa9:40
PhantomJS 2.1.1 (Windows 7 0.0.0) ERROR
ReferenceError: Can't find variable: Symbol
at C:/pathToMyProject/karma-shim.js:7019 <- webpack:///~/angular2/src/facade/lang.js:408:0
That's the debug output of karma. When I use the Chrome-Launcher, everything works as expected but it's no use for any CI :-(
Cheers
Christoph
I have these references in my original material-design-lite
html template which is working well:
<link rel="stylesheet" href="node_modules/roboto-fontface/css/roboto-fontface.css">
<link rel="stylesheet" href="node_modules/material-design-icons/iconfont/material-icons.css">
<link rel="stylesheet" href="node_modules/material-design-lite/material.css">
<script src="node_modules/material-design-lite/material.js"></script>
Then I switched to angular2-webpack
so I put these references in to vendors.ts
which is looking like that:
import 'roboto-fontface/css/roboto-fontface.css';
import 'material-design-icons/iconfont/material-icons.css';
import 'material-design-lite/material.css';
import 'material-design-lite/material.js';
But when I loading the app the fonts(roboto-fontface.css
) and icons(material-icons.css
) not getting loaded/parsed by browser correctly and in Chrme Dev Console I can see some warnings related to that:
Failed to decode downloaded font: http://localhost:8080/
:8080/#/dashboard:1 OTS parsing error: invalid version tag
It is seams to be issue with file-loader
webpack-contrib/file-loader#38
Then I tried that solution http://www.vimalselvam.com/2015/12/19/webpack-loader-for-fonts/
So come up with this {test: /\.((png|jpe?g|gif|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(woff|woff2|ttf|eot|ico)$/, loader: 'file?name=[path][name].[ext]?[hash]'},
but got build errors:
ERROR in ./~/roboto-fontface/fonts/Roboto-Thin.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-Thin.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:527-562 6:1146-1181
ERROR in ./~/roboto-fontface/fonts/Roboto-ThinItalic.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-ThinItalic.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:1758-1799 6:2431-2472
ERROR in ./~/roboto-fontface/fonts/Roboto-Light.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-Light.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:3014-3050 6:3642-3678
ERROR in ./~/roboto-fontface/fonts/Roboto-LightItalic.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-LightItalic.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:4262-4304 6:4944-4986
ERROR in ./~/roboto-fontface/fonts/Roboto-Regular.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-Regular.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:5542-5580 6:6188-6226
ERROR in ./~/roboto-fontface/fonts/Roboto-RegularItalic.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-RegularItalic.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:6824-6868 6:7524-7568
ERROR in ./~/roboto-fontface/fonts/Roboto-Medium.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-Medium.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:8117-8154 6:8754-8791
ERROR in ./~/roboto-fontface/fonts/Roboto-MediumItalic.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-MediumItalic.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:9382-9425 6:10073-10116
ERROR in ./~/roboto-fontface/fonts/Roboto-BlackItalic.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-BlackItalic.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:14386-14428 6:15068-15110
ERROR in ./~/roboto-fontface/fonts/Roboto-Bold.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-Bold.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:10651-10686 6:11270-11305
ERROR in ./~/roboto-fontface/fonts/Roboto-Black.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-Black.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:13138-13174 6:13766-13802
ERROR in ./~/roboto-fontface/fonts/Roboto-BoldItalic.svg
Module parse failed: d:\Projects\2016\Clientbro\App\light\app\node_modules\roboto-fontface\fonts\Roboto-BoldItalic.svg Line 1: Unexpected token <
You may need an appropriate loader to handle this file type.
| <?xml version="1.0" standalone="no"?>
| <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
| <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
@ ./~/css-loader?sourceMap!./~/postcss-loader!./~/roboto-fontface/css/roboto-fontface.css 6:11882-11923 6:12555-12596
Child html-webpack-plugin for "index.html":
chunk {0} index.html 325 bytes [rendered]
webpack: bundle is now VALID.
Team,
What's the best practice on adding a non angular2 JS library that resides in CDN?
Also, what's the best practice to use google fonts?
Thanks!
The angular-cli places new components created by 'ng generate component' in src/client/app/ rather than the src/app/components folder that angular2-webpack uses for their components.
Here's the output of a ng generate component command I just ran:
craig@craig-G750JX:~/git/angular2-webpack$ ng generate component my-feature1
Could not start watchman; falling back to NodeWatcher for file system events.
Visit http://www.ember-cli.com/user-guide/#watchman for more info.
installing component
create src/client/app/my-feature1/my-feature1.component.css
create src/client/app/my-feature1/my-feature1.component.html
create src/client/app/my-feature1/my-feature1.component.spec.ts
create src/client/app/my-feature1/my-feature1.component.ts
create src/client/app/my-feature1/index.ts
craig@craig-G750JX:~/git/angular2-webpack$
I am using angular-cli 0.0.33 with node 5.7.1.
Hey, I'm running into an issue since upgrading to beta 1 where it will run fine but give errors like this when doing a production build...
No provider for t! (t -> t)
I've also seen undefined errors after with another app copy...any ideas as to what may be causing this? It runs fine in beta 0 and fine in beta 1 on watch, but not build.
can you recommend best way to load bootstrap.css?
of course it's css and not scss and I believe all css loading is disabled in your examples...
tx for the time
Sean
Any known issues if used for an RC0 project?
Can you change it so that when you do a build it renders the stylesheet on top of js instead of it being in one? Or is there another work around? Seems like having it together can cause flicker with using Bootstrap.
Just wondering what is the best approach to debug using vscode?
Should I just run npm run build
#93 and debug dist
by running live-server
or something or there is a better way?
Getting Uncaught reflect-metadata shim is required when using class decorators.
you totally changed your folder structure mid-project. it's not like this style standard is new, it's been out for months.. i've lost all respect for your projects continuity. No way anyone in their right mind should follow this project after these recent changes.
I just placed json
file under services/api
but when running the app my json file is not available and server returning 404
status.
404
- Cannot GET /services/api/data.json
Since updating to beta 3, I get
DEPRECATION WARNING: 'enqueueTask' is no longer supported and will be removed in next major release. Use addTask/addRepeatingTask/addMicroTask
lang.ts:356 Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode.
angular2-polyfills.js:1152 DEPRECATION WARNING: 'dequeueTask' is no longer supported and will be removed in next major release. Use removeTask/removeRepeatingTask/removeMicroTask
Does the configuration of this seed need to be updated or is it something else?
Protractor is configured to test against port 3000.
When I "npm start" app is on port 8080.
Either protractor baseUrl is updated to 8080 or devServer has port: 3000.
Angular2 beta 7 currently requires several shims to work with IE. If you build and run the project as-is in IE11, it will throw several exceptions and fail to start:
Line: 38
Error: Object doesn't support property or method 'keys'
Line: 422
Error: Unable to get property 'createFromList' of undefined or null reference
To fix, I modified vendor.ts to add the following lines at the top:
// fixes for IE
import 'es6-shim/es6-shim.js';
import './shims_for_IE.js';
The shims_for_IE.js
file is located in node_modules/angular2/es6/dev/src/testing/shims_for_IE.js. However, I was not able to import
directly from this path. Webpack kept claiming that it could not find the file/directory. I'm not sure if a package.json file somewhere along the path is confusing things, or why that doesn't work. I finally gave up and copied shims_for_IE.js
to the my-app\src
folder so that it sits next to vendor.ts
.
Wondering if you can help debugging with WebStorm?
As per WebStorm they require that we debug against a dist directory as specified in: https://blog.jetbrains.com/webstorm/2015/09/debugging-webpack-applications-in-webstorm/
however, as per your scripts, when running webpack-dev-server, it is all in memory as in:
"server": "webpack-dev-server --inline --progress --colors --display-error-details --display-cached --hot --port=3000",
is it possible to run webpack-dev-server in a dist directory so we can have source maps so we can insert into WebStorm mapping for debugging?
tx
Sean
on my Windows 10 machine I get this from karma start
C:\Users\Me\Documents\GitHub\angular2-webpack>karma start
05 05 2016 10:53:13.622:WARN [preprocess]: Can not load "webpack", it is not registered!
Perhaps you are missing some plugin?
05 05 2016 10:53:13.622:WARN [preprocess]: Can not load "sourcemap", it is not registered!
Perhaps you are missing some plugin?
05 05 2016 10:53:13.653:WARN [reporter]: Can not load "coverage", it is not registered!
Perhaps you are missing some plugin?
C:\Users\Me\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:9
throw error('No provider for "' + name + '"!');
^
Error: No provider for "framework:jasmine"! (Resolving: framework:jasmine)
at error (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:22:12)
at Object.parent.get (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:9:13)
at get (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:54:19)
at C:\Users\Me\AppData\Roaming\npm\node_modules\karma\lib\server.js:138:20
at Array.forEach (native)
at Server._start (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\lib\server.js:137:21)
at invoke (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\node_modules\di\lib\injector.js:75:15)
at Server.start (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\lib\server.js:102:18)
at Object.exports.run (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\lib\cli.js:243:26)
at Object.<anonymous> (C:\Users\Me\AppData\Roaming\npm\node_modules\karma\bin\karma:3:23)
at Module._compile (module.js:409:26)
at Object.Module._extensions..js (module.js:416:10)
at Module.load (module.js:343:32)
at Function.Module._load (module.js:300:12)
at Function.Module.runMain (module.js:441:10)
at startup (node.js:139:18)
at node.js:968:3
I'm a webpack n00b and trying to figure out how to use this starter with alertify.js.
I'm confused as there has previously been an alertify issue discussed before so not sure whether my problem relates to that or my use of angular2-webpack.
npm install alertify.js --save
about.ts
import {Component, OnInit} from 'angular2/core';
import alertify from 'alertify.js';
@Component({
selector: 'about',
template: require('./about.html'),
styles: [require('./about.scss')],
providers: [],
directives: [],
pipes: []
})
export class About implements OnInit {
constructor() {
// Do stuff
}
ngOnInit() {
console.log('Hello About');
alertify.success("Alertify is working!");
}
}
JS Console
./src/app/components/about/about.ts
(2,22): error TS2307: Cannot find module 'alertify.js'.
Any help appreciated!
I used the guidelines to import third-party css libraries to import material design lite:
In vendor.ts:
// Material Design Lite
import 'material-design-lite/dist/material.indigo-blue.min.css';
import 'material-design-lite/dist/material.min.js';
There is a strange problem happening, when I change route within the angular2 app it looks like all the styles from material design are lost.
I added material design through npm with:
npm install --save material-design-lite
This behaviour is also the same when I compile and run the production build. (npm run build)
Im using this project within docker containes, and it has uge time impact when used in a CI. the build of the container takes more then 20 min, and the redeployment as well, at least 10 min. I was wondering if there is any way to minimize the build time. For example cut most of the npm packages on certain environments.
Thanks.
Hello
thanks for sharing this project. We were looking at a similar one, and there they mentioned global dependencies to be installed.
Does this starter project need some global dependencies as well? We could not find any mention on readme about it.
Thanks
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.