How to launch Angular 2 application without ANY server

[Mikhail A. Safronov]

down votefavorite

Hello! I have a simple Angular 2 project, but I dont want to use later with npm. Do u know any decision to start a project in this way: compile all of *.ts files copy compiled js-files to another folder (not related with npm or node) open an app, using, for example, index.html. just open an index, and all app should works. Thanks.

[Lucas Lacroix]

The quick start guide already describes using the "lite-server" npm module and live-reload.

The angular-cli has a similar concept (might even be the same implementation).

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

Lucas Lacroix

Computer Scientist

System Technology Division, MEDITECH

781-774-2293

[Mikhail A. Safronov]

thanks! but i dont want to use any server to launch,

is it possible to just compile and launch?

среда, 1 июня 2016 г., 14:04:09 UTC-5 пользователь Lucas Lacroix написал:

[Lucas Lacroix]

I believe you will run in to issues with CORS. Modules are loaded via Ajax, so unless you are compiling everything in to one big JS file which is referenced by your index.html, then it will fail (pretty sure).

Is there a reason why you do not want a server?

[Mikhail A. Safronov]

i need to use a simple js folder in my Spring projects. 

Usually I use Apache for rendering Spring data, and before (with Angular 2) I just added js-files to one folder inside a main project. there wasnt only one js-file, but i didnt use any external servers (like lite-server, for instance) to launch a code. Because all of js-files were added to index,html, and allof them were rendered on client side, when he obtaned an app.

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/D9-Wh0NjMSY/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.

To post to this group, send email to ang...@googlegroups.com.
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.

--

BR,

Mikhail Safronov // safron...@gmail.com

[Mikhail A. Safronov]

i need to use a simple js folder in my Spring projects. 

Usually I use Apache for rendering Spring data, and before (with Angular 2) I just added js-files to one folder inside a main project. there wasnt only one js-file, but i didnt use any external servers (like lite-server, for instance) to launch a code. Because all of js-files were added to index,html, and allof them were rendered on client side, when he obtaned an app.

среда, 1 июня 2016 г., 14:44:44 UTC-5 пользователь Lucas Lacroix написал:

[Lucas Lacroix]

I don't know anything about "Spring", so I don't know why you would want to evade the server when it's already included.

You can use webpack or angular-cli to package up your entire project as one or two JS files which you can reference from your index.html. That MIGHT work.

[Mikhail A. Safronov]

I evade a server, because I already have one.

As I understood, I need node.js to launch this. But in my way I already have another one (I used Spring Framework, which based on Java Servlets, so I use Apache Tomcat, for example). So in if Im going to use lite-server, I need to split my project on front-end, and back-end part. It's possible, but I'm looking for easier decision. Thats why I asked.

Lucas,  I'll try to follow your suggestion, but I never used webpack (or angular-cli, I heard it's still raw, isnt it?), so can u link please on a tutorial (if u know) where i can find an instructions.

среда, 1 июня 2016 г., 15:05:17 UTC-5 пользователь Lucas Lacroix написал:

[Lucas Lacroix]

So you already have a server - everything should just work.

Start with the quick start guide I already linked.

Here is what you should modify after you get done with the quickstart...

In your package.json

change

"start": "tsc && concurrently \"npm run tsc:w\" \"npm run lite\" ",

to:

"start": "

​webpack

:w",

​

 

"webpack:w":"webpack -w"​

 

 

Save the webpack configuration file I attached in the root folder of your Angular2 application. You may need to change the entry point to match your application.

Run the following from the root folder:

npm i webpack ts-loader --save-dev

This configuration will put the compiled code in to the dist folder. You can change that in the webpack.config.js file (see webpack's documentation for more information).

You then can do "npm start" which will start webpack in watch mode. It will automatically recompile the TS source in to two modules and then watch the source files for changes before recompiling.

[Mikhail A. Safronov]

i did everything, but have this error:

npm ERR! Unexpected token '​' at 6:27

npm ERR!     "start": "​webpack:w",​

среда, 1 июня 2016 г., 15:37:26 UTC-5 пользователь Lucas Lacroix написал:

[Lucas Lacroix]

Send your tsconfig.

[Mikhail A. Safronov]

{

  "compilerOptions": {

    "target": "es5",

    "module": "commonjs",

    "moduleResolution": "node",

    "sourceMap": true,

    "emitDecoratorMetadata": true,

    "experimentalDecorators": true,

    "removeComments": false,

    "noImplicitAny": true,

    "suppressImplicitAnyIndexErrors": true

  }

}

среда, 1 июня 2016 г., 16:39:11 UTC-5 пользователь Lucas Lacroix написал:

[Lucas Lacroix]

Sorry... I meant package.json.

[Mikhail A. Safronov]

{

  "name": "angular2-quickstart",

  "version": "1.0.0",

  "description": "QuickStart package.json from the documentation, supplemented with testing support",

  "scripts": {

    "start": "​webpack:w",​ 

    "webpack:w":"webpack -w"​ ,

    "docker-build": "docker build -t ng2-quickstart .",

    "docker": "npm run docker-build && docker run -it --rm -p 3000:3000 -p 3001:3001 ng2-quickstart",

    "e2e": "tsc && concurrently \"http-server\" \"protractor protractor.config.js\"",

    "lint": "tslint ./app/**/*.ts -t verbose",

    "lite": "lite-server",

    "postinstall": "typings install",

    "test": "tsc && concurrently \"tsc -w\" \"karma start karma.conf.js\"",

    "tsc": "tsc",

    "tsc:w": "tsc -w",

    "typings": "typings",

    "webdriver:update": "webdriver-manager update"

  },

  "keywords": [],

  "author": "",

  "license": "ISC",

  "dependencies": {

    "@angular/common": "2.0.0-rc.1",

    "@angular/compiler": "2.0.0-rc.1",

    "@angular/core": "2.0.0-rc.1",

    "@angular/http": "2.0.0-rc.1",

    "@angular/platform-browser": "2.0.0-rc.1",

    "@angular/platform-browser-dynamic": "2.0.0-rc.1",

    "@angular/router": "2.0.0-rc.1",

    "@angular/router-deprecated": "2.0.0-rc.1",

    "@angular/upgrade": "2.0.0-rc.1",

    "systemjs": "0.19.27",

    "core-js": "^2.4.0",

    "reflect-metadata": "^0.1.3",

    "rxjs": "5.0.0-beta.6",

    "zone.js": "^0.6.12",

    "angular2-in-memory-web-api": "0.0.10",

    "bootstrap": "^3.3.6"

  },

  "devDependencies": {

    "canonical-path": "0.0.2",

    "concurrently": "^2.0.0",

    "http-server": "^0.9.0",

    "jasmine-core": "~2.4.1",

    "karma": "^0.13.22",

    "karma-chrome-launcher": "^0.2.3",

    "karma-cli": "^0.1.2",

    "karma-htmlfile-reporter": "^0.2.2",

    "karma-jasmine": "^0.3.8",

    "lite-server": "^2.2.0",

    "lodash": "^4.11.1",

    "protractor": "^3.3.0",

    "rimraf": "^2.5.2",

    "tslint": "^3.7.4",

    "typescript": "^1.8.10",

    "typings": "^1.0.4",

    "webpack": "^1.13.1"

  },

  "repository": {}

}

среда, 1 июня 2016 г., 16:43:39 UTC-5 пользователь Lucas Lacroix написал:

[Mikhail A. Safronov]

my app.ts file (bootstrap file) is inside of folder app, which is located inside project root.

so i changed webpack.config.js to " main: './app/',"

среда, 1 июня 2016 г., 16:45:36 UTC-5 пользователь Mikhail A. Safronov написал:

[Lucas Lacroix]

I don't see the error in your package.json that npm is complaining about. Try putting it through a linter.

[Mikhail A. Safronov]

a linter? sorry ..

среда, 1 июня 2016 г., 16:49:05 UTC-5 пользователь Lucas Lacroix написал:

[Lucas Lacroix]

http://jsonlint.com/

[Mikhail A. Safronov]

thanks for prompt, fixed redundant spaces.

but..

npm ERR! code ELIFECYCLE

npm ERR! angular2-...@1.0.0 start: `webpack:w`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the angular2-...@1.0.0 start script 'webpack:w'.

npm ERR! This is most likely a problem with the angular2-quickstart package,

npm ERR! not with npm itself.

среда, 1 июня 2016 г., 16:53:42 UTC-5 пользователь Lucas Lacroix написал:

[Lucas Lacroix]

My mistake again. "start":"webpack -w",

[Mikhail A. Safronov]

C:\Users\Michael\Desktop\quick-start-without-npm-install\quickstart-master\webpack.config.js:2

let webpack = require('webpack');

^^^

SyntaxError: Block-scoped declarations (let, const, function, class) not yet supported outside strict mode

    at exports.runInThisContext (vm.js:53:16)

    at Module._compile (module.js:373:25)

    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 Module.require (module.js:353:17)

    at require (internal/module.js:12:17)

    at module.exports (C:\Users\Michael\Desktop\quick-start-without-npm-install\quickstart-master\node_modules\webpack\bin\convert-argv.js:80:13)

    at Object.<anonymous> (C:\Users\Michael\Desktop\quick-start-without-npm-install\quickstart-master\node_modules\webpack\bin\webpack.js:39:40)

    at Module._compile (module.js:409:26)

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" "start"

npm ERR! node v4.4.4

npm ERR! npm  v2.15.1

npm ERR! code ELIFECYCLE

npm ERR! angular2-...@1.0.0 start: `webpack -w`

npm ERR! Exit status 1

npm ERR!

npm ERR! Failed at the angular2-...@1.0.0 start script 'webpack -w'.

среда, 1 июня 2016 г., 17:08:13 UTC-5 пользователь Lucas Lacroix написал:

[Lucas Lacroix]

You must be running an old version of node. Like it says in the error, you need to enable strict mode. You do that by adding "use strict"; (with quotes and semicolon) to the top of the file.

[Michael]

i added "use strict" to webpack.config.js and fixed couple errors.

finally i have this.

C:\Users\Michael\Desktop\quick-start-without-npm-install\quickstart-master>npm start

> angular2-...@1.0.0 start C:\Users\Michael\Desktop\quick-start-without-npm-install\quickstart-master

> webpack -w

ts-loader: Using types...@1.8.10 and C:\Users\Michael\Desktop\quick-start-without-npm-install\quickstart-master\tsconfig.json

Hash: 13be77c2e6ba1063d858

Version: webpack 1.13.1

Time: 10479ms

                   Asset       Size  Chunks             Chunk Names

      ./dist/app/main.js    1.62 kB       0  [emitted]  main

    ./dist/app/vendor.js    2.83 MB       1  [emitted]  vendor

  ./dist/app/main.js.map  875 bytes       0  [emitted]  main

./dist/app/vendor.js.map    3.36 MB       1  [emitted]  vendor

   [0] multi vendor 148 bytes {1} [built]

    + 513 hidden modules

I still didnt close compilation. Is it finished?

If its ok, I found 4 files in dist/app

how can i use it now? with index,html?

среда, 1 июня 2016 г., 17:14:58 UTC-5 пользователь Lucas Lacroix написал:

[Lucas Lacroix]

Yep. It's watching for file changes and if anything changes, it will automatically recompile.

Now you need to reference the two files in your index.html (vendor.js first!) and you should be good.

[Michael]

now index looks like this.

scripts from js-folder were from initial index.html with typescript.

but no result..

<html>

  <head>

    <title>Angular 2 QuickStart</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="styles.css">

    <!-- Polyfill(s) for older browsers -->

    <script src="js/client/shim.min.js"></script>

    <script src="js/dist/zone.js"></script>

    <script src="js/reflect-metadata/Reflect.js"></script>

    <script src="js/systemjs/dist/system.src.js"></script>

    <script src="js/systemjs.config.js"></script>

    

    <script src="main.js"></script>

    <script src="vendor.js"></script>

    

    <script>

      System.import('app').catch(function(err){ console.error(err); });

    </script>

  </head>

  <body>

    <my-app>Loading...</my-app>

  </body>

</html>

среда, 1 июня 2016 г., 17:45:34 UTC-5 пользователь Lucas Lacroix написал:

[Lucas Lacroix]

Remove all but the vendor and main scripts (though I thought you said it was "app" not main?). The vendor script must come first.

[Michael]

Nope..

(it was main)

среда, 1 июня 2016 г., 17:57:51 UTC-5 пользователь Lucas Lacroix написал:

[Michael]

it was an initial app from angular.io

среда, 1 июня 2016 г., 18:01:31 UTC-5 пользователь Michael написал:

Nope..

http://jsonlint.com/

Sorry... I meant package.json.

To unsubscribe from this group and stop receiving emails from it, send an email to <a re

[Lucas Lacroix]

From here on, you're going to need to rely on the browsers developer console. My guess would be the scripts are in a location that your server will serve from. You might have to copy them to another folder.

[Michael]

i had to put sripts inside <body>.

Working! 

Soon I'll post all this tutorial to stack or somewhere.

Thanks for your patient! U also shown me some very useful js tricks.

Good luck) 

среда, 1 июня 2016 г., 18:06:40 UTC-5 пользователь Lucas Lacroix написал:

<blockquote class="gmail_quote" style="margin:0;margin-