Code Monkey home page Code Monkey logo

angular2-starter-kit's Introduction

Please Star

What we've got here

  • Server Side rendering for instant page loading
  • Preboot to catch browser events before Angular2 is ready to work.
  • Webpack and its Code Splitting feature which allows us to lazy load parts of an application if needed.
  • Live Reloading, a browser will be reloaded on any change in server or browser code. It works well for both a main thread and web workers.
  • TypeScript 2
  • Linting with TSLint
  • Express - de facto standard for Node.js web apps.
  • PM2 - most advanced Node.js process manager
  • Unit testing with Karma
  • End-to-End testing with Protractor

Installation

  • yarn install (npm install will still work)

Serve

  • npm start to build your client app and start a web server
  • npm run build to prepare a distributable bundle

Development

  • run npm start and npm run watch in two separate terminals to build your client app, start a web server, and allow file changes to update in realtime

Watch files

  • npm run watch to build your client app and start a web server

AoT and Prod

  • npm run build:prod:ngc to compile the ngfactory files and build prod

angular2-starter-kit's People

Contributors

bkinsey808 avatar paullryan avatar peter-mach avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

angular2-starter-kit's Issues

Not able to debug

I am not able to attach or launch debugger with VS Code
However, as there are only index.js files and with sourcemap files, is there anything I am missing.
Please find ref. code

tsconfig.json

{
  "compilerOptions": {
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "module": "commonjs",
    "moduleResolution": "node",
    "outDir": "dist",
    "sourceMap": true,
    "sourceRoot": "src",
    "noEmitHelpers": true,
    "target": "es5",
    "typeRoots": [
      "node_modules/@types"
    ],
    "lib": ["es6", "dom"]
  },
  "exclude": [
    "node_modules"
  ],
  "angularCompilerOptions": {
    "debug": false
  },
  "compileOnSave": false,
  "buildOnSave": false,
  "atom": { "rewriteTsconfig": false }
}

Chrome VS Code Launch.json

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Launch",
            "type": "node",
            "request": "launch",
            "program": "${workspaceRoot}/src/server.ts",
            "stopOnEntry": false,
            "args": [],
            "cwd": "${workspaceRoot}",
            "preLaunchTask": null,
            "runtimeExecutable": null,
            "runtimeArgs": [
                "--nolazy"
            ],
            "env": {
                "NODE_ENV": "development"
            },
            "externalConsole": false,
            "sourceMaps": true,
            "outDir": null
        },
        {
            "name": "Attach",
            "type": "node",
            "request": "attach",
            "port": 5858,
            "address": "localhost",
            "restart": false,
            "sourceMaps": false,
            "outDir": null,
            "localRoot": "${workspaceRoot}",
            "remoteRoot": null
        },
        {
            "name": "Attach to Process",
            "type": "node",
            "request": "attach",
            "processId": "${command.PickProcess}",
            "port": 5858,
            "sourceMaps": true,
            "outDir": null
        }
    ]
}`

Can you help?

warnings and build error

Hi I'm super excited about this project, can't wait to get hacking on it. Unfortunately, I am blocked at this point.

I got warnings when I ran npm install:

> [email protected] install /home/bkinsey/opt/pmachowski/angular2-starter-kit/node_modules/node-zopfli
> node-pre-gyp install --fallback-to-build

make: Entering directory '/home/bkinsey/opt/pmachowski/angular2-starter-kit/node_modules/node-zopfli/build'
  CXX(target) Release/obj.target/zopfli/src/zopfli-binding.o
../src/zopfli-binding.cc: In static member function ‘static Nan::NAN_METHOD_RETURN_TYPE nodezopfli::CompressBinding::Sync(Nan::NAN_METHOD_ARGS_TYPE)’:
../src/zopfli-binding.cc:173:20: warning: ‘format’ may be used uninitialized in this function [-Wmaybe-uninitialized]
     &out, &outsize);
                    ^
../src/zopfli-binding.cc: In static member function ‘static Nan::NAN_METHOD_RETURN_TYPE nodezopfli::CompressBinding::Async(Nan::NAN_METHOD_ARGS_TYPE)’:
../src/zopfli-binding.cc:105:78: warning: ‘format’ may be used uninitialized in this function [-Wmaybe-uninitialized]
  : Nan::AsyncWorker(callback), format(format), zopfli_options(zopfli_options) {
                                                                             ^
../src/zopfli-binding.cc:150:16: note: ‘format’ was declared here
   ZopfliFormat format;
                ^
./Release/.deps/Release/obj.target/zopfli/src/zopfli-binding.o.d.raw { dev: 2052,

Also when I ran npm start I got this:

> [email protected] prestart /home/bkinsey/opt/pmachowski/angular2-starter-kit
> npm run build


> [email protected] prebuild /home/bkinsey/opt/pmachowski/angular2-starter-kit
> npm run clean:dist


> [email protected] clean:dist /home/bkinsey/opt/pmachowski/angular2-starter-kit
> rimraf dist


> [email protected] build /home/bkinsey/opt/pmachowski/angular2-starter-kit
> node tools/build.prod.js

zlib.js:227
    callback(err, buf);
    ^

TypeError: callback is not a function
    at Gzip.onEnd (zlib.js:227:5)
    at emitNone (events.js:85:20)
    at Gzip.emit (events.js:179:7)
    at endReadableNT (_stream_readable.js:913:12)
    at _combinedTickCallback (node.js:377:13)
    at process._tickCallback (node.js:401:11)

npm ERR! Linux 4.2.0-34-generic
npm ERR! argv "/home/bkinsey/.nvm/versions/node/v5.7.1/bin/node" "/home/bkinsey/.nvm/versions/node/v5.7.1/bin/npm" "run" "build"
npm ERR! node v5.7.1
npm ERR! npm  v3.6.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] build: `node tools/build.prod.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] build script 'node tools/build.prod.js'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-starter-kit package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node tools/build.prod.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-starter-kit
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2-starter-kit
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/bkinsey/opt/pmachowski/angular2-starter-kit/npm-debug.log

npm ERR! Linux 4.2.0-34-generic
npm ERR! argv "/home/bkinsey/.nvm/versions/node/v5.7.1/bin/node" "/home/bkinsey/.nvm/versions/node/v5.7.1/bin/npm" "start"
npm ERR! node v5.7.1
npm ERR! npm  v3.6.0
npm ERR! code ELIFECYCLE
npm ERR! [email protected] prestart: `npm run build`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] prestart script 'npm run build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the angular2-starter-kit package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     npm run build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs angular2-starter-kit
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls angular2-starter-kit
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     /home/bkinsey/opt/pmachowski/angular2-starter-kit/npm-debug.log

(but there was no log)

Renders <html> headers twice

Below is a snippet of the page source. This is a fresh checkout from the latest repo here on github:

<!DOCTYPE html>
<html>
  <head>
    <title>Angular 2 Starter Kit - Uniwersal, Webpack, PostCSS, Node.js/Express</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
    <base href="/"></base>
    <link rel="stylesheet" href="/styles.css" media="screen" charset="utf-8">
  </head>
  <body>
    <!DOCTYPE html><html><head>
    <title>Angular 2 Starter Kit - Uniwersal, Webpack, PostCSS, Node.js/Express</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="assets/images/favicon.ico">
    <base href="/">
    <link rel="stylesheet" href="/styles.css" media="screen" charset="utf-8">
  </head>
  <body>
    <app><router-outlet></router-outlet>

Why is it doing this? and how do I make it stop?

error during npm install

Tried on Windows 8 and 10 (I assume you won't see this issue on Mac).
Error output:

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" "i"
npm ERR! node v6.3.1
npm ERR! npm  v3.10.3
npm ERR! code ELIFECYCLE

npm ERR! [email protected] install: `node-pre-gyp install --fallback-to-build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] install script 'node-pre-gyp install --fallback-to-build'.
npm ERR! Make sure you have the latest version of node.js and npm installed.
npm ERR! If you do, this is most likely a problem with the fsevents package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR!     node-pre-gyp install --fallback-to-build
npm ERR! You can get information on how to open an issue for this project with:
npm ERR!     npm bugs fsevents
npm ERR! Or if that isn't available, you can get their info via:
npm ERR!     npm owner ls fsevents
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR!     B:\Source\angular2-starter-kit-master\npm-debug.log

Any help is appreciated

Server Error when npm run serve

Getting this Error: Server Error with following stack trace when running production mode i.e. npm run serve. Below I have also included the browser console output.

Error: Server Error at E:\0000.src\02.web.02\00.webpack\angular2-starter-kit-master\dist\private\server.js:83:23 at Layer.handle_error (E:\0000.src\02.web.02\00.webpack\angular2-starter-kit-master\node_modules\express\lib\router\layer.js:71:5) at trim_prefix (E:\0000.src\02.web.02\00.webpack\angular2-starter-kit-master\node_modules\express\lib\router\index.js:310:13) at E:\0000.src\02.web.02\00.webpack\angular2-starter-kit-master\node_modules\express\lib\router\index.js:280:7 at Function.process_params (E:\0000.src\02.web.02\00.webpack\angular2-starter-kit-master\node_modules\express\lib\router\index.js:330:12) at next (E:\0000.src\02.web.02\00.webpack\angular2-starter-kit-master\node_modules\express\lib\router\index.js:271:10) at E:\0000.src\02.web.02\00.webpack\angular2-starter-kit-master\dist\private\server.js:69:13 at Layer.handle [as handle_request] (E:\0000.src\02.web.02\00.webpack\angular2-starter-kit-master\node_modules\express\lib\router\layer.js:95:5) at trim_prefix (E:\0000.src\02.web.02\00.webpack\angular2-starter-kit-master\node_modules\express\lib\router\index.js:312:13) at E:\0000.src\02.web.02\00.webpack\angular2-starter-kit-master\node_modules\express\lib\router\index.js:280:7 DEPRECATION WARNING:renderToStringWithPrebootis no longer supported and will be removed in next release. DEPRECATION WARNING:renderToStringis no longer supported and will be removed in next release. DEPRECATION WARNING:renderToStringWithPrebootis no longer supported and will be removed in next release. DEPRECATION WARNING:renderToStringis no longer supported and will be removed in next release.

Browser console output:
dom_adapter.ts:143POST http://localhost:3000/sockjs-node/464/f41f5cug/xhr_streaming?t=1461350744960 500 (Internal Server Error)scheduleTask @ dom_adapter.ts:143ZoneDelegate.scheduleTask @ dom_adapter.ts:143Zone.scheduleMacroTask @ dom_adapter.ts:143(anonymous function) @ dom_adapter.ts:143send @ VM1625:3AbstractXHRObject._start @ abstract-xhr.js:128(anonymous function) @ abstract-xhr.js:21ZoneDelegate.invokeTask @ dom_adapter.ts:143Zone.runTask @ dom_adapter.ts:143ZoneTask.invoke @ dom_adapter.ts:143 (index):1 EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection. 3VM1784 worker.js:10Uncaught reflect-metadata shim is required when using class decorators(anonymous function) @ VM1784 worker.js:10(anonymous function) @ VM1784 worker.js:10__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:9__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:1__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:10__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:6__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:1__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:23__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:1__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:1 websocket.js:32 WebSocket connection to 'ws://localhost:3000/sockjs-node/464/xc03qg3h/websocket' failed: Connection closed before receiving a handshake response dom_adapter.ts:143POST http://localhost:3000/sockjs-node/464/ilyvw4dg/xhr?t=1461350747181 500 (Internal Server Error)scheduleTask @ dom_adapter.ts:143ZoneDelegate.scheduleTask @ dom_adapter.ts:143Zone.scheduleMacroTask @ dom_adapter.ts:143(anonymous function) @ dom_adapter.ts:143send @ VM1625:3AbstractXHRObject._start @ abstract-xhr.js:128(anonymous function) @ abstract-xhr.js:21ZoneDelegate.invokeTask @ dom_adapter.ts:143Zone.runTask @ dom_adapter.ts:143ZoneTask.invoke @ dom_adapter.ts:143 jsonp?c=_jp.alntfjc:1 Uncaught SyntaxError: Unexpected token < client:70 [WDS] Disconnected!sock.onclose @ client:70EventTarget.dispatchEvent @ eventtarget.js:49(anonymous function) @ main.js:356ZoneDelegate.invokeTask @ dom_adapter.ts:143Zone.runTask @ dom_adapter.ts:143ZoneTask.invoke @ dom_adapter.ts:143 VM1784 worker.js:10Uncaught reflect-metadata shim is required when using class decorators(anonymous function) @ VM1784 worker.js:10(anonymous function) @ VM1784 worker.js:10__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:9__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:1__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:10__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:6__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:1__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:23__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:1__webpack_require__ @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:1(anonymous function) @ VM1784 worker.js:1 dom_adapter.ts:143 POST http://localhost:3000/sockjs-node/689/qcqbzzg5/xhr_streaming?t=1461350750402 500 (Internal Server Error)scheduleTask @ dom_adapter.ts:143ZoneDelegate.scheduleTask @ dom_adapter.ts:143Zone.scheduleMacroTask @ dom_adapter.ts:143(anonymous function) @ dom_adapter.ts:143send @ VM1625:3AbstractXHRObject._start @ abstract-xhr.js:128(anonymous function) @ abstract-xhr.js:21ZoneDelegate.invokeTask @ dom_adapter.ts:143Zone.runTask @ dom_adapter.ts:143ZoneTask.invoke @ dom_adapter.ts:143 (index):1 EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.

http/2

Support for http/2 would be an interesting and forward-thinking feature for this project.

Favicon doesn't work

Favicon is imported by require in src/server/index.html#L7.

Here is request url in browser, note the trailing )':
Request URL:http://localhost:3000/assets/images/favicon.ico')

This causes server to respond with entire page.

Update typings.json

Typings ambient has been removed in favour of global, this breaks the build and should be fixed.

Server Side Rendering Possibly not Working.

After turning server side rendering on with exports.HAS_SS = true; the page does not render server side.

Looking at the page's source we can still see <app><router-outlet></router-outlet></app> instead of the actual content as rendered in the browser.

Uncaught TypeError: Cannot read property 'cleanup' of null

Getting the following error in browser console:
Uncaught TypeError: Cannot read property 'cleanup' of null (index):675

Not sure if related but also getting some deprecation warnings from Webpack:
DEPRECATION WARNING:renderToStringWithPrebootis no longer supported and will be removed in next release.
DEPRECATION WARNING:renderToStringis no longer supported and will be removed in next release.

No compatible version found: [email protected]

I get this error when I run npm install:

npm ERR! Windows_NT 6.3.9600
npm ERR! argv "D:\\Program Files\\nodejs\\node.exe" "C:\\Users\\Pierrick\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js" "install" "angular2-universal-preview"
npm ERR! node v5.8.0
npm ERR! npm  v3.8.1

npm ERR! No compatible version found: [email protected]
npm ERR! Valid install targets:
npm ERR! 0.70.8, 0.70.7, 0.70.6, 0.70.5, 0.70.4, 0.70.3, 0.70.2, 0.70.1, 0.70.0, 0.61.2, 0.61.1, 0.61.0, 0.60.2, 0.60.1, 0.60.0, 0.55.4, 0.55.3, 0.55.2, 0.55.1, 0.55.0, 0.52.0, 0.51.0, 0.50.0, 0.42.0, 0.41.2, 0.41.1, 0.41.0, 0.40.0, 0.32.2, 0.32.1, 0.32.0, 0.31.0, 0.30.1, 0.30.0, 0.29.0, 0.28.0, 0.27.0, 0.26.0, 0.25.0, 0.24.0, 0.23.1, 0.23.0, 0.22.1, 0.22.0, 0.21.0, 0.20.0, 0.19.0, 0.18.0, 0.17.0, 0.16.0, 0.14.0, 0.13.0, 0.12.1, 0.12.0, 0.11.0, 0.10.0, 0.9.0, 0.8.1, 0.8.0, 0.6.1, 0.6.0, 0.5.4, 0.5.3, 0.5.2, 0.5.1, 0.5.0, 0.4.7, 0.4.6, 0.4.4, 0.4.3, 0.4.2, 0.4.1, 0.4.0, 0.3.7, 0.3.6, 0.3.5, 0.3.4, 0.3.2, 0.3.1, 0.3.0, 0.2.0, 0.1.9, 0.1.8, 0.1.7, 0.1.6, 0.1.5, 0.1.3, 0.1.2, 0.1.1, 0.1.0

One component for all?

Why are you creating only one component "home" with all the content inside? this is not the grace of components!

How To add 3rd Party Ui Kit ex: Material Ui

i'm triyng add this project Clarity Ui im added ClarityModule node.module.ts and browser.module.ts but i get this error.

C:\Users\BioFr\Desktop\Bahis\dist\server\index.js:55915
        var /** @type {?} */ parentCtor = Object.getPrototypeOf(typeOrFunc.prototype).constructor;
                                                 ^

TypeError: Cannot convert undefined or null to object
    at Function.getPrototypeOf (native)
    at ReflectionCapabilities.annotations (C:\Users\BioFr\Desktop\Bahis\dist\server\index.js:55915:50)
    at Reflector.annotations (C:\Users\BioFr\Desktop\Bahis\dist\server\index.js:56107:44)
    at DirectiveResolver.isDirective (C:\Users\BioFr\Desktop\Bahis\dist\server\index.js:15407:61)
    at CompileMetadataResolver._getTypeDescriptor (C:\Users\BioFr\Desktop\Bahis\dist\server\index.js:16707:37)
    at C:\Users\BioFr\Desktop\Bahis\dist\server\index.js:16591:130
    at Array.forEach (native)
    at CompileMetadataResolver.getNgModuleMetadata (C:\Users\BioFr\Desktop\Bahis\dist\server\index.js:16576:49)
    at JitCompiler._loadModules (C:\Users\BioFr\Desktop\Bahis\dist\server\index.js:48179:64)
    at JitCompiler._compileModuleAndComponents (C:\Users\BioFr\Desktop\Bahis\dist\server\index.js:48139:52)

Fix node scripts for windows users

There are some issues when running node scripts on Windows machines, mainly related to ENV variables being used: NODE_ENV, etc

Affected tasks: install, build, etc

Thank you.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.