Git Product home page Git Product logo

angular-rollup-starter's Introduction

Angular2 Rollup Seed

Build Status Build status

Angular2 starter seed based on Rollup. Production builds including AoT steps. Starter also comes with Universal support built-in.

Start

First, clone this repository.

git clone https://github.com/jkuri/angular-rollup-starter.git --depth 1

Move into cloned directory and run

npm install

Usage

Serve

npm start

Note Initial load takes some time so vendor files are generated. Then it runs like a charm with cached builds which happens to be really fast.

This serves your app with live-reload enabled.

Production Build

Production builds automatically includes AoT (Ahead of Time) compilation steps.

npm run roll

Universal (Isomorphic) Production Build

npm run roll:prerender

Routes stored in config.json as universalRoutes will be prerendered into dist/ directory. For example

{
  "externalPackages": { },
  "styles": ["css/app.css"],
  "universalRoutes": ["/", "/docs", "/docs/child"]
}

will generate prerendered content in dist/index.html dist/docs.html and dist/docs/child.html.

To properly serve prerendered content use below nginx configuration.

server {
  listen 80;
  server_name subdomain.example.com example.com;

  root /path/to/dist;

  location / {
    try_files $uri.html $uri $uri/ /index.html;
  }
}

Licence

MIT

angular-rollup-starter's People

Contributors

jkuri 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

Watchers

 avatar  avatar  avatar  avatar  avatar

angular-rollup-starter's Issues

Error headling

Rollup build does not handle error, if i misspell something, build also successful a good example:
app.component.ts

import { wrongComponent } from '@angular/core';
import * as rx from 'rxjs';
import * as moment from 'moment';

missingglobal.init('');

console.loggggg(rx, moment);

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  title = 'app works!';
}
[BS] File changed: dist/main.js.map
[BS] File changed: dist/main.js
Build time (main): 2799ms

Karma tests not working

Commands:

npm i
npm run test

Results in:

03 10 2016 10:16:38.508:ERROR [preprocessor.rollup]: Could not load C:\Users\Mar co\Sources\Github\angular2-rollup-starter\node_modules\rxjs-es/Rx (imported by C :\Users\Marco\Sources\Github\angular2-rollup-starter\src\test.ts): ENOENT: no su ch file or directory, open 'C:\Users\Marco\Sources\Github\angular2-rollup-starte r\node_modules\rxjs-es\Rx'
at C:/Users/Marco/Sources/Github/angular2-rollup-starter/src/test.ts
Error: Could not load C:\Users\Marco\Sources\Github\angular2-rollup-starter\node _modules\rxjs-es/Rx (imported by C:\Users\Marco\Sources\Github\angular2-rollup-s tarter\src\test.ts): ENOENT: no such file or directory, open 'C:\Users\Marco\Sou rces\Github\angular2-rollup-starter\node_modules\rxjs-es\Rx'
at C:\Users\Marco\Sources\Github\angular2-rollup-starter\node_modules\rollup \dist\rollup.js:8775:10
03 10 2016 10:16:38.516:INFO [karma]: Karma v1.3.0 server started at http://loca lhost:9876/
03 10 2016 10:16:38.517:INFO [launcher]: Launching browser Chrome with unlimited concurrency
03 10 2016 10:16:38.524:INFO [launcher]: Starting browser Chrome
03 10 2016 10:16:41.836:INFO [Chrome 53.0.2785 (Windows 10 0.0.0)]: Connected on socket /#Md2yDVtUkbO4HHUYAAAA with id 90653529
Chrome 53.0.2785 (Windows 10 0.0.0) ERROR
You need to include some adapter that implements karma.start method!

How to include 3rd party libs

How to include 3rd party libs like ng2-translate, ng2-material and others?
After adding module to vendor.ts and build i have errors.
Inside your files i added:
vendor.ts

import {TranslateModule} from 'ng2-translate/ng2-translate';
export default {
   TranslateModule,
}

build.ts

globals:{
'ng2-translate/ng2-translate': 'vendor.TranslateModule'
}
external: [
        'ng2-translate/ng2-translate'
      ]

I fixed it
import * as _angular_translate from 'ng2-translate/ng2-translate';

default as _angular_translate,

build
globals as 'ng2-translate/ng2-translate': 'vendor._angular_translate'
and external 'ng2-translate/ng2-translate'

But I can't configure ng2-auto-complete the same way and I don't know why

with npm run serve it is working but
after this configuration I have this error with npm run roll
compile error: Error: Could not resolve '../../../src/translate.service'

How to include rxjs map operator in vendor.ts ?

In webpack I can use the following code to include the rxjs map operator:

// vendor.ts

import 'rxjs/add/operator/map';

Is there any solution to include the rxjs operator in one place, so no need to import the operator in every file that uses it?

How to use .scss syntax, and also compile scss in components?

Is there any way to instead of using the Sass indented syntax, use the scss syntax for the main stylesheet?

Also, including scss files in components themselves, with the styleUrls property in a component? For example:

@Component( {
  selector: 'home-component',
  styleUrls: [ 'home.component.scss' ],    // <-- this here doesn't seem to do anything
  templateUrl: 'home.component.html'
} )

spawn npm ENOENT

d:\AngularJS\Tutorials\New\Apps\angular2-rollup-starter>npm run serve

[email protected] serve d:\AngularJS\Tutorials\New\Apps\angular2-rollup-starter
node ./scripts/server.js

Starting initial build...
events.js:160
throw er; // Unhandled 'error' event
^

Error: spawn npm ENOENT
at exports._errnoException (util.js:1008:11)
at Process.ChildProcess._handle.onexit (internal/child_process.js:182:32)
at onErrorNT (internal/child_process.js:348:16)
at _combinedTickCallback (internal/process/next_tick.js:74:11)
at process._tickCallback (internal/process/next_tick.js:98:9)

npm ERR! Windows_NT 10.0.10586
npm ERR! argv "C:\Program Files\nodejs\node.exe" "D:\Apps\NodeData\npm\node_modules\npm\bin\npm-cli.js" "run" "serve"
npm ERR! node v6.3.0
npm ERR! npm v3.10.6
npm ERR! code ELIFECYCLE
npm ERR! [email protected] serve: node ./scripts/server.js
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve script 'node ./scripts/server.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-rollup-starter package,
npm ERR! not with npm itself.
npm ERR! Tell the author that this fails on your system:
npm ERR! node ./scripts/server.js
npm ERR! You can get information on how to open an issue for this project with:
npm ERR! npm bugs angular2-rollup-starter
npm ERR! Or if that isn't available, you can get their info via:
npm ERR! npm owner ls angular2-rollup-starter
npm ERR! There is likely additional logging output above.

npm ERR! Please include the following file with any support request:
npm ERR! d:\AngularJS\Tutorials\New\Apps\angular2-rollup-starter\npm-debug.log

[Feature] Istanbul

Would be nice to have Istanbul for code coverage. I tried by myself with no success. Thank you for your work @jkuri!

Angular Material & npm run roll:prerender

When trying to prerender a route that uses angular material components I'm getting lots of errors like this:

...... [ERROR ->]<md-grid-tile>4</md-grid-tile>\n</md-grid-list>\n\n"): AppComponent@45:2\n\'md-grid-list\' is not a known element:\n1. If \'md-grid-list\' is an Angular component, then verify that it is part of this module.\n2. If \'md-grid-list\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("\n</md-grid-list>\n\n[ERROR ->]<md-grid-list cols="2">\n <md-grid-tile>1</md-grid-tile>\n <md-grid-tile>2</md-grid-tile>\n"): AppComponent@41:0\n\'md-card-title\' is not a known element:\n1. If \'md-card-title\' is an Angular component, then verify that it is part of this module.\n2. If \'md-card-title\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("\n <md-card-header>\n <div md-card-avatar class="example-header-image"></div>\n [ERROR ->]<md-card-title>Shiba Inu</md-card-title>\n <md-card-subtitle>Dog Breed</md-card-subtitle>\n </md-ca"): AppComponent@51:4\n\'md-card-subtitle\' is not a known element:\n1. If \'md-card-subtitle\' is an Angular component, then verify that it is part of this module.\n2. If \'md-card-subtitle\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("md-card-avatar class="example-header-image"></div>\n <md-card-title>Shiba Inu</md-card-title>\n [ERROR ->]<md-card-subtitle>Dog Breed</md-card-subtitle>\n </md-card-header>\n <img md-card-image src="assets/i"): AppComponent@52:4\n\'md-card-header\' is not a known element:\n1. If \'md-card-header\' is an Angular component, then verify that it is part of this module.\n2. If \'md-card-header\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("\n\n<md-card class="example-card">\n [ERROR ->]<md-card-header>\n <div md-card-avatar class="example-header-image"></div>\n <md-card-title>Shiba"): AppComponent@49:2\n\'md-card-content\' is not a known element:\n1. If \'md-card-content\' is an Angular component, then verify that it is part of this module.\n2. If \'md-card-content\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("\n </md-card-header>\n <img md-card-image src="assets/img/examples/shiba2.jpg">\n [ERROR ->]<md-card-content>\n <p>\n The Shiba Inu is the smallest of the six original and distinct spitz "): AppComponent@55:2\n\'md-card-actions\' is not a known element:\n1. If \'md-card-actions\' is an Angular component, then verify that it is part of this module.\n2. If \'md-card-actions\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("\n </p>\n </md-card-content>\n [ERROR ->]<md-card-actions>\n <button md-button>LIKE</button>\n <button md-button>SHARE</button>\n"): AppComponent@62:2\n\'md-card\' is not a known element:\n1. If \'md-card\' is an Angular component, then verify that it is part of this module.\n2. If \'md-card\' is a Web Component then add "CUSTOM_ELEMENTS_SCHEMA" to the \'@NgModule.schemas\' of this component to suppress this message. ("\n</md-grid-list>\n\n[ERROR ->]<md-card class="example-card">\n <md-card-header>\n <div md-card-avatar class="example-header-image"): AppComponent@48:0' } }

Any help will be appreciated

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.